下拉菜单大小和重叠问题 CSS/HTML

Question

我的下拉菜单有问题，第二级项目相互重叠并且每个项目的宽度不同。我已经搜索过这个站点并尝试修复类似的问题，但没有找到任何有效的方法。我不是程序员，但我正在尝试将其添加到我的网站。这是我的代码：

#menu ul,
#menu li,
#menu span,
#menu a {
  margin: 0;
  padding: 0;
  position: relative;
}


#menu ul {
  list-style: none;
position: absolute;
top: 1.1em;
}

#menu
{
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}

#menu ul > ul > li
{
float: left;
}


#menu ul ul {
  display: none;
  position: absolute;
  top: 36px;
  left: -1px;
  width: 100px;
  text-align: left;  
  *width: 100%; /* IE7 hack*/
}
#menu li:hover ul {
  display: block;
}

#menu:after,
#menu ul:after {
  content: '';
  display: block;
  clear: both;
}


#menu ul li
{
position: relative;
display: inline;
}

#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}

/*#menu ul li a:hover
{
text-decoration: none;
}*/

#menu ul li a.active
{
background: #171e35 url('images/menuactive.gif') repeat-x top 

left;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Menu</title>
<!-- zenlike1.0 by nodethirtythree design http://www.nodethirtythree.com -->
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="stylesheet" type="text/css"
 href="test.css">
</head>
<body>
<div id="menu"><!-- HINT: Set the class of any menu link below to "active" to make it appear active -->
<ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#" class="active">Department</a>
    <ul>
      <li><a href="#" class="active">Patrol </a></li>
      <li><a href="#" class="active">Investigations</a></li>
      <li><a href="#" class="active">Records </a></li>
      <li><a href="#" class="active">Prosecution
        </a></li>
    </ul>
  </li>
  <li><a href="#" class="active">Forms</a></li>
  <li><a href="#" class="active">Gallery</a></li>
  <li><a href="#" class="active">Media</a></li>
  <li><a href="#" class="active">Contact</a></li>
</ul>
</div>
<br>
</body>
</html>

Answer 1

Fiddle

创建了 class submenu 并添加了 display:block。这允许我们分配 width 和 height 值 DOM 对象并阻止菜单项重叠。在您的情况下，我将 class submenu 分配给了故障菜单项，以避免与先前存在的代码发生任何冲突。

Simplified version fiddle

由于您不是程序员，所以我冒昧地完善了您的代码并删除了没有做任何事情的行。上面的 simplified link 与您的代码（带有解决方案）具有相同的功能，但 classes 的混淆较少。它可以让您更轻松地继续在您的网站上工作！

要修复您网站上的对齐方式，请将 ul#menu ul 的 CSS 替换为：

ul#menu ul {
  display: none;
  position: absolute;
  top: 28px;
  margin-left: 70px;
  width: 100px;
  text-align: left;
 }

要解决显示在您的内容后面的子菜单，请将 z-index:10 添加到 #menu

Answer 2

试试这个风格，

<style>

#menu {
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
margin-right: 1px;
}

#menu a {
display: block;
padding: 0px 30px;
line-height: 45px;
text-decoration: none;
color: #FFFFFF;
}

#menu li:hover {
text-decoration: none;
background: #171e35;
}

#menu .active{
background: #171e35;
}

#menu li{
position: relative;
}

#menu ul ul{
position:absolute;
left: 0;
display: none;
width: 300px;
}

#menu li li{
float:none;
}

#menu li:hover > ul{
display:block;
}
</style>

Answer 3

给子导航链接更多line-height。

将此规则添加到您的样式中：

#menu ul li ul li {
    line-height: 2em;
    }

然后，要缩小主导航和子导航之间的差距（这将防止您将鼠标悬停在子导航链接上），请在现有的主导航规则中添加一点 padding-bottom：

在您的样式中调整这条规则：

#menu ul li a
{
    /* original */
    /* padding: 0.5em 1.0em 0.9em 1.0em; */

    /* new */
    padding: 0.5em 1.0em 1.1em 1.0em;

    color: #fff;
    text-decoration: none;
}

以上解决方案直接回答了您的问题，解决了您提出的问题。

但是，我建议您为您的导航开发考虑一个更好的整体解决方案。目前，它似乎有点脱节和拼凑在一起。

这里有一个很棒的视频教程，用于构建干净、优雅和强大的导航菜单。 https://youtu.be/k14bxM1cWoM?list=PLl1MmKpV0eieAACJx-rTMnmKYfcBOjqKN

Answer 4

只需将此 css 添加到您的样式中

#menu ul ul li a {
    width:100%;
    float:left
}

下拉菜单大小和重叠问题 CSS/HTML

Issues with Drop Down Menu size and overlap CSS/HTML

html

css

drop-down-menu