的下拉導航是不是在充分的瀏覽器導航欄寬

Question

嗨，我使用無序列表創建一個下拉菜單，我想使導航寬度完全不影響下拉菜單。

當我嘗試與父母div(.menu)這樣做，則發生溢出問題。我希望菜單佔用導航中心對齊文本的瀏覽器中的整個寬度。提前致謝。

.menu ul { 
 
    list-style: none; 
 
} 
 
.menu ul li { 
 
    width: 220px; 
 
    height: 35px; 
 
    float: left; 
 
    text-align: center; 
 
    background-color: red; 
 
    position: relative; 
 
    list-style-type: none; 
 
    line-height: 35px; 
 
} 
 
.menu ul li a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
} 
 
.menu ul li a:hover { 
 
    background-color: green; 
 
} 
 
.menu ul ul { 
 
    position: absolute; 
 
    display: none; 
 
} 
 
.menu ul li:hover > ul { 
 
    display: block; 
 
} 
 
.menu ul ul ul { 
 
    margin-left: 220px; 
 
    top: 0px; 
 
}

<div class="menu"> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
     <ul> 
 
     <li><a href="#">Sub1</a> 
 
     </li> 
 
     <li><a href="#">Sub2</a> 
 
     </li> 
 
     <li><a href="#">Sub3</a> 
 
     </li> 
 
     </ul> 
 

 
    </li> 
 
    <li><a href="#">Booking</a> 
 
    </li> 
 
    <li><a href="#">History</a> 
 
     <ul> 
 
     <li><a href="#">Sub1</a> 
 
     </li> 
 
     <li><a href="#">Sub2</a> 
 
     </li> 
 
     <li><a href="#">Sub3</a> 
 
      <ul> 
 
      <li><a href="#">Sub1</a> 
 
      </li> 
 
      <li><a href="#">Sub2</a> 
 
      </li> 
 
      <li><a href="#">Sub3</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Wrestlers</a> 
 
    </li> 
 
    <li><a href="#">Events</a> 
 
    </li> 
 
    </ul> 
 

 
</div>

Answer 1

試試這個CSS。您將每個菜單選項的寬度設置爲220px而不是20％。

.menu ul { 
list-style: none; 
padding-left:0px; 
} 
.menu ul li { 
    width: 20%; 
    height: 35px; 
    float: left; 
    text-align: center; 
    background-color: red; 
    position: relative; 
    list-style-type: none; 
    line-height: 35px; 
} 
.menu ul li a { 
text-decoration: none; 
color: white; 
display: block; 
} 
.menu ul li a:hover { 
    background-color: green; 
} 
.menu ul ul { 
    position: absolute; 
    display: none; 
} 
.menu ul li:hover > ul { 
    display: block; 
} 
.menu ul ul ul { 
    margin-left:100%; 
    top: 0px; 
} 

.menu > ul > li > ul { 

width:100%; 
} 
.menu > ul > li > ul> li { 
display: block; 
width:100%; 
} 
.menu > ul > li > ul> li > ul { 
    width:100%; 
} 
.menu > ul > li > ul> li > ul > li{ 
display: block; 
width:100%; 
} 

希望它能幫助:)