淘宝导航栏效果_求大牛指导
请问各位大牛这种效果如何实现,主要不明白border那里是如何弄成多边形的, ul?li?hover 导航栏 淘宝 css
[解决办法]
上下两个div拼的,上面一个border-bottom:none;下面一个正常border,然后用绝对定位上面覆盖下面的。
另外这个世界有款神器叫firebug,你可以试试。
[解决办法]
首先要保证正确的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>