在導航中與主菜單重疊的子菜單項

-1

我是新來的css。我正在嘗試製作一個帶有子項目的導航菜單，但我想我錯過了一些東西。子項目與主要項目重疊。在導航中與主菜單重疊的子菜單項

所以我看到它的頂部列表項是浮動的，所以從正常的內容流中刪除。這意味着我需要清除浮動後，子項目顯示在主要項目下。

但它不工作的me..Any想法

<body> 
    <div id="container"> 
     <nav> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li> 
        <a href="#">News</a> 
        <ul> 
         <li><a>Football News</a></li> 
         <li><a>Team News</a></li> 
         <li><a>Players News</a></li> 
         <li><a>Other News</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">About us</a></li> 
      </ul> 
     </nav> 
    </div> 
</body>

來源

2017-06-02 Ogbobe Buko

添加一些CSS

#container nav ul li { 
    float: left; 
    width: 100px; 
    height: 40px; 
    color: white; 
    background-color: black; 
    text-align: center; 
    border-right: solid #fff 1px; 
    border-bottom: solid #fff 1px; 
    padding-top: 7px; 
    opacity: 0.8; 
    position: relative;/*Add This Property*/ 
} 

#container nav ul li ul { 
    position: absolute; 
    top: 100%; 
    display: none; 
} 
#container nav ul li:hover ul{ 
    display:block; 
}

https://jsfiddle.net/szqk5be9/2/

來源

2017-06-02 10:44:57

可以使用position設置，請檢查更新片段低於

* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
body { 
 
    background-image: url("../images/background.jpeg"); 
 
} 
 

 
#container { 
 
    width: 100%; 
 
} 
 

 
nav {} 
 

 
#container nav ul { 
 
    list-style: none; 
 
} 
 

 
#container nav ul li { 
 
    float: left; 
 
    width: 100px; 
 
    color: white; 
 
    background-color: black; 
 
    text-align: center; 
 
    border-right: solid #fff 1px; 
 
    border-bottom: solid #fff 1px; 
 
    padding: 7px 5px; 
 
    opacity: 0.8; 
 
    position: relative; 
 
} 
 

 
#container nav ul li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
#container nav ul li ul li { 
 
    clear: both; 
 
} 
 

 
#container nav ul li ul { 
 
    position: absolute; 
 
    top: 100%; 
 
    display: none; 
 
} 
 
#container nav ul li:hover ul{ 
 
    display:block; 
 
}

<div id="container"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li> 
 
     <a href="#">News</a> 
 
     <ul> 
 
      <li><a>Football News</a></li> 
 
      <li><a>Team News</a></li> 
 
      <li><a>Players News</a></li> 
 
      <li><a>Other News</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">About us</a></li> 
 
    </ul> 
 
    </nav> 
 
</div>

來源

2017-06-02 10:48:31

只能選擇第一ul直接孩子選擇>，那麼它的工作原理。

#container nav > ul li { 
    float: left; 
    width: 100px; 
    height: 40px; 
    color: white; 
    background-color: black; 
    text-align: center; 
    border-right: solid #fff 1px; 
    border-bottom: solid #fff 1px; 
    line-height: 40px; 
    opacity: 0.8; 
}

來源

2017-06-02 10:49:40 DaFois

請與舊的代碼替換此代碼：

* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
body { 
 
    background-image: url("../images/background.jpeg"); 
 
} 
 

 
#container { 
 
    width: 100%; 
 
} 
 
nav {} 
 

 
#container nav ul { 
 
    list-style: none; 
 
} 
 

 
#container nav ul li { 
 
    float: left; 
 
    width: 100px; 
 
    height: 40px; 
 
    color: white; 
 
    background-color: black; 
 
    text-align: center; 
 
    border-right: solid #fff 1px; 
 
    border-bottom: solid #fff 1px; 
 
    padding-top: 7px; 
 
    opacity: 0.8; 
 
    position: relative; 
 
} 
 

 
#container nav ul li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
#container nav ul li ul li { 
 
    clear: both; 
 
} 
 
#container nav ul li ul { 
 
    position: absolute; 
 
    top: 100%; 
 
    display: none; 
 
} 
 
#container nav ul li:hover ul{ 
 
    display:block; 
 
}

<html> 
 
    <head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="css/corecss.css" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <div id="container"> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li> 
 
      <a href="#">News</a> 
 
      <ul> 
 
       <li><a>Football News</a></li> 
 
       <li><a>Team News</a></li> 
 
       <li><a>Players News</a></li> 
 
       <li><a>Other News</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Contact</a></li> 
 
      <li><a href="#">About us</a></li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </body> 
 
</html>

來源

2017-06-02 11:51:31

謝謝你這麼多 –

@OgbobeBuko歡迎爵士... :) –

請做出正確的投票，從而有助於其他人。 –

在導航中與主菜單重疊的子菜單項

回答

相關問題