Home > Article > Web Front-end > How to implement vertical menu through css3+html5
How to implement vertical menu through css3+html5
- jackloveOriginal
- 2018-06-11 17:16:032046browse
emmm...It’s ugly...
##
<!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>This article explains how to Implement vertical menu through css3 html5, please pay attention to php Chinese website for more related content. Related recommendations:
Related explanations about HTML5 local storage
Explanations about the php Captcha verification code class
MySQL information_schema related content
The above is the detailed content of How to implement vertical menu through css3+html5. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn