如何使子菜单停留在顶部？

Question

I have a vertical menu and the dropdown menu won't cooperate. 我有一个垂直菜单，下拉菜单将无法配合。 It currently looks like this: bad 目前看起来像这样：不好

But I want it to look like this: 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>

I've been looking on Google and I've been trying every solution for over 2 hours. 我一直在寻找Google，并且已经尝试了每种解决方案2个多小时。 Any ideas? 有任何想法吗？

Answer 1

You are currently declaring your internal level 1 link list items to have position:relative; 您当前正在声明内部1级链接列表项的position:relative; . 。 This is causing the position:absolute; 这导致了position:absolute; sub menu to start at the top of the list item rather than the top of the menu. 子菜单开始于列表项的顶部而不是菜单的顶部。

Remove the line .links-lvl1 > li { position: relative; } 删除行.links-lvl1 > li { position: relative; } .links-lvl1 > li { position: relative; } and you should find things position themselves at the top where you want. .links-lvl1 > li { position: relative; } ，您应该会发现自己位于所需位置的顶部。

JSFIDDLE 的jsfiddle

如何使子菜单停留在顶部？

问题描述

1 个解决方案

解决方案1
0 2017-03-02 08:00:01

如何使子菜单停留在顶部？

问题描述

1 个解决方案

解决方案1 0 2017-03-02 08:00:01

解决方案1
0 2017-03-02 08:00:01