HTML/CSS 水平导航子菜单悬停错误显示

Question

我正在创建一个带有水平导航和垂直子菜单的 HTML 页面。一切正常，除了子菜单上的悬停显示在实际菜单项的左侧。

查看我的 jsfiddle：https://jsfiddle.net/qmcte349/

/* Navigation */
nav ul {
 list-style: none;
 background-color: #444;
 text-align: center;
 padding: 0;
 margin: 0;
}

nav li {
 line-height: 40px;
 text-align: left;
 width: 13%;
 border-bottom: none;
 height: 50px;
 display: inline-block;
 margin-right: -4px;
}

nav a {
 font-size: .8em;
 text-decoration: none;
 color: #fff;
 display: block;
 padding-left: 15px;
 border-bottom: none;
}

nav a:hover {
 background-color: #8e2323;
}

nav a.active {
 background-color: #aaa;
 color: #444;
 cursor: default;
}

nav > ul > li {
 text-align: center;
}

nav > ul > li > a {
 padding-left: 0;
}

/* Sub Menus */

nav li ul {
 position: absolute;
 display: none; 
 width: inherit;
}

nav li:hover ul {
 display: block; 
}

nav li ul li {
 display: block; 
}

   <nav>
    <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="#">Verein</a></li>
     <li><a href="#">Chronik</a></li>
     <li><a href="#">Termine</a>
      <ul>
       <li><a href="#">Veranstaltungen</a></li>
       <li><a href="#">Übungen</a></li>
      </ul>
     </li>
     <li><a href="#">Bilder und Videos</a></li>
     <li><a href="#">Links</a></li>
    </ul>
   </nav>

感谢您的建议！

Answer 1

您的问题是将宽度设置为 13%。这样，子菜单中的 li 也是其父级宽度的 13%。 margin-right: -4px; 你会看到的另一个问题我建议这个代码：

nav li {
    line-height: 40px;
    text-align: left;
    border-bottom: none;
    height: 50px;
    display: inline-block;
}


nav > ul > li {
    width: 13%;
  margin-right: -4px;
}

仅将对主菜单（菜单栏）重要的内容设置到它而不是它的子项。

HTML/CSS 水平导航子菜单悬停错误显示

HTML/CSS Horizontal navigation submenu hover wrong displayed

html

css

navigation

submenu