CSS-下拉导航条_html/css

Html代码通过ul列表实现:

 
首页
 
产品
 
服务 
设计
 
研发
 
交付
  
关于我们 
博客园
 
FlyElephant
 
keso
  

CSS代码如下:

 .nav { margin-left: 200px; margin-top:200px; } .nav li { float: left; width: 150px; background-color: #00C5CD; padding-top: 10px; padding-bottom: 10px; text-align: center; border-right: 1px solid #fff; } .nav li:last-child { border-right: none; } .nav li ul { width: 150px; position: absolute; margin-top: 10px; left: 9999px; } .nav li ul li { background-color: #00EE00; border-bottom: 1px solid #fff; } .nav li:hover ul { left: auto; }

　里面很重要的一点就是在正常状态下将需要展示的ul位置只放在屏幕之外，left:9999px,鼠标滑动上的时候将left设置为auto~