css实现二级菜单

来源：互联网发布：c语言中的volatile 编辑：程序博客网时间：2024/04/30 06:45

html代码

<!DOCTYPE html><html>    <head>        <title>微大学实训</title>        <!-- 编码格式 -->        <meta charset="utf-8">        <!-- 设置SEO关键字 -->        <meta name="keywords" content="微大学,武汉微大学">        <meta name="description" content="实训html,css,javascript">        <!-- 添加外部样式 -->        <link rel="stylesheet" href="css/layout.css">        <!-- 添加网站小图标 -->        <link rel="shortcut icon" href="images/*.png">        <style>        /**/        /**/        /**/        </style>    </head>    <body>        <!-- 一级菜单 -->        <div class="menu">            <ul>                <li><a href="">首页</a>                    <!-- <ul>                        <li><a href="">2015</a></li>                        <li><a href="">2016</a></li>                        <li><a href="">2017</a></li>                    </ul> -->                </li>                <li><a href="">比赛视频</a>                    <ul>                        <li><a href="">2015</a></li>                        <li><a href="">2016</a></li>                        <li><a href="">2017</a></li>                    </ul>                </li>                <li><a href="">论坛</a></li>            </ul>        </div>        <!--  -->        <!--  -->    </body></html>

css样式

*{    margin:0;    padding:0;    }ul{list-style:none;}a{    display:block;    width:100px;    text-decoration: none;    color:#000;}/*a:hover伊获取焦点的方式进行，不能二级菜单连续形成鼠标划上的效果*/a:hover{    color:#fff;    background-color: #666;}.menu{    background-color:#eee;    width:362px;    height:40px;}/*一级菜单和二级菜单的显示*/.menu ul li{    line-height: 40px;    text-align: center;    float:left;    position:relative;/*绝对定位之后设置相对定位*/}.menu ul li ul{    display:none;    position:absolute;}/*二级菜单的显示*/.menu ul li ul li a{    background-color:#eee;}.menu ul li ul li a:hover{    color:#FFF;    background-color:#666;}/*鼠标划上一级菜单显示二级菜单*/.menu ul li:hover ul{    display:block;}

0 0