Question

我的下拉菜单出现问题，第二级项目相互重叠，每个项目的宽度不同。我搜索过这个网站并尝试修复类似的问题，但是找不到任何有用的东西。我不是一个程序员，但我想把它添加到我的网站。这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

Fiddle

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

Simplified version fiddle

由于你不是程序员，我冒昧地改进你的代码并删除那些没有做任何事情的行。上面的simplified链接具有与您的代码（使用解决方案）相同的功能，但具有较少混淆的类。它可以让您更轻松地继续在您的网站上工作！

要修复您网站上的对齐方式，请将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

为子导航链接提供更多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 3

试试这种风格，

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

只需在你的风格上加上这个css

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

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

4 个答案: