淘宝导航栏效果_求大牛指导

神笔老梁 2013-09-26 08:30:38

请问各位大牛这种效果如何实现，主要不明白border那里是如何弄成多边形的，

...全文

106 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

豪情 2013-09-26

打赏
举报

首先要保证正确的dtd，不知道是笔误，还是没有粘贴上来，然后才是代码的有机分离与效果的整合。


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        .dpnone{ display:none;}
        #nav{
            position:relative;
            z-index:999;
        }
        #nav_child{
            width:200px;
            height:100px;
            border:2px solid #C1C1C1;
            background-color:#F90;
            position:absolute;
            z-index:10;
            top:48px;
        }
        #nav:hover #nav_child{ display:block;}
        .first{ 
            position:absolute;
            top: 0;left: 0; 
            display:block; 
            z-index:12;
            width:100px;
            height:50px;
            border-left:2px solid #C1C1C1;
            border-right:2px solid #C1C1C1;
            border-top:2px solid #C1C1C1;
            background-color:#09F;
        }
    </style>
</head>

<body>
<div id="nav">
    <a class="first">adc</a>
    <div id="nav_child" class="dpnone">
        <a>def</a>
    </div>
</div>
</body>
</html>

豪情 2013-09-26

打赏
举报

上下两个div拼的，上面一个border-bottom:none;下面一个正常border，然后用绝对定位上面覆盖下面的。另外这个世界有款神器叫firebug，你可以试试。

神笔老梁 2013-09-26

打赏
举报

楼主补充，层级为啥没效果


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.dpnone{ display:none;}
#nav{ 
	width:100px; 
	height:50px; 
	border-left:2px solid #C1C1C1; 
	border-right:2pxsolid #C1C1C1;
	border-top:2px solid #C1C1C1;
	background-color:#09F ;	
	position:relative;
	z-index:999;
	}
#nav_child{ 
	width:200px; 
	height:100px; 
	border:2px solid #C1C1C1; 
	background-color:#F90; 
	position:absolute; 
	z-index:10;
	top:48px;
	}
#nav:hover #nav_child{ display:block;}
</style>
</head>

<body>
<div id="nav">
	<a>adc</a>
    <div id="nav_child" class="dpnone">
    	<a>def</a>
	</div>
</div>
</body>
</html>