考虑到下面的菜单代码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.如何使子菜单垂直打开,而不是水平打开?
发布于 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
需要位于其父元素上。
https://stackoverflow.com/questions/50689277
复制相似问题