我遇到的问题是我的下拉列表总是在左侧。我需要它,所以它直接在每个菜单项下。
我试着玩定位,因为子项的绝对性是它一直在左边的原因。但是position: relative
放在subitem
上会在悬停时完全打破菜单。
问题演示:https://jsfiddle.net/dsngpsxb/2/
以下代码:
HTML:
<nav class="main-navigation">
<ul>
<li class="item"><a href="#">item</a>
<ul class="subitem">
<li>subitem</li>
<li>subitem</li>
<li>subitem</li>
</ul>
</li>
<li class="item"><a href="#">item</a>
<ul class="subitem">
<li>subitem</li>
<li>subitem</li>
<li>subitem</li>
</ul>
</li>
<li class="item"><a href="#">item</a></li>
<li class="item"><a href="#">item</a></li>
<li class="item"><a href="#">item</a></li>
<li class="item"><a href="#">item</a></li>
<li class="item"><a href="#">item</a></li>
</ul>
</nav>
SCSS / SASS:
.main-navigation {
width: 100%;
position: relative;
ul {
margin: 0 auto;
padding: 18px;
.item {
display: inline;
padding-right: 43px;
font-size: 13px;
text-transform: uppercase;
&:hover ul {
display: block;
}
}
}
}
.subitem {
display: none;
position: absolute;
top: 50px;
li {
line-height: 30px;
font-size: 14px;
}
}
请注意,我确实在这里做了研究,发现了几个关于SO的问题解释了我的问题,我尝试了所有接受的答案,但都没有。
我已将每个示例包含在下面的相应JSfiddle示例中:
Dropdown menu appearing not below parent
将position: relative
添加到我的子项目中会完全破坏菜单:https://jsfiddle.net/mtp2cg7c/2/
CSS: make dropdown submenu appear below parent <ul> <li>
阻止显示,相对定位和我的<li>
左侧浮动,绝对定位,100%左上角:0 <ul>
&#34;粉碎&#34;所有项目都是:https://jsfiddle.net/9s9Lmr1h/4/
CSS dropdown menu element moving to left?
在附带的小提琴中,我注意到全局容器是clear: both;
的属性 - 我尝试将其与浮动和定位结合使用。所有子项目仍悬浮在左侧:https://jsfiddle.net/3x3krdsd/1/
我的<nav>
标签应该受到指责吗?我找不到任何暗示此标记会改变这些规则行为的内容:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
答案 0 :(得分:1)
向您的position: relative;
和.item
添加left: 0;
到.subitem
。
这将使子项目本身相对于父项目,这应该为您提供所需的结果:https://jsfiddle.net/58sb3rL4/