如何将菜单子项显示为块
How to display menu subitems as a block
我有一个在垂直列表中显示子项的菜单。我想水平显示它们,但不知道该怎么做。这是我的 jsfiddle。所以而不是显示为
First sub-item
Second sub-item
应该是
First sub-item Second sub-item
列表的宽度应该是可用的任何宽度,以便项目在 phone 和桌面上正确显示。这是我正在使用的代码。有人可以解释一下如何做到这一点吗?
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
width: 10em;
height: 2em;
line-height: 2em;
position: relative;
border-bottom: 2px solid #ccc;
}
ul li:hover {
background-color: #ffa;
}
ul li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
}
ul li:hover ul {
display: block;
}
ul li ul li {
display: list-item;
position: relative;
}
ul li ul li ul {
display: none;
position: absolute;
top: 0;
left: 10em;
}
ul li ul li ul li {
display: none;
}
ul li ul li:hover ul {
display: block;
}
ul li ul li:hover ul li {
display: list-item;
}
</style>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third, with a dropdown
<ul>
<li>First sub-item</li>
<li>Second sub-item</li>
<li>Third, with a fly-out
<ul>
<li>Flyout one</li>
<li>Flyout two</li>
<li>Flyout three</li>
</ul>
</li>
<li>Fourth sub-item</li>
</ul>
</li>
<li>Fourth list item</li>
</ul>
要水平显示它们,您只需在悬停时添加 display:flex
而不是 display:block
。希望对您有所帮助。
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
width: 10em;
height: 2em;
line-height: 2em;
position: relative;
border-bottom: 2px solid #ccc;
}
ul li:hover {
background-color: #ffa;
}
ul li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
}
ul li:hover ul {
display: flex;
}
ul li ul li {
display: list-item;
position: relative;
}
ul li ul li ul {
display: none;
position: absolute;
top: 2em;
left: 0em;
}
ul li ul li ul li {
display: none;
}
ul li ul li:hover ul {
display: flex;
}
ul li ul li:hover ul li {
display: list-item;
}
<ul>
<li>Main Menu
<ul>
<li>First sub-item</li>
<li>Second sub-item</li>
<li>Third sub-item</li>
<li>Fourth sub-item
<ul>
<li>first flyout</li>
<li>second flyout</li>
<li>third flyout</li>
</ul>
</li>
</ul>
</li>
</ul>
我有一个在垂直列表中显示子项的菜单。我想水平显示它们,但不知道该怎么做。这是我的 jsfiddle。所以而不是显示为
First sub-item
Second sub-item
应该是
First sub-item Second sub-item
列表的宽度应该是可用的任何宽度,以便项目在 phone 和桌面上正确显示。这是我正在使用的代码。有人可以解释一下如何做到这一点吗?
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
width: 10em;
height: 2em;
line-height: 2em;
position: relative;
border-bottom: 2px solid #ccc;
}
ul li:hover {
background-color: #ffa;
}
ul li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
}
ul li:hover ul {
display: block;
}
ul li ul li {
display: list-item;
position: relative;
}
ul li ul li ul {
display: none;
position: absolute;
top: 0;
left: 10em;
}
ul li ul li ul li {
display: none;
}
ul li ul li:hover ul {
display: block;
}
ul li ul li:hover ul li {
display: list-item;
}
</style>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third, with a dropdown
<ul>
<li>First sub-item</li>
<li>Second sub-item</li>
<li>Third, with a fly-out
<ul>
<li>Flyout one</li>
<li>Flyout two</li>
<li>Flyout three</li>
</ul>
</li>
<li>Fourth sub-item</li>
</ul>
</li>
<li>Fourth list item</li>
</ul>
要水平显示它们,您只需在悬停时添加 display:flex
而不是 display:block
。希望对您有所帮助。
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
width: 10em;
height: 2em;
line-height: 2em;
position: relative;
border-bottom: 2px solid #ccc;
}
ul li:hover {
background-color: #ffa;
}
ul li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
}
ul li:hover ul {
display: flex;
}
ul li ul li {
display: list-item;
position: relative;
}
ul li ul li ul {
display: none;
position: absolute;
top: 2em;
left: 0em;
}
ul li ul li ul li {
display: none;
}
ul li ul li:hover ul {
display: flex;
}
ul li ul li:hover ul li {
display: list-item;
}
<ul>
<li>Main Menu
<ul>
<li>First sub-item</li>
<li>Second sub-item</li>
<li>Third sub-item</li>
<li>Fourth sub-item
<ul>
<li>first flyout</li>
<li>second flyout</li>
<li>third flyout</li>
</ul>
</li>
</ul>
</li>
</ul>