0
我有一個垂直菜單，下拉菜單不會合作。目前，它看起來像這樣： bad如何讓子菜單停留在頂部？
但我希望它看起來像這樣：good
<html>
<head>
<style>
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
button, .button {
outline: none;
-webkit-appearance: none;
border: none;
display: block;
cursor: pointer;
}
section {
width: 100%;
height: 100%;
background-color: #fafafa;
padding: 0;
position: relative;
overflow: hidden;
display: block;
}
/* Menu */
.app-nav {
background-color: #fff;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto 0;
min-height: 540px;
z-index: 40;
border-right: 1px solid #ddd;
width: 80px;
}
.app-nav .logo {
display: block;
text-align: center;
line-height: 60px;
font-size: 18px;
color: #fff;
width: 70px;
padding: 10px 5px;
}
.links-lvl1 {
display: block;
height: 100%;
background-color: #fff;
}
.links-lvl1 > li {
position: relative;
}
.links-lvl1 > li:last-child {
position: absolute;
left: 0;
bottom: 0;
width: 79px;
}
.links-lvl1 > li:last-child > a {
border-bottom: none;
}
.links-lvl1 li.trigger:hover .trigger-lvl2 {
border-right-color: #e6e6e6;
background-color: #F5F7F9;
box-shadow: none;
}
.links-lvl1 li.trigger:hover .links-lvl2 {
opacity: 1;
left: 100%;
-webkit-transform: translateX(0);
transform: translateX(0);
/* margin-left: 0; */
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.links-lvl1 > li > a {
/* */
-webkit-transition: all .15s ease-out;
transition: all .15s ease-out;
display: block;
margin: 0;
color: #7B848A;
text-align: center;
position: relative;
background-color: #fff;
border-right: 1px solid;
border-right-color: #fff;
}
.links-lvl1 > li > a:hover, .links-lvl1 > li > a.selected {
color: #5C676E;
border-right-color: #e6e6e6;
background-color: #F5F7F9;
box-shadow: none;
transition: 0.05s ease-in;
}
.links-lvl1 > li > a span {
display: block;
}
.links-lvl1 [data-tip] {
/*targets tooltip trigger*/
}
.links-lvl1 [data-tip]:hover .tip {
display: block;
}
.links-lvl1 [data-tip] .tip {
/*div*/
display: none;
content: "tooltip";
position: absolute;
left: 20%;
top: -60%;
background-color: rgba(255, 255, 255, 0.9);
color: #495258;
font-size: 12px;
padding: 6px;
margin: 0;
border-radius: 2px;
white-space: nowrap;
}
.links-lvl1 [data-tip] .tip:after {
content: "";
position: absolute;
border-top: 6px solid rgba(255, 255, 255, 0.9);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
left: 4px;
bottom: -6px;
}
.links-lvl1 .faded {
/*a*/
background-color: #fff;
color: #495258;
}
.links-lvl1 .fa {
/*a > i*/
font-size: 32px;
line-height: 60px;
}
.links-lvl1 .site-label {
text-transform: uppercase;
display: block;
font-size: 15px;
line-height: 26px;
margin: 0 13px;
color: #b8c0c4;
}
.links-lvl1.links-with-text > li > a {
padding: 20px 0;
}
.links-lvl1.links-with-text > li > a .fa {
line-height: 26px;
}
.links-lvl1.links-with-text > li > a span {
line-height: 14px;
display: block;
font-size: 13px;
}
.links-lvl1.links-3d > li > a {
border-bottom: 1px solid #475055;
box-shadow: inset 0 -1px 0 #262b2e;
}
.links-lvl1.links-3d > li > a.selected:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
display: block;
background-color: #FFA143;
border-bottom: 1px solid #a95500;
box-sizing: border-box;
}
.links-lvl1.links-3d > li:last-child > a {
box-shadow: inset 0 1px 0 #475055;
border-top: 1px solid #262b2e;
border-bottom: none;
}
.links-lvl2 {
opacity: 0;
min-height: 200%;
position: absolute;
top: 0;
left: -300%;
z-index: 9999;
height: 100%;
background: #fff;
outline: 1px solid #ddd;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: -webkit-transform .15s ease-out 0s, opacity .15s ease-out 0s, left 0s linear .15s;
transition: transform .15s ease-out 0s, opacity .15s ease-out 0s, left 0s linear .15s;
}
.links-lvl2 .header {
background: #fff;
border-bottom: 1px solid #ddd;
color: #666;
height: 34px;
font-size: 14px;
height: 40px;
}
.links-lvl2 .header:hover {
background: #fff;
}
.links-lvl2 a, .links-lvl2 .trigger-lvl3 {
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out;
display: block;
padding: 10px 14px 10px 14px;
font-size: 12px;
min-width: 180px;
color: #8f9aa1;
white-space: nowrap;
position: relative;
}
.links-lvl2 a:hover, .links-lvl2 .trigger-lvl3:hover {
background: #F5F7F9;
}
.links-lvl2 .fa {
/*i*/
font-size: 12px;
margin-right: 12px;
}
.links-lvl2 .selected {
/* applied to <a> tag */
padding-left: 30px;
}
.links-lvl2 .selected:before {
content: "";
position: absolute;
width: 6px;
height: 6px;
display: block;
border-radius: 3px;
top: 50%;
margin-top: -2px;
left: 14px;
}
.links-lvl3-wrapper {
overflow: hidden;
}
.links-lvl3-wrapper .links-lvl3 {
height: 100%;
-webkit-transition: max-height .15s ease-out;
transition: max-height .15s ease-out;
}
.links-lvl3-wrapper a {
border-bottom: 1px solid #dedede;
}
.links-lvl3-wrapper .btn-menu-minus {
float: right;
}
.links-lvl3-wrapper.expand .links-lvl3 {
max-height: 120px;
}
</style>
</head>
<body>
<section>
<nav id="app-nav" class="app-nav">
<ul class="links-lvl1 app-nav-main-links links-with-text">
<li>
<span class="logo"><a href="/"><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png"></a></span>
</li>
<li><a href="#" class="link-lvl1"><i class="fa ion-ios-home-outline"></i><span>Dashboard</span></a></li>
<li><a href="#" class="link-lvl1"><i class="fa ion-ios-bolt-outline"></i><span>Events</span></a></li>
<li class="trigger"><a href="#" class="trigger-lvl2 link-lvl1">
<i class="fa ion-ios-eye-outline"></i>
<span>Design</span>
</a>
<div class="links-lvl2 with-header">
<a class="header">Dashboard</a>
<a href="#">link two</a>
<a href="#">link three</a>
</div>
</li>
<li class="trigger"><a href="#" class="trigger-lvl2 link-lvl1">
<i class="fa ion-ios-toggle-outline"></i>
<span>Plugins</span>
</a>
<div class="links-lvl2 with-header">
<a class="header">Dashboard</a>
<a href="#">link two</a>
<a href="#">link three</a>
</div>
</li>
<li><a href="#" class="link-lvl1"><i class="fa ion-ios-gear-outline"></i><span>Settings</span></a></li>
<li><a href="#" class="link-lvl1"><i class="fa fa-sign-out"></i><center><span>Powered by<br />AppSeed</span></center></a></li>
</ul>
</nav>
<section class="head"><header class="head-hp"><h2>Welcome to AppSeed!</h2><h3>Let's teach you a few things so you don't get stuck.</h3><br /><br /><a class="btn-home tooltip" href="#">Teach me, Professor!<span class="tooltiptext">Coming soon!</span></a></header>
<div class="app-content">
<p>
content goes here
</p>
</div></section>
</section>
</html>我一直在尋找在谷歌，我一直在試圖解決的每超過2小時。有任何想法嗎？
刪除此行：'.links-LVL1>利{位置：相對; }'。 [JSFiddle]（https://jsfiddle.net/h9jjLvqs/） – haxxxton
你的圖片（好與壞）都是相同的圖片 –
@haxxxton哇我怎麼錯過了？！把這個作爲答案，我會給你的觀點（： –