带有子菜单方向和换行符的CSS Flex菜单
带有子菜单方向和换行符的CSS Flex菜单
提问于 2018-06-05 05:52:31
考虑到下面的菜单代码JSFiddle here
<div class="menu">
<nav>
<ul>
<li>Logo</li>
<li>
Services
<div class="menu-submenu">
<ul>
<li>Very big text here in this option</li>
<li>Option</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</li>
<li>Support</li>
<li>Contact</li>
</ul>
</nav>
</div>和CSS：
.menu {
width: 100%;
background-color: white;
margin-bottom: 5px;
}
.menu nav ul {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.menu nav ul li:first-child {
padding-left: 10%;
padding-top: 5px;
padding-right: 30px;
}
.menu nav ul li:not(:first-child) {
line-height: 30px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.menu nav ul li:first-child {
height: 30px;
}
.menu nav ul li:last-child {
margin-left: auto;
margin-right: 10%;
align-self: flex-end;
}
.menu nav ul li:hover:not(:first-child) {
background-color: blue;
color: white;
}
.menu nav ul li {
position: relative;
}
.menu-submenu {
display: none;
}
.menu nav ul li:hover .menu-submenu {
display: flex;
}
.menu-submenu ul {
position: absolute;
top: 30px;
display: flex;
flex-direction: column;
}
.menu-submenu ul li {
flex: 1;
background-color: red;
z-index: 10;
}a.如何使子菜单垂直打开，而不是水平打开？
回答 1
Stack Overflow用户
发布于 2018-06-06 19:36:29
你可以用更少的代码让它变得更好：
.menu, .menu * {margin: 0; padding: 0; box-sizing: border-box}
.menu {
background: white;
margin-bottom: 5px;
}
.menu ul {
list-style: none;
display: flex;
align-items: center;
}
.menu ul li {
margin: 0 5px; /* adjust */
padding: 5px; /* adjust */
}
.menu ul li:last-child {
margin-left: auto;
}
.menu ul li:hover:not(:first-child) {
background: blue;
color: white;
}
.menu ul li:hover .menu-submenu {
display: flex;
}
.menu-submenu {
display: none;
position: relative; /* added */
}
.menu-submenu ul {
position: absolute;
top: 5px; /* modified; adjust; needs to match the padding of the ".menu ul li" */
left: -5px; /* added; adjust; needs to match the padding of the ".menu ul li" (negative) */
display: flex;
flex-direction: column;
}
.menu-submenu ul li {
width: 100%; /* added */
padding: 5px; /* adjust */
white-space: nowrap; /* added */
background: red;
z-index: 10;
}<nav class="menu">
<ul>
<li>Logo</li>
<li>
Services
<div class="menu-submenu">
<ul>
<li>Very big text here in this option</li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</li>
<li>Support</li>
<li>Contact</li>
</ul>
</nav>
否则，重点是使用white-space: nowrap来防止换行，使用width: 100%来使它们的宽度均匀。由于.menu-submenu ul具有position: absolute，因此position: relative需要位于其父元素上。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50689277
复制相关文章
相似问题