CSS实现自定义导航栏带二级菜单

最新推荐文章于 2022-11-30 13:49:05 发布

缘如风

最新推荐文章于 2022-11-30 13:49:05 发布

阅读量2.3k

点赞数 4

文章标签： web html

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/81988073

版权

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<style type="text/css">

    *{
        margin: 0px; padding: 0px;
    }
    
    /*最外层div*/
    #nav{
        width: 1000px;
        height: 30px;
        background-color:coral;
        margin: 0 auto;
    }
    
    #nav ul{
        list-style: none;
    }

    #nav a{
        padding: 0 10px;
        text-decoration: none;
    }
    
    #nav ul li{
        float: left;
        position: relative;   
    }
    #nav ul li ul{
        display: none;
        position: absolute;
    }
    
    #nav ul li:hover ul 
    {
        display: block;
    }
    
    #nav ul li ul li {
       float: none;/* 调整二级菜单怎么显示 ， none竖着显示*/
    }
   
    #nav ul li ul li a{
        background-color: brown;
        
    }
     #nav ul li ul li a:hover{
        background-color: greenyellow;
    }
    
</style>

<title>自定义导航栏 利用列表实现和css</title>
</head>
<body>

<div id="nav">
    <ul >
        <li><a href="">测试</a></li>
        <li><a href="">测试2</a></li>
        <li><a href="">测是</a>
            <ul>
                <li><a href="">cehso</a></li>
            </ul>
        </li>
        <li><a href="">测试2</a>
            <ul>
                <li><a href="">cehso</a></li>
                <li><a href="">cehso</a></li>
                <li><a href="">cehso</a></li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>