html5 css练习下拉菜单制作

最新推荐文章于 2021-06-23 14:08:31 发布

weixin_33971130

最新推荐文章于 2021-06-23 14:08:31 发布

阅读量594

点赞数 1

原文链接：http://www.cnblogs.com/houweidong/p/9754807.html

版权

*{
   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>

转载于:https://www.cnblogs.com/houweidong/p/9754807.html

weixin_33971130

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 css练习下拉菜单制作

*{ 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; backgro...
复制链接

扫一扫