实例示范:制作一个导航,当鼠标经过“学习视频”时,会显示相关的课程分类,比如JavaScript,C++等等,具体代码如下:
HTML部分:
<divid="nav">
<ul>
<li>首页</li>
<li>学习视频
<ul>
<li>java</li>
<li>jQuery</li>
<li>C++</li>
<li>PHP</li>
<li>JavaScript</li>
</ul>
</li>
<li>个人中心</li>
<li>关于我们</li>
</ul>
</div>
CSS部分:
*{margin:0px;padding:0px;}
#nav{width:600px;height:40px;margin:0auto;}
#navul{list-style:none;}
#navulli{width:150px;float:left;line-height:40px;text-align:center;position:relative;}
#navullia{text-decoration:none;color:#000;display:block;text-align:center;}
#navullia:hover{color:#FFF;background:#333}
#navulliul{position:absolute;display:none;}
#navulliulli{float:none;line-height:30px;text-align:left;}
#navulliullia{width:100%;}
#navulliullia:hover{background-color:#06f;}
#navulli:hoverul{display:block}
本文转载自中文网
本文转载自中文网
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c57308.shtml