I have a stylish menu that suits my website perfectly. However, when I add this menu to my page, I am struggling to make it fill the vertical length of the page (it is already vertical but not very long).
The only solution I have found is to adjust the length of the menu buttons, which makes the overall length longer but compromises the appearance of the buttons due to their height.
Here is my CSS:
.menu_simple ul {
margin: 0;
padding: 0;
width:100px;
list-style-type: none;
}
.menu_simple ul li a {
text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #BDBDBD;
display:block;
}
.menu_simple ul li a:visited {
color: white;
}
.menu_simple ul li a:hover, .menu_simple ul li .current {
color: white;
background-color: #5FD367;
}
And here is my HTML:
<div class="menu_simple">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
Essentially, I want the menu to expand vertically with just the background color if there are no additional menu buttons added.
I hope this explanation clarifies my issue. Thank you for your assistance.