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

Question

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

见我的jsfiddle：https://jsfiddle.net/qmcte349/

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

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

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

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

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

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

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

 
/* Sub Menus */ 
 

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

 
nav li:hover ul { 
 
\t display: block; 
 
} 
 

 
nav li ul li { 
 
\t display: block; 
 
}

\t \t \t <nav> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="index.html">Home</a></li> 
 
\t \t \t \t \t <li><a href="#">Verein</a></li> 
 
\t \t \t \t \t <li><a href="#">Chronik</a></li> 
 
\t \t \t \t \t <li><a href="#">Termine</a> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li><a href="#">Veranstaltungen</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Übungen</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li><a href="#">Bilder und Videos</a></li> 
 
\t \t \t \t \t <li><a href="#">Links</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </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; 
} 

设置那些importaint主菜单（菜单栏）只能给它，而不是它的孩子们的事情。