你好,欢迎访问远方教程PC版!
广告位招租

CSS+DIV下拉菜单(第1页)

[日期:2015-02-28]   来源:远方教程  作者:远方教程   阅读:6161次[字体: ] 访问[旧版]
 捐赠远方教程 

  之前由于没有用到下拉菜单,一直没去实践(只在刚学建站时用DW做了一个,无代码亲自操作经历),今天终于抽出时间做了一个下拉菜单,IE6、IE7、/FF下通用不变形,其实这个很基础,但对于往标准化转变有很好的促进作用。
先把关键点和思路摘录一下:
1、结构布局:
在菜单版块上,下拉的菜单也是放在UL中,但必需要嵌套在其父级的LI中,如下
<div id=”nav”>
<ul id=”nav_top”>
<li id=”nav_index”><a href=”/”>首页</a></li>
<li><a href=”http://www.52yfjc.com/”>CSS专栏</a>
<ul>
<li><a href=”http://www.52yfjc.com/”>CSS基础</a></li>
<li><a href=”http://www.52yfjc.com/”>CSS常用代码</a></li>
<li><a href=”http://www.52yfjc.com/”>CSS高级技术</a></li>
</ul>
</li>
… …
</div>
在这样的结构中,上层的DIV等标签不能用overflow:hidden; ,否则下拉菜单会出不来。我清晰的记得,刚学DW建站的第一个月,就用DW做了一个下拉菜单,但现在回去去看,那个更多依靠的是JS,有时定位不准会产生 下拉菜单跑位。而这样嵌套后,一会通过定位,就不会偏移。在实际应用时,nav可以加入LOGO等内容,而nav_top才是用于控制菜单。
2、样式继承:
由于在CSS中的组合选择符,会对其下的同样子标签会赋予同样的样式特征,因此,当我们对第一层的UL和LI定义时,下拉部分也会被带上同样的样式,先不 管这个,最后再去修正下拉部分的UL和LI。
A、第一层样式定义:
body {
margin: 0px;
padding: 0px;
font-size:12px;
}
#nav {
… …/* 略 */
width:800px;
margin:0 auto;
}
#nav ul {
… …
}
#nav ul li {
float: left;
}
#nav ul li a {
… …
}
#nav ul li a:hover {
… …
}

 

图片展示
 
相关评论
站长推荐