1

请看附上的图片，这样我就可以清楚地看到它

在此处输入图像描述

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

#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>

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

4

3 回答 3

1

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

  1. 将“最小高度”添加到您的身体标签
  2. 不要对页脚使用 top:??px 属性
  3. 确保不要对页脚使用任何其他垂直定位

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

  1. 使用javascript动态计算每个成员的高度
  2. 将所有这些添加到页脚高度和您正在使用的其他页眉
  3. 将此用作身体的最小高度或高度
  4. 尝试使用 jQuery 更快地实现，如果您使用自己的库，请稍后翻译代码
于 2012-08-03T04:02:59.300 回答
0

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

于 2012-08-03T02:59:30.147 回答
0

没有代码我真的帮不上忙，但这个想法很简单：

在菜单容器上放置一个固定高度并将其溢出属性设置为自动。现在，当用户将鼠标悬停在查看菜单时，他们将看到一个可滚动的列表，而不是沿着页面向下移动。

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

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

演示

于 2012-08-03T02:55:36.537 回答