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主菜單（菜單欄）只能給它，而不是它的孩子們的事情。