html5 css练习下拉菜单制作

开发者若彤技术 2022年11月17日

0 收藏 546 点赞 4,684 浏览 1529 个字

*{
   margin: 0;
   padding: 0;
}
li{
   list-style-type: none;
}
a{
   text-decoration: none;
}
.ul1{
margin: 50px;
}

.ul1>li{
   width: 150px;
   height: 2em;
   border-radius: 0.5em 0.5em 0 0;
   background: rgba(30,80,200,0.8);
   font-size: 20px;
   line-height: 2em;
   text-align: center;
   float: left;
   margin-left: 20px;
}
.ul2{
   background: rgba(80,80,160,0.6);
   border-radius: 0 0 0.5em 0.5em;
   display: none;
}

.ul2>li>a:hover{
   background: rgba(140,180,40,0.8);
   width: 85%;
   height: 1.5em;
   line-height: 1.5em;
   display:inline-block;
   border-radius: 0.5em;
   font-weight: bold;
   padding: 3px 3px;

}

.ul1>li:hover>ul{
display: block;
}

.ul1>li:hover{
background: rgba(30,80,250,0.8);
}

<!DOCTYPE html>
<html lang=”en”>
<head>
   <meta charset=”UTF-8″>
   <title>下拉菜单</title>
   <link rel=”stylesheet” href=”style9.css” type=”text/css”>
</head>
<body>
<nav>
   <ul class=”ul1″>
       <li><a href=””>首页</a>
           <ul class=”ul2″>
               <li><a href=””>新闻</a></li>
               <li><a href=””>科技</a></li>
               <li><a href=””>财经</a></li>
               <li><a href=””>读书</a></li>
           </ul>
       </li>
       <li><a href=””>首页</a>
           <ul class=”ul2″>
               <li><a href=””>新闻</a></li>
               <li><a href=””>科技</a></li>
               <li><a href=””>财经</a></li>
               <li><a href=””>读书</a></li>
           </ul>
       </li>
       <li><a href=””>首页</a>
           <ul class=”ul2″>
               <li><a href=””>新闻</a></li>
               <li><a href=””>科技</a></li>
               <li><a href=””>财经</a></li>
               <li><a href=””>读书</a></li>
           </ul>
       </li>
   </ul>
</nav>
</body>
</html>