懸停子菜單到左css

試圖在左側有一個子菜單時，我徘徊李，但問題是，它也顯示李下的空間。在本演示中，當真棒鏈接3是懸停有李click here 懸停子菜單到左css

<div id="navbar" class="navbar"> 
    <nav id="site-navigation" class="navigation main-navigation" role="navigation"> 
     <div class="menu-mega-container"> 
      <ul id="menu-mega" class="nav-menu"> 
       <li> 
        <a href="#">My awesome button</a> 
       </li> 
       <li class="has_children"> 
        <a href="#">My awesome button</a> 
        <ul> 
         <li> 
          <a href="#">awesome link nº 1</a> 
         </li> 
         <li> 
          <a href="#">awesome link nº 2</a> 
         </li> 
         <li class="has_children"> 
          <a href="#">awesome link nº 3</a> 
          <ul> 
           <li> 
            <a href="#">awesome link nº 1</a> 
           </li> 
           <li> 
            <a href="#">awesome link nº 2</a> 
           </li> 
           <li> 
            <a href="#">awesome link nº 3</a> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</div>

和CSS

nav { 
    position: relative; 
} 
nav ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

nav > div > ul > li { 
    float: left; 
} 
nav > div > ul > li > a:hover { 
    background-color: red; 
} 
nav > div > ul > li > ul { 
    position: absolute; 
    background-color: green; 
    display: none; 
    z-index: 500; 
} 
nav > div > ul > li:hover > ul { 

    display: block; 
} 
nav li > ul ul { 
    display: none; 
} 

nav li > ul li:hover > ul { 
    display: block; 
    position: relative; 
    left: 100%; 
    top: -20px; 
    background-color: green; 
}

來源

2016-05-24 michel lompret

對不起，我不太明白。我在李和子菜單之間沒有看到任何空間。我正在查看鉻。我確實看到li和submenu是不同的寬度，那是什麼意思？ –

爲什麼你在這裏看到的間隔的原因在某些空間是你做「導航LI> UL li：hover> ul「由'relative'定位，因此它的父級也會根據其高度進行擴展。

我建議你使用「絕對」而不是「相對」。

nav li > ul li:hover > ul { 
    display: block; 
    position: absolute; 
    left: 100%; 
    top: 20px; 
    background-color: green; 
    width: 100%; 
}

然後通過「相對」使其父母定位。

.has_children { 
    position: relative; 
}

爲此，請嘗試this。

來源

2016-05-24 04:12:09

謝謝艾德蒙的解釋 –

正如愛德蒙王說的那樣，對於孩子的孩子，使用「絕對」而不是「相對」的位置，否則元素仍然是流的一部分，並且會保留一個空間。給這個元素一個絕對的位置會把它從流中移出，從而消除額外的空間。

.has_children { 
    position: relative; 
}

嘗試使用類來獲得代碼的可讀性和可維護性。

.is_children { 
    position: absolute; 
    width: 100%; 
    top: 2px; 
    left: 100%; 
    padding: 8px; 
}

也試圖給出不同類的主父「UL」

看一看在fiddle here

來源

2016-05-24 04:52:40 wisd81

懸停子菜單到左css

回答

相關問題