纯css写出的下拉菜单。

淘宝的前端代码的确写的很牛 他们勇于探究 尝试 而且付诸实际行动去实施。真的很佩服淘宝的技术开发者。

开始我看淘宝网时 我就认为大部分都是用js 来实现的。可是如今在导师的指点下，我发现自己错了，而且错的很离谱。淘宝现在是能用css 实现的就尽量用css了 一些兼容性问题才用js来处理。

例如：下图的 下拉菜单 和小箭头  都是纯css实现的。

　

（这个IE6是不兼容的。伪类在IE6下是不被解析的.）

这个效果我自己做了一下，第一步 ：用 li:hover （li的伪类）实现下拉菜单效果，

第二步：小箭头 的（依照我以往的做法 是切了2个背景 作为a的背景）

确实是实现了和淘宝的效果，但是和淘宝的比较淘宝的  却多用了一个空的标签<b></b>

看到这首先我想到的是 淘宝可能用的是css3 的中  border-radius的属性。然后我开始试着做. 代码如下：

  <div class="sitenav">
   <ul>
   <li><a href="#">我的淘宝</a><b></b>
       <div class="panel dropanel1"><a href="#">已买到的宝贝</a><a href="#">已卖出的宝贝</a></div>
   </li>  
   <li><a href="#">我的淘宝</a> <b></b>
       <div class="panel dropanel2"><a href="#">已买到的宝贝</a><a href="#">已卖出的宝贝</a></div>
   </li>
    <li><a href="#">我的淘宝</a><b></b> 
       <div class="panel dropanel3"><a href="#">已买到的宝贝</a><a href="#">已卖出的宝贝</a></div>
   </li>
   <li><a href="#">我的淘宝</a><b></b>
       <div class="panel dropanel4"><a href="#">已买到的宝贝</a><a href="#">已卖出的宝贝</a></div>
   </li>
   </ul>
  </div>

.sitenav { width: 1030px; height: 32px; margin: 0 auto; line-height: 32px; background: #ccc; }
.sitenav li { float: left; position:relative; padding: 0 5px; }
.sitenav li a { float:left; display: block; padding: 0 8px; text-algin: center; }

.sitenav li a:hover { text-decoration: underline; color: #f00; }  
.sitenav li:hover { color: #f00; background: #fff; border: 1px solid #f00; border-bottom: 0; }
.sitenav li:hover .panel { display: block; width: 120px; }
.sitenav li:hover .panel a:hover { border: none; } 

.sitenav li b { display: block; float: left; width: 0; height: 0; margin-top: 13px;  border-width: 3px;
 border-style: solid; border-radius:3px 6px; font-size: 0; line-height: 0; }
 .sitenav li:hover b { margin-top: 13px; border-width: 3px; border-color: #fff #fff #666 #fff;}

.panel { display: none;  background: #fff; border: 1px solid #f00; border-top:none; line-height: 21px; }
.dropanel1 { position: absolute; left: -1px; top: 32px; }
.dropanel2 { position: absolute; left: -1px; top: 32px; }
.dropanel3 { position: absolute; left: -41px; top: 32px; }
.dropanel4 { position: absolute; left: -41px; top: 32px; }

得到的效果 如图： 它并不是我想要的那个小三角形。无论我怎么调 都调不对。

然后我又想到一个css3 中旋转的属性 transform 变形， 但是我查了关于transform 的用法，其中一句引起我的注意。

我屏蔽了IE浏览器的js ，而这个效果任然有效。

最后研究了下 才弄明白。原来用的是border-color 这一属性。

.sitenav li b { display: block; float: left; width: 0; height: 0; margin-top: 13px;  border-width: 3px;
 border-style: solid; border-color: #666 #ccc #ccc #ccc ; font-size: 0; line-height: 0; }
.sitenav li:hover b { margin-top: 13px; border-width: 3px; border-color: #fff #fff #666 #fff; }

小箭头在IE6里也会出现一样的效果。而且boder-color的属性依次是上、右、下、左、顺序排列的。

一开始我不明白的是 border 应该是直线的 为什么给一定的背景会出现三角形 ，我又深入的想一下

其一：b 标签没有宽高 其二：它有等宽高的border　而且设有背景，然后形成了正方形，这就出现了四角的层叠 所以设置不同的颜色

就会出现三角形。

还有 淘宝用伪类的另一个亮点：鼠标移上去 背景改变

这个完全可以直接用js 实现的。可是淘宝依旧用css 来实现 ，针对IE浏览器使用js

另外border-color 这一属性 在css.2.0版本里也可以用， 但是很少有像淘宝这样大费周折用的。一般类似情况都用作了背景代替而过。。

技术这个活是很灵活的　同一样的效果用不同方法都可以实现。不管是难易，关键看自己去不去探究，去不去尝试，这就是对技术的追求，

这一点就已经表明了对技术的态度-精益求精。每天改变一点点。。。

display: block; float: left; width: 0; height: 0; margin-top: 13px;  border-width: 3px;
 border-style: solid; border-color: #666 #ccc #ccc #ccc ; font-size: 0; line-height: 0;