Vertical Menu Issues Using CSS & HTML - html

Question

I am trying to display a vertical menu in a defined column on the right using a statement with a specific class "vmenu". Everything seems to work, and I get the menu items on screen but they are not stacked one on top of the other like this:
Menu 1
Menu 2
Menu 3
Menu 4
instead they are shown like they are in two columns:
Menu 1 | Menu 2
Menu 3 | Menu 4
The CSS file also has a horizontal menu defined and I'm not sure if that is interfering with the results (the horizontal & drop down menus are working just great). Any help would be greatly appreciated.
I have tried to add a [class="vmenu"] to both the [ul] and each [li] statement without any change in the results.
The CSS Code For Vertical Menus:
.vmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
.vmenu li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.vmenu li {
text-align: center;
border-bottom: 1px solid #555;
}
.vmenu li:last-child {
border-bottom: none;
}
.vmenu li a.active {
background-color: #4CAF50;
color: white;
}
.vmenu li a:hover:not(.active) {
background-color: #555;
color: white;
}
The CSS Code for Horiz. Menus:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #4CAF50;
}
The HTML Code:
<div class="column2right">
<p> The Right Side</p><br>
<div class="vmenu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
</div>

Answer 1

Your problem lies in horiz.css which is affecting all ul, li, a elements. Make it look as you did for .vmenu like this:
.hmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.hmenu li {
float: left;
}
.hmenu li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.hmenu li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.hmenu li.dropdown {
display: inline-block;
}
.hmenu .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.hmenu .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.hmenu .dropdown-content a:hover {background-color: #f1f1f1;}
.hmenu .dropdown:hover .dropdown-content {
display: block;
}
.hmenu .active {
background-color: #4CAF50;
}

Answer 2

Hope the issue is with the float property being applied through horizontal menu.
Easy fix can be to remove the float for vmenu as
.vmenu li {
text-align: center;
border-bottom: 1px solid #555;
float:none;
}