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

这是效果:

这是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 的显示是这样:

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

我们加上css

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

分下下这3句

list-style:none; 是消除 ul 前面的小点

float:left; 将li 变成浮动元素,

width:100px; 设定宽度

显示是这样:

接下来我们修改 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)

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

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