Hey there! I'm currently working on a dropdown menu using unordered lists and I'm trying to figure out how to make the navigation bar full width without messing up the dropdown functionality.
Whenever I attempt to achieve this by styling the parent div(.menu), I run into overflow issues. My goal is to have the entire menu span the width of the browser window with the text centered within each navigation item. Any help or suggestions would be greatly appreciated. Thanks in advance!
.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>