独立主导航链接从CSS导航子链接？

我正在尝试为我的个人网站创建一个下拉菜单，但有些东西似乎没有正确显示。独立主导航链接从CSS导航子链接？

HTML：

<header class="mainheader"> 
     <nav class="nav"> 
     <ul> 
      <li>Home</li><li> 
      <a href="/">League</a></li><li> 
      <ul class="nav-dropdown"> 
       <li><a href="#">bbva</a></li> 
       <li><a href="#">barclays premier league</a></li> 
      </ul> 
      <a href="/">Contact</a></li> 

     </ul> 



     </nav> 
    </header>

CSS：

.mainheader, .header-text, .header-text-soccer { 
    background-color: green; 
    margin-left: 60px; 
    margin-right: 60px; 
    margin-top: 20px; 
    height: 60px; 
    border-radius: 6px; 
} 

.mainheader nav ul li a { 
    text-decoration: none; 
    color: white; 
} 

.mainheader nav ul li { 
    display: inline-block; 
    padding: 20px; 
    color: white; 
} 

.nav ul li:hover { 
    background-color: #41a608; 
    height: 20px; 
    border-radius: 2px; 
}

代码的最后几行，我认为这个问题。悬停部分覆盖了.nav中的每个行项目，但我不知道如何在css中与子导航链接（应下拉）分离主导航链接。

任何人都可以向我解释我应该添加什么代码让它工作？

谢谢。

来源

2016-02-01 Matthie

如果您可以在** Snippet **或[JSFiddle]（http://www.jsfiddle.net）中创建演示程序，则更好。 – divy3993

你为什么不接受答案？你说谢谢，刚刚离开？ –

我修改了您的完整代码：这是它，有几个修改。这可能对您有所帮助。您需要首先隐藏下拉选项，并找出触发它的时间以及如何触发。

而且一件重要的事情是，您必须将下拉选项设置为绝对选项，以便它是某个主选项/菜单的子选项。

修改HTML：

<header class="mainheader"> 
    <nav class="nav"> 
    <ul> 
     <li>Home</li> 
     <li> 
      <a href="/">League</a> 
     </li> 
     <li>Dropdown 
      <ul class="nav-dropdown"> 
       <li><a href="#">bbva</a></li> 
       <li><a href="#">barclays premier league</a></li> 
      </ul> 
     </li> 
     <li><a href="/">Contact</a></li> 
    </ul> 
    </nav> 
</header>

修改CSS：

.mainheader, .header-text, .header-text-soccer { 
    background-color: green; 
    margin-left: 60px; 
    margin-right: 60px; 
    margin-top: 20px; 
    height: 60px; 
    border-radius: 6px; 
    position: relative; 
} 

.mainheader nav ul li a { 
    text-decoration: none; 
    color: white; 
} 

.mainheader nav ul li ul{ 
    display: none; 
} 

.mainheader nav ul li { 
    display: inline-flex; 
    padding: 20px; 
    color: white; 
} 

.nav ul li:hover { 
    background-color: #41a608; 
    border-radius: 2px; 
} 

.nav ul li:hover ul{ 
    background: #aaa none repeat scroll 0 0; 
    display: block; 
    margin-left: -20px; 
    padding: 0; 
    position: absolute; 
    top: 60px; 
    width: 200px; 
} 

.mainheader nav ul li ul li{ 
    box-sizing: border-box; 
    color: white; 
    display: inline-block; 
    padding: 20px; 
    width: 100%; 
}

来源

2016-02-01 17:24:47

这不起作用，当您将鼠标悬停在下拉列表上时，它会消失。 –

[jsFiddle]（https://jsfiddle.net/frayne_konok/aqy4onu5/1/）检查出来。 –

在Chrome中呈现错误。你缺少1px的填充位置：D –

我想这是你所需要的：

https://jsfiddle.net/8f2hvdfh/1/

你的CSS是一团糟。退房就如何使CSS下拉菜单指南：http://www.w3schools.com/css/css_dropdowns.asp

这给你基本设置：

nav ul ul { 
    position:absolute; 
    display:none; 
    padding-left:0; 
} 

nav ul li { 
    display:inline-block; 
    height:60px; 
} 

nav ul ul li { 
    display:block; 
} 

nav ul li a { 
    text-decoration:none; 
    color:white; 
    display:block; 
    padding:21px; 
} 

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

其余的是花俏。祝你好运。

来源

2016-02-01 17:26:00

独立主导航链接从CSS导航子链接？

回答

相关问题