简单 纯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)