獨立主導航鏈接從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導航子鏈接？

回答

相關問題