淘宝导航栏成效_求大牛指导
日期：2014-05-16 浏览次数：20682 次
淘宝导航栏效果_求大牛指导
请问各位大牛这种效果如何实现，主要不明白border那里是如何弄成多边形的，
------解决方案--------------------
上下两个div拼的，上面一个border-bottom:none;下面一个正常border，然后用绝对定位上面覆盖下面的。
另外这个世界有款神器叫firebug，你可以试试。
------解决方案--------------------
首先要保证正确的dtd，不知道是笔误，还是没有粘贴上来，然后才是代码的有机分离与效果的整合。
请问各位大牛这种效果如何实现，主要不明白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>
&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
