HTML+CSS制作简略下拉菜单的实例代码
发布时间:08/01 来源:未知 浏览:
关键词:
在制作HTML下拉菜单时,会用到许多CSS属性,比方:hover,list-style,float浮动,display属性等等,若有不分明的小同伴可以看看我之前的文章,以前都有介绍过,或者拜访 CSS3视频教程 。
实例示范:制作一个导航,当鼠标经过“学习视频”时,会显示相干的课程分类,比方JavaScript,C++等等,概括代码如下:
HTML局部:
- 首页
- 学习视频
- java
- jQuery
- C++
- PHP
- JavaScript
- 个人核心
- 对于我们
CSS局部:
*{ margin:0px; padding:0px;} #nav{ width:600px; height:40px; margin:0 auto;} #nav ul{ list-style:none;} #nav ul li{width: 150px; float:left; line-height:40px; text-align:center; position:relative;} #nav ul li a{ text-decoration:none; color:#000; display:block;text-align: center;} #nav ul li a:hover{ color:#FFF; background:#333} #nav ul li ul{ position:absolute; display:none;} #nav ul li ul li{ float:none; line-height:30px; text-align:left;} #nav ul li ul li a{ width:100%;} #nav ul li ul li a:hover{ background-color:#06f;} #nav ul li:hover ul{ display:block}
结果图:
3. bootstrap教程
以上就是HTML+CSS制作简略下拉菜单的实例代码的细致内容,更多请关注 百分百源码网 其它相干文章!