與特定的導航菜單設計

Question

我試圖做一個特定的風格導航菜單中掙扎，它需要一堆方形按鈕/列表項，那麼當你將鼠標懸停在某個項目時，該項目背後的背景更改顏色，在項目上方和下拉列表後面的體面高度，如下圖所示。

我的問題是，我很好奇，如果我這樣做是最有效的方式，而且當我把鼠標懸停在最初的項目，它正在工作，但然後你去下拉項目和主/父項目之一消失在背景中。

代碼：

body { 
 
    background-color: #00aeef; 
 
} 
 
.navBG { 
 
    background-color: #fff; 
 
} 
 
nav { 
 
    padding-top: 100px; 
 
    padding-left: 100px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 
li { 
 
    display: inline-block; 
 
    display: inline; 
 
    float: left; 
 
    background-color: #00aeef; 
 
    border: solid 4px #fff; 
 
    width: 150px; 
 
} 
 
li a { 
 
    display: block; 
 
    padding: 10px 5px; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 
li a:hover { 
 
    color: #fff; 
 
    border: solid 4px #00ee98; 
 
    border-top: solid 100px #00ee98; 
 
    margin-top: -100px; 
 
} 
 
.droplinks { 
 
    position: absolute; 
 
    background-color: #00aeef; 
 
    min-width: 150px; 
 
    display: none; 
 
    margin-left: -2px; 
 
} 
 
.droplinks a { 
 
    padding: 10px; 
 
    display: block; 
 
    border: solid 2px #00ee98; 
 
} 
 
.droplinks a:hover { 
 
    color: #fff; 
 
} 
 
.dropbutton:hover .droplinks { 
 
    display: block; 
 
}

<div class="container-fluid navBG"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="">Home</a> 
 
     </li> 
 
     <li class="dropbutton"><a href="">Products</a> 
 
     <div class="droplinks"> 
 
      <a href="">Widgets</a> 
 
      <a href="">Cogs</a> 
 
      <a href="">Gears</a> 
 
     </div> 
 
     </li> 
 
     <li class="dropbutton"> 
 
     <a href="">Services</a> 
 
     <div class="droplinks"> 
 
      <a href="">Handshakes</a> 
 
      <a href="">Winks</a> 
 
      <a href="">Smiles</a> 
 
     </div> 
 
     </li> 
 
     <li><a href="">Shop</a> 
 
     </li> 
 
     <li><a href="">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>

然後在懸停的菜單項，它改變這一點;

然而，當我然後去頂層項目弄亂了在上面的例子中的子菜單項。可以解決這個問題嗎？

Answer 1

看看這個fiddle， 這裏是你如何能正確地顯示在徘徊菜單項子菜單：

li:hover .droplinks{ 
    display: block; 
} 

Answer 2

body { 
 
    background-color: #00aeef; 
 
} 
 
.navBG { 
 
    background-color: #fff; 
 
} 
 
nav { 
 
    text-align:center; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: inline-block; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
li { 
 
    display: inline-block; 
 
    display: inline; 
 
    float: left; 
 
    background-color: #00aeef; 
 
    width: 150px; 
 
    position: relative; 
 
} 
 
li a { 
 
    display: block; 
 
    padding: 10px 5px; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-width: 30px 5px; 
 
    border-color: #fff; 
 
    border-style: solid; 
 
} 
 
li:hover a { 
 
    color: #fff; 
 
    border-color:#00ee98; 
 
} 
 
.droplinks { 
 
background-color: #00aeef; 
 
top: 100%; 
 
display: none; 
 
margin-left: 0; 
 
min-width: 150px; 
 
position: absolute; 
 
margin-top: -15px; 
 
} 
 
.droplinks a { 
 
    padding: 10px; 
 
    display: block; 
 
    border-width: 2px 4px; 
 
    border-style: solid; 
 
    border-color:#00ee98; 
 
} 
 
.droplinks a:hover { 
 
    color: #fff; 
 
} 
 
.dropbutton:hover .droplinks { 
 
    display: block; 
 
}

<div class="container-fluid navBG"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="">Home</a> 
 
     </li> 
 
     <li class="dropbutton"><a href="">Products</a> 
 
     <div class="droplinks"> 
 
      <a href="">Widgets</a> 
 
      <a href="">Cogs</a> 
 
      <a href="">Gears</a> 
 
     </div> 
 
     </li> 
 
     <li class="dropbutton"> 
 
     <a href="">Services</a> 
 
     <div class="droplinks"> 
 
      <a href="">Handshakes</a> 
 
      <a href="">Winks</a> 
 
      <a href="">Smiles</a> 
 
     </div> 
 
     </li> 
 
     <li><a href="">Shop</a> 
 
     </li> 
 
     <li><a href="">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>