Html 带有纯CSS的垂直弹出式菜单
请检查下面的代码Html 带有纯CSS的垂直弹出式菜单,html,css,Html,Css,请检查下面的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>hover-navigation</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>hover-navigation</title>
<meta name="description" content="">
<meta name="author" content="yesvin">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.menuContainer{
width:100px;
height:100vh;
background:#ccc;
z-index:1;
}
.menuContainer ul {
padding:20px 0 0 0;
margin:0;
}
.menuContainer ul li {
padding:10px;
margin:0;
list-style: none;
border-bottom:solid 1px #000;
font-family:'Arial';
font-size:16px;
background:#00ACD6;
position: relative;
}
.menuContainer ul li:hover{
background:#00A65A;
cursor:pointer;
}
.menuContainer ul li a{
text-decoration:none;
color:#000;
}
.menuContainer ul li:hover a{
text-decoration:none;
color:#fff;
}
.menuContainer ul li a:after{
content:' •'
}
.menuContainer ul li ul {
position: absolute;
top:-20px;
left:-100px;
height:100vh;
width:0px;
z-index:-1;
-webkit-transition: width 0.4s, left 0.4s;
-o-transition: width 0.4s, left 0.4s;
transition: width 0.4s, left 0.4s;
}
.menuContainer ul li:hover ul {
left:100px;
width:100px;
}
</style>
</head>
<body>
<div class="menuContainer">
<ul>
<li><a href="#">Frontend</a>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</li>
<li><a href="#">Backend</a>
<ul>
<li>PHP</li>
<li>MYSQL</li>
<li>ASP</li>
<li>JSP</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
悬停导航
html，正文{
身高：100%；
保证金：0；
填充：0；
}
梅努康塔纳先生{
宽度：100px；
高度：100vh；
背景：#ccc；
z指数：1；
}
梅努康塔纳{
填充：20px0；
保证金：0；
}
梅努康塔纳·乌利先生{
填充：10px；
保证金：0；
列表样式：无；
边框底部：实心1px#000；
字体系列：'Arial'；
字体大小：16px；
背景：#00ACD6；
位置：相对位置；
}
menuContainer ul li先生：悬停{
背景：#00A65A；
光标：指针；
}
梅努康塔纳先生{
文字装饰：无；
颜色：#000；
}
.menuContainer ul li:将鼠标悬停在a上{
文字装饰：无；
颜色：#fff；
}
梅努康塔纳·乌尔·李a：之后{
内容：“•”
}
梅努康塔纳先生
位置：绝对位置；
顶部：-20px；
左：-100px；
高度：100vh；
宽度：0px；
z指数：-1；
-webkit过渡：宽度0.4s，左侧0.4s；
-o型过渡：宽度0.4s，左侧0.4s；
过渡：宽度0.4s，左侧0.4s；
}
menuContainer ul li:悬停ul{
左：100px；
宽度：100px；
}
-
- HTML
- CSS
- Javascript
-
- PHP
- MYSQL
- ASP
- JSP
.menuContainer ul li ul {
position: absolute;
overflow: hidden;
top:-20px;
left:100px;
height:100vh;
width:0px;
z-index:0;
-webkit-transition: width 0.4s;
-o-transition: width 0.4s;
transition: width 0.4s;
}
.menuContainer ul li:hover ul {
width:100px;
z-index:1;
}
只需将这些代码行与您的代码一起更改，它就可以按照您的需要工作。为了便于解释：我们没有设置左侧位置的动画（我们无论如何都看不到），而是设置宽度的动画。为了使文本在整个时间内都能很好地显示，我们使用“
溢出：隐藏”