Question

请参阅附上的图片，以便我可以清楚地看到它

enter image description here

我有一个悬停类别，你看到的黑色栏是我的页脚。问题是，如何在不通过页脚的情况下在页面中包含所有这些类别？

#navMenu, ul, li, li li {
    margin: 0;
    pading:0;
}
#navMenu{
    width:243px;

}
#navMenu ul {
    line-height:40px;
}
#navMenu li{
    list-style:none;
    position:relative;
    background:#6EC8F5;
    border-radius:3px;
    box-shadow: 0 0 3px gray;
    text-align:center;
    font:bold 20px/40px Arial, Helvetica, sans-serif;
}
#navMenu li li {
    list-style:none;
    position:relative;
    top:13px;
    background:#CDD0D1;
    border-radius:3px;
    border:1px solid gray;
    box-shadow: 0 0 3px gray;

}
#navMenu ul li a {
    width: 240px;
    height:25px;
    display:block;
    text-decoration:none;
    text-align:center;
    font: 16px/30px Arial, Helvetica, sans-serif;
    color:black;
    border:1px solid #eee;
    padding:0 0 5px;
}
#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top:30px;
}
#navMenu ul li:hover ul {
    visibility:visible;
}

#navMenu li:hover {
    background-color:#6EC8F5;
}
#navMenu ul li a:hover {
    background-color:#6EC8F5;
}
#navMenu a:hover {
    font-weight:bold;
}

<div id="navMenu">
<ul >
<li class=index_latest>Category
    <ul>
    <li><a href='../index.php?category=Blogging'>Blogging</a></li>
    <li><a href='../index.php?category=General'>General</a></li>
    <li><a href='../index.php?category=Arts and Entertainment'>Arts and Entertainment</a></li>
    <li><a href='../index.php?category=Automotive'>Automotive</a></li>                  
    <li><a href='../index.php?category=Travel and Leisure'>Travel and Leisure</a></li>
    <li><a href='../index.php?category=Womens Interests'>Womens Interests</a></li>
    <li><a href='../index.php?category=Writing and Speaking'>Writing and Speaking</a></li>
    </ul>
</li></ul>
</div>

更新：我想把我的名单分成两半，这样我就可以并排显示第一和第二半了

Answer 1

如果您不打算在该列表中添加更多成员

将“min-height”添加到您的身体标签
不要使用top：??页脚的px属性
确保您不使用任何其他垂直定位的页脚

如果您要在该列表中添加更多成员

使用javascript动态计算每个成员的身高
将所有这些添加到页脚高度和您正在使用的其他标题
将此用作身高的最小高度或高度
尝试使用jQuery更快地实现，稍后在使用自己的库时翻译代码

Answer 2

没有代码，我真的无法帮助，但这个想法很简单：

在菜单容器上放置一个固定的高度，并将其overflow属性设置为auto。现在，当用户将鼠标悬停在菜单上时，他们会看到一个可滚动列表，而不是在页面上运行。

#navMenu ul li:hover ul {
    visibility:visible;
    height: 100px;
    overflow:auto;
    overflow-x:hidden;
}

您可以（应该）将100px更改为对您的网页更有意义的内容。

DEMO

Answer 3

将位置设置为绝对位置，然后将其置于原点上方，距离等于列表总高度的一半。你只需要知道它有多高。我认为你可以使用bottom属性执行此操作：将其设置为您希望列表上升的距离，并且不要忘记设置position：absolute。编辑：无视这一点，我犯了一个错误。

悬停元素高度

3 个答案: