請檢查下面的代碼..垂直彈出菜單純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>
<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>
這裏的問題是 'z-index的'。因爲當我懸停'li'時,子菜單打開,但是它隱藏,當我將鼠標移到下一個'li'上時,刪除'z-index'或保留相同的'z-index'爲'container'和'ul li ul'都可以正常工作。但在主菜單上的子菜單動畫。
我需要子菜單應該在容器後面。什麼將成爲這一問題的方法...
結帳的搗鼓演示http://jsfiddle.net/a92c03zj/1/
在此先感謝...
這些飛出菜單是有點早2000年你不覺得 – 2015-02-05 13:32:42
是..我知道它的舊的。但需要修復現有的項目。所以我不想改變整個代碼 – Yesvinkumar 2015-02-05 17:16:15