下拉导航菜单

下拉导航菜单有一个固定的格式：

<ul>
<li><a href="">首页</a></li>
<ul>

<ul>
<li><a href="">图片特效</a>
<li><a href="">音乐特效</a>
<li><a href="">视频特效</a>
<li><a href="">文字特效</a>
</ul>

</ul>

这里我只添加了一个背景的css文件，至于下拉导航菜单的样式是可以根据自己的喜好设置。

下面是添加css优化后：

@charset "UTF-8";
#body{
background:#F0FFF0;/*这是设置背景颜色*/
}
ul{/*这是设置ul标签的样式*/
margin:0px;
padding:0px;
}
ul li{/*定义列表样式，由垂直排列改成为水平排列。*/
height:30px;
width:115px;
list-style:none;
float:left;
diaplay:inline;
font:09em;

}
ul li a{/*定义超链接样式，也可以认为超链接被ul li a以此包括的*/
color:#00FFFF;
width:113px;
margin:0px;
padding:0px 0px 0px 8px;
text-decoration:none;
display:block;
background:#DC143C;
}
ul li ul {/*定义鼠标滑过某个菜单项时的样式*/
visibility:hidden;
}
ul li:hover ul{
visibility:visible;/*设置display：block*/
}
ul li a:hover{
background: #DC143C;
border-bootom:1px dashed #FF0000;
}

效果如下：