在导航中与主菜单重叠的子菜单项

-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欢迎爵士... :) –

请做出正确的投票，从而有助于其他人。 –

在导航中与主菜单重叠的子菜单项

回答

相关问题