[英]How to display menu subitems as a block
I have a menu that displays sub-items in a vertical list. 我有一个菜单,可在垂直列表中显示子项目。 I would like to display them horizontally but can't see how to do that.
我想水平显示它们,但看不到该怎么做。 Here is my jsfiddle .
这是我的jsfiddle 。 So instead of displaying as
因此,与其显示为
First sub-item
Second sub-item
It should be 它应该是
First sub-item Second sub-item
The width for the list should be whatever is available so that the items will appear correctly in a phone as well as a desktop. 列表的宽度应该是可用的任何宽度,以便项目可以在手机以及台式机中正确显示。 here's the code I'm using.
这是我正在使用的代码。 Would someone please explain how to do this?
有人可以解释一下该怎么做吗?
<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>
To show them horizontally you just need to add display:flex
on hover instead of display:block
. 要水平显示它们,您只需要在悬停时添加
display:flex
而不是display:block
。 Hope this is helpful to you. 希望这对您有帮助。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.