使用css实现菜单下拉效果

最新推荐文章于 2021-05-18 20:59:33 发布

屿葤Yuan

最新推荐文章于 2021-05-18 20:59:33 发布

阅读量1.1k

点赞数

分类专栏： html 文章标签： css

本文链接：https://blog.csdn.net/weixin_41812196/article/details/81256868

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="01css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">课程选项</a>
         <ul>
             <li><a href="#">Jsnm</a></li>
             <li><a href="#">Jq</a></li>
             <li><a href="#">Node.js</a></li>
         </ul>
        </li>
        <li><a href="#">学习中心</a></li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>

</body>
</html>

css代码：

*{margin: 0px;padding: 0px}
#nav{background-color: #eeeeee ;width: 600px ;height: 40px; margin: 0 auto}
ul{list-style: none}
ul li{ float: left ;line-height: 40px;text-align: center;position: relative}
a{text-decoration: none;color: black;display: block;padding: 0 10px}
a:hover{color: aliceblue;background-color: #666666}
ul li ul li{float: none;background-color: #eeeeee;margin-top: 2px}
ul li ul{position: absolute;left: 0px ;top :40px ;display: none}
ul li ul li a:hover{color: aliceblue;background-color: darkgray}
ul li:hover ul{ display: block}

主要使用了hover这个css属性

效果图：