通过html和css做出下拉导航栏的效果_html/css_WEB-ITnose

　　引用前请标明出处：http://www.cnblogs.com/zkhzz/ 谢谢

 

　　通过观察了百度的首页，对于更多产品一栏，觉得可以不涉及JS便可写出下拉导航栏的效果

　　1.先设计出大体的框架

　　

• 新闻


• hao123


• 地图


• 视频


• 贴吧


• 登录


• 设置
  
  
  
  • 2
  
  
  • 2
  
  
  • 2
  
  
  • 2
  
  
  
  


• 更多产品
  
  
  
  • 1
  
  
  • 1
  
  
  • 1
  
  
  • 1
  
  
  • 1
  
  
  • 1
  
  
  • 1
  
  
  • 1
  
  
  
  

　　2.初始化样式，修改默认的无序列表

　　

*{
padding: 0;
margin: 0;
}
.nav{
width: 100%;
height: 50px;
display: block;
position: relative;
}

 

　　3.设置nav下的ul让其浮动，使列表处于同一水平线，同时设置li，a的样式

.nav ul{
display: block;
float: right;
position: relative;
}
.nav ul li{
display: inline-block;
padding: 5px;
text-align: center;
border-left: 2px solid #f2f2f2;
position: relative;
}

.nav ul li a{
color: #666;
}

 

　　4.重要的一步之一，通过修改li下ul的display属性，使其没hover时隐藏，同时设置下拉框li的样式，使其更加自然

.nav ul li ul{
display: none;
}
.nav ul li ul li{
height: 55px;
width: 50%;
border-left: none;
border-bottom: 2px solid #f2f2f2;

}

 

　　5.hover到隐藏的ul时，修改其display属性，使其显示，同时使用position的absolute，使其显示自然

.nav ul li a:hover{
color: #06AEDA;
}
.nav ul li:hover ul {
display: block;
position: absolute;
}

 

样式全部代码：

*{
padding: 0;
margin: 0;
}
.nav{
width: 100%;
height: 50px;
display: block;
position: relative;
}
.nav ul{
display: block;
float: right;
position: relative;
}
.nav ul li{
display: inline-block;
padding: 5px;
text-align: center;
border-left: 2px solid #f2f2f2;
position: relative;
}
.nav ul li a{
color: #666;
}
.nav ul li ul{
display: none;
}
.nav ul li ul li{
height: 55px;
width: 50%;
border-left: none;
border-bottom: 2px solid #f2f2f2;

}
.nav ul li a:hover{
color: #06AEDA;
}
.nav ul li:hover ul {
display: block;
position: absolute;
}

 

 

个人觉得有几点不足之处：

1.position的absolute属性对自适应有影响，但又想不出有什么方法可以使其显示正常，希望有大牛能够解决我的疑惑。

2.当然方法不止一种，也希望有多些朋友们能够提出其他思路，让我学习借鉴，谢谢！