的下拉导航是不是在充分的浏览器导航栏宽

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%; 
} 

希望它能帮助:)