一级导航菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>二级菜单</title>

    <style>

    html,body{

        margin: 0px;

        padding: 0px;

    }

    #menu{

        border:solid 1px #ccc; /* 设置menu的边框类型为solid,厚度为1px,颜色为ccc*/

        width: 100%;    /* 设置menu的宽度*/    

        background-color: #eee;  /*设置menu选项的背景色*/

        margin: auto;            /*设置菜单选项居中*/

    }

    #menu ul{

        list-style: none;   /* 去点号*/

        margin:5px;        /*ul的margin值*/

        padding:20px;      /*ul的padding值*/

        margin-left: 30%;

          

    }

    #menu ul li{

        display: inline;       /*可以再一行显示多个li*/

        background-color: #eee;  /*设置li选项的背景色*/

        border-bottom: 1px solid #ccc;  /* 设置li的边框类型为solid,厚度为1px,颜色为ccc*/        

        line-height: 20px;       /*设置行高和文字高度一致*/

        height: 20px;

        text-decoration: none;  /* 去下划线*/

        text-align: center;        /*文字居中*/    

        padding: 10px;       /*li的内部填充值*/



    }

    #menu ul li:hover{

        background-color: red; /*鼠标经过的背景色*/

    }

    a{

        text-decoration: none;  /*去下划线*/

        color: black;          /*设置字体颜色为黑色*/

    }

    </style>

</head>

<body>

<div id="menu">

<ul>

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

<li><a href="#">周杰伦</a></li>

<li><a href="#">后弦</a></li>

<li><a href="#">许嵩</a></li>

<li><a href="#">王力宏</a></li>

<li><a href="#">杨幂</a></li>

<li><a href="#">胡歌</a></li>

<li><a href="#">范冰冰</a></li>

<li><a href="#">林俊杰</a></li>

</ul>

</div>

</body>

</html>

 

你可能感兴趣的:(导航菜单)