Overflow 有没有可能在固定高度的菜单上创建一个纯CSS子菜单?
我有一个垂直菜单,其中一些项目的子菜单显示在该项目的右侧。这基本上可以正常工作,但是主菜单上可能有很多项目,所以我想要一个带有垂直滚动条的最大高度 问题是,如果我在主菜单上设置overflow:auto,则子菜单将不再正确显示,因为它无法溢出主菜单宽度 下面是我的代码和一个示例。如果从.menu类中删除overflow:auto,则可以看到子菜单正常工作,但当然主菜单不再正确显示 HTML:Overflow 有没有可能在固定高度的菜单上创建一个纯CSS子菜单?,overflow,submenu,css,Overflow,Submenu,Css,我有一个垂直菜单,其中一些项目的子菜单显示在该项目的右侧。这基本上可以正常工作,但是主菜单上可能有很多项目,所以我想要一个带有垂直滚动条的最大高度 问题是,如果我在主菜单上设置overflow:auto,则子菜单将不再正确显示,因为它无法溢出主菜单宽度 下面是我的代码和一个示例。如果从.menu类中删除overflow:auto,则可以看到子菜单正常工作,但当然主菜单不再正确显示 HTML: 我知道我可以将子菜单拉到继承人的主菜单之外,然后使用javascript来定位它。但是我失去了纯CSS菜
我知道我可以将子菜单拉到继承人的主菜单之外,然后使用javascript来定位它。但是我失去了纯CSS菜单,它也不再是语义的。如果有必要,我可以接受,但如果可能的话,我想找到更好的解决方案。您看过本教程吗?我认为固定高度导航栏没有任何问题
哦,该死的-垂直菜单?这可能没什么用。为什么要限制高度?我认为如果没有JS,你就不可能完成你想要的。@ Elezar,如果你有一个菜单,实际上会那么大,你能考虑一个不同的方法吗?比如许多代码设计中使用的<代码> <代码>菜单?从用户体验的角度来看,这几乎是犯罪。@gSaenz它要么设置高度,要么冒险让菜单比视口高。由于我们的应用程序的外部框架始终与视口大小相同,因此我们希望确保没有比这更大的东西@BG_Insight您能举一个
菜单的例子吗?我不知道你说的是什么意思。
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>
Menu 6
<ul class="menu submenu">
<li>SubMenu 1</li>
<li>SubMenu 2</li>
<li>SubMenu 3</li>
</ul>
</li>
</ul>
.menu
{
padding: 5px;
list-style-type: none;
background-color: #99f;
max-height: 80px;
width: 100px;
overflow: auto;
}
.menu li
{
border: #ddd 1px solid;
position: relative;
line-height: 24px;
cursor: default;
}
.menu li:hover
{
background-color: #d1e7ff;
}
.submenu
{
max-height: none;
background-color: #fff;
padding: 0;
position: absolute;
top: -1px;
left: 100%;
display: none;
}
.menu li:hover .submenu
{
display: block;
}