未分類的主菜單中的子項目

由於某些原因子項目不在中間，看起來他們由於某種原因留下了餘量。你能告訴我什麼是錯的，以及如何解決它？未分類的主菜單中的子項目

<!DOCTYPE html> 

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Responsive Menu Tutorial</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="CSS-1.css"> 
</head> 

<body> 
    <ul class="egmenu"> 
    <li><a href="#">Home</a></li> 
    <li> 
    <a href="#" class="has-sub">Products</a> 
     <ul> 
      <li><a href="#">Computers</a></li> 
      <li><a href="#">Phones</a></li> 
      <li><a href="#">Tablets</a></li> 
      <li><a href="#">Other</a></li> 
     </ul> 
    </li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
</ul> 



</body> 
</html>

這裏是CSS：

body { 
    margin: 0; 
    padding: 0; 
} 

ul.egmenu { 
    background: #333; 
    height: 30px; 
    width: 100%; 
} 

ul.egmenu > li { 
    float: left; 
    position: relative; 
} 

ul.egmenu ul { 
    background: #444; 
    display: none; 
    position: absolute; 
    left: 0; top: 100%; 
} 

ul.egmenu ul li { 
    text-align: center; 
} 

ul.egmenu a { 
    cursor: pointer; 
    display: block; 
    color: white; 
    width: 100%; 
    line-height: 30px; 
    padding: 0 10px; 
    text-decoration: none; 
} 

ul.egmenu li { list-style: none; } 

ul.egmenu li:hover { background: #555; } 
ul.egmenu li:hover ul { display: block; }

附：如果你告訴我在哪裏可以找到一些課程或什麼來解決我對CSS的理解，這也很好，因爲看起來codecademy是不夠的。

來源

2016-03-01 evghenii turco

沒有「ul.egmenu UL禮」更多的知識？我想它應該是「ul.egmenu li ul li」。 – Roger

你已經錯過了一些重要的屬性，我重新創建您的導航欄

這裏的的jsfiddle：https://jsfiddle.net/y2641f0w/3/

HTML

<body> 
    <ul class="egmenu"> 
    <li><a href="#">Home</a></li> 
    <li> 
    <a href="#" class="has-sub">Products</a> 
     <ul> 
      <li><a href="#">Computers</a></li> 
      <li><a href="#">Phones</a></li> 
      <li><a href="#">Tablets</a></li> 
      <li><a href="#">Other</a></li> 
     </ul> 
    </li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
</ul> 
</body>

CSS

body { 
    margin: 0; 
    padding: 0; 

} 

ul.egmenu{ 
    background: #333; 
    height: 30px; 
    width: 100%; 

} 

ul.egmenu ul { 
    list-style: none; 
    background-color: #444; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
} 

ul.egmenu li { 
    font-size: 25px; 
    line-height: 30px; 
    text-align: left; 
} 

ul.egmenu a { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    padding-left: 15px; 
    border-bottom: 1px solid #888; 
    transition: .3s background-color; 
} 
ul.egmenu a:hover { 
    background-color: #555; 
} 

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

/* Sub Menus */ 
ul.egmenu li li { 
    font-size: 15px; 
} 



@media screen and (min-width: 650px) { 
    ul.egmenu li { 
    width: 130px; 
    border-bottom: none; 
    height: 30px; 
    line-height: 30px; 
    font-size: 15px; 
    display: inline-block; 
    margin-right: -4px; 
    } 

    ul.egmenu a { 
    border-bottom: none; 
    } 

ul.egmenu > ul > li { 
    text-align: center; 
    } 

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

    /* Sub Menus */ 
    ul.egmenu li ul { 
    position: absolute; 
    display: none; 
    width: inherit; 
    } 

ul.egmenu li:hover ul { 
    display: block; 
    } 

    ul.egmenu li ul li { 
    display: block; 
    } 
}

你可以參考以下，以獲取有關導航欄

來源

2016-03-01 11:46:27 AVI

未分類的主菜單中的子項目

回答

相關問題