简单 纯css 多级导航菜单 制作教程1 - 使用ul li 制作导航栏

这是效果:

菜单1

菜单2

菜单3

这是html代码结构

<div id="nav">
<div class="menu">
<ul>
<li>
<a href="">菜单1</a>
</li>
<li>
<a href="">菜单2</a>
</li>
<li>
<a href="">菜单3</a>
</li>
</ul>
</div>
</div>

正常不加css 的显示是这样:

菜单1

菜单2

菜单3

第一步我们要将排列变成横列
我们加上css

.menu ul { list-style:none;}
.menu li { float:left; width:100px;}

分下下这3句
list-style:none; 是消除 ul 前面的 小点
float:left; 将li 变成浮动元素,
width:100px; 设定宽度

显示是这样:

菜单1

菜单2

菜单3

接下来我们修改 a 的样式
添加如下样式

.menu a{
display:block; /*此元素将显示为块级元素*/
height:32px;
width:100px;
line-height:32px; /*字体行高*/
text-decoration:none; /*取消链接下划线*/
text-align:center; /*字居中*/
}

/*配色独立出来修改方便*/
.menu a {
color:#F8F8F8; /*文字颜色*/
background:#2571B7; /*底色*/
}
.menu a:hover {
background: #175286; /*鼠标悬浮颜色*/
}

这样一个简单的导航菜单就制作完成了

来自为知笔记(Wiz)