如何通过css3+html5实现纵向菜单

2020-11-27 来源：汇智旅游网

emmm...做的比较丑...

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>横向菜单</title>
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 .wrap{
 width: 600px;
 margin: 0 auto;
 }
 a{
 text-decoration: none;
 }
 .menu{
 width: 90px;
 background: greenyellow;
 margin: 5px auto;
 position: relative;
 text-align: center;
 transition-duration: 0.5s;/*颜色转变时间*/
 /*float: left;*/
 }
 .menu:hover{
 background: pink;
 transition-duration: 0.5s;
 }
 .menu ul{
 width: 90px;
 display: none;
 background: aqua;
 position: absolute;
 top:0px;
 left:90px;
 border: 1px solid cornflowerblue;
 }
 .menu ul li{
 list-style-type: none;
 }
 .menu ul li a {
 display: block;
 padding: 5px 10px;
 border-bottom: 1px solid transparent;
 }
 .menu ul li a:hover{
 background: yellow;
 border-bottom: 1px solid cornflowerblue;
 }
 .menu:hover .select_app{
 display: block;
 transition-duration: 0.5s;
 }
 </style>
</head>
<body>
<p class="wrap">
 <p class="menu">
 <a href="#" class="app">应用</a>
 <ul class="select_app">
 <li><a href="#">聊天应用</a></li>
 <li><a href="#">游戏应用</a></li>
 <li><a href="#">天气应用</a></li>
 <li><a href="#">其他应用</a></li>
 <li><a href="#">聊天应用</a></li>

 </ul>
 </p>
 <p class="menu">
 <a href="#" class="app">应用</a>
 <ul class="select_app">
 <li><a href="#">聊天应用</a></li>
 <li><a href="#">游戏应用</a></li>
 <li><a href="#">天气应用</a></li>
 <li><a href="#">其他应用</a></li>
 <li><a href="#">聊天应用</a></li>

 </ul>
 </p>
 <p class="menu">
 <a href="#" class="app">应用</a>
 <ul class="select_app">
 <li><a href="#">聊天应用</a></li>
 <li><a href="#">游戏应用</a></li>
 <li><a href="#">天气应用</a></li>
 <li><a href="#">其他应用</a></li>
 <li><a href="#">聊天应用</a></li>

 </ul>
 </p>
 <p class="menu">
 <a href="#" class="app">应用</a>
 <ul class="select_app">
 <li><a href="#">聊天应用</a></li>
 <li><a href="#">游戏应用</a></li>
 <li><a href="#">天气应用</a></li>
 <li><a href="#">其他应用</a></li>
 <li><a href="#">聊天应用</a></li>

 </ul>
 </p>
</p>
</body>
</html>

本文讲解了关于如何通过css3+html5实现纵向菜单，更多相关内容请关注Gxl网。

显示全文

全部栏目

如何通过css3+html5实现纵向菜单