使用CSS的垂直菜单问题&；HTML

我试图使用一个带有特定类“vmenu”的语句在右侧定义的列中显示垂直菜单。一切似乎都正常，我在屏幕上看到了菜单项，但它们不是一个叠在另一个上面的：

Menu 1
Menu 2
Menu 3
Menu 4

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

相反，它们显示在两列中：

Menu 1  |  Menu 2
Menu 3  |  Menu 4

CSS文件还定义了一个水平菜单，我不确定这是否会影响结果（水平和下拉菜单工作得很好）。任何帮助都将不胜感激

我尝试在[ul]和每个[li]语句中添加[class=“vmenu”]，但结果没有任何变化

垂直菜单的CSS代码：

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

Horiz的CSS代码。菜单：

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

HTML代码：

<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>

右侧

您的问题在于

horiz.css

影响所有

ul，li，a

元素。使其看起来与您在

.vmenu

中所做的一样，如下所示：

Menu 1
Menu 2
Menu 3
Menu 4

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

---

您的问题在于

horiz.css

，它影响所有

ul，li，a

元素。使其看起来与您在

.vmenu

中所做的一样，如下所示：

Menu 1
Menu 2
Menu 3
Menu 4

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

---

希望问题是通过水平菜单应用float属性。 很容易解决的问题是删除vmenu的浮动，如下所示

.vmenu li {
text-align: center;
border-bottom: 1px solid #555;
float:none;
}

---

希望问题是通过水平菜单应用float属性。 很容易解决的问题是删除vmenu的浮动，如下所示

.vmenu li {
text-align: center;
border-bottom: 1px solid #555;
float:none;
}