Question

我正在尝试使用带有特定类“ vmenu”的语句在右侧的定义列中显示垂直菜单。一切似乎都正常，并且屏幕上显示了菜单项，但它们没有像这样堆叠在一起：

Menu 1
Menu 2
Menu 3
Menu 4

相反，它们像显示在两栏中一样显示：

Menu 1  |  Menu 2
Menu 3  |  Menu 4

CSS文件中还定义了一个水平菜单，我不确定这是否会干扰结果（水平和下拉菜单效果很好）。任何帮助将不胜感激。

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

垂直菜单的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>

Answer 1

您的问题出在horiz.css上，这正在影响所有ul, li, a元素。使其像您对.vmenu所做的那样：

.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

希望问题在于通过水平菜单应用了float属性。简便的解决方法是删除

的vmenu浮点数

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

使用CSS和HTML的垂直菜单问题

2 个答案: