鼠标经过显示二级导航

先看下效果图

html代码如下

<body>
    <div class="conter">
        <ul>
            <li><a href="#">导航栏目1</a>
                <ul class="sd">
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li>
            <li><a href="#">导航栏目2</a></li>
            <li><a href="#">导航栏目3</a></li>
            <li><a href="#">导航栏目4</a></li>
        </ul>
    </div>
</body>

css代码如下

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .conter {
            background-color: #666;
            width: 405px;
        }
        
        ul {
            background-color: #999;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid #999;
            border-right: 1px solid #999;
        }
        
        li {
            float: left;
            background-color: #ccc;
            list-style-type: none;
            border-left: 1px solid #999;
            border-top: 1px solid #999;
            font-size: 12px;
            text-align: center;
            line-height: 20px;
            width: 100px;
            height: 20px;
        }
        
        li a {
            color: #000;
            text-decoration: none;
        }
        
        li a:hover {
            display: block;
            background: #333;
            color: #fff;
            text-decoration: underline;
            font-weight: bold;
            line-height: 20px;
            height: 20px;
        }
        
        ul li ul {
            position: absolute;
            left: -999px;
        }
        
        ul li:hover ul {
            left: auto;
        }
        
        .a4 {
            width: 100px;
            height: 500px;
            background-color: indigo;
        }
    </style>

 

免责声明
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:13770178@qq.com
苏汐儿主页 » 鼠标经过显示二级导航

发表评论