使用CSS和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><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></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;
}