Html 为什么不是'；我的下拉菜单是否显示为块？

我不得不重新安排CSS中的一些内容，现在我的下拉菜单不显示为块。下拉菜单是通过jquery创建的，但我知道代码是正确的。现在要么是html，要么是css问题。我会发布css，如果需要html，请告诉我，我会添加它

HTML:

---

它正在显示。如果您的意思是为什么它没有垂直显示，那是因为所有li都有float:left和display:inline：

.navList li{
list-style: none;
text-align: left;
***float:left;***
***display: inline;***
padding: 5px;
margin-right: 25px;
font-size: 20px;
border-radius: 15px; 
}

您只需添加以下内容：

.dropDown li{
list-style: none;
text-align: left;
padding: 5px;
***float:none;***
***display:block;***
}

---

当jQuery打开下拉菜单时，它看起来像是显示为块。ul.dropDown元素中的子li元素未设置为显示为块

此外，您可能无法将鼠标悬停在菜单上，因为它们位于#navLink1和#navLink2元素之外。将下拉列表放置在导航链接上可能会有所帮助

<li id="navLink1">
  <a class="navLink" href="">Services</a>
  <ul class="dropDown" id="dropDown1">
    <li>Pricing</li>
    <li>Examples</li>
    <li>Additional Services</li>
  </ul>
</li>

定价
例子
附加服务

如果您试图将下拉列表与导航项对齐，则应将下拉列表放在包含的li元素内，并将其放置在其后。此外，对于仅希望在navlist的直接子元素上使用而不影响子元素的其他子元素的样式，请使用“>”符号

以下是CSS：

#navigation{
    width: 100%;
    height: 50px;
    padding-bottom: 0px;
}
.navList li{
    list-style: none;
    text-align: left;
    padding: 5px;
    margin-right: 25px;
    font-size: 20px;
    border-radius: 15px; 
}
.navList > li {
    display: inline;
    position: relative;
    overflow: visible;
}
.navList li:hover{
    background-color: #3399FF;
}
.navLink{
    text-decoration: none;
    color: black;
    text-shadow: 2px 2px 5px white;
}
.dropDown{
    position: absolute;
    z-index: 1;
    top: 30px;
    left: 0;
    display: none;
    background-color: rgba(46, 184, 230, .9);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 0px;
    border-left: 2px solid lightgray;
    border-right: 2px solid lightgray;
}
.dropDown li{
    list-style: none;
    text-align: left;
    display: block;
    padding: 5px;
}
.dropDown li:hover{
    background-color: #3399FF;
}

---

看看这个：

你能提供一把小提琴吗？有人得到了什么吗？你是什么意思？垂直下拉？是的，这正是我的意思。那么我应该向下拉部分添加什么来应对这个问题。你必须将下拉列表li设置为float:none并让它们显示：block我知道导航链接的问题，我仍然必须添加到divs。但让我尝试添加这两个显示器；去上课。下拉，但那不起作用。任何其他想法。将“显示：块”和“浮动：无”添加到“.dropdown li”

<li id="navLink1">
  <a class="navLink" href="">Services</a>
  <ul class="dropDown" id="dropDown1">
    <li>Pricing</li>
    <li>Examples</li>
    <li>Additional Services</li>
  </ul>
</li>

#navigation{
    width: 100%;
    height: 50px;
    padding-bottom: 0px;
}
.navList li{
    list-style: none;
    text-align: left;
    padding: 5px;
    margin-right: 25px;
    font-size: 20px;
    border-radius: 15px; 
}
.navList > li {
    display: inline;
    position: relative;
    overflow: visible;
}
.navList li:hover{
    background-color: #3399FF;
}
.navLink{
    text-decoration: none;
    color: black;
    text-shadow: 2px 2px 5px white;
}
.dropDown{
    position: absolute;
    z-index: 1;
    top: 30px;
    left: 0;
    display: none;
    background-color: rgba(46, 184, 230, .9);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 0px;
    border-left: 2px solid lightgray;
    border-right: 2px solid lightgray;
}
.dropDown li{
    list-style: none;
    text-align: left;
    display: block;
    padding: 5px;
}
.dropDown li:hover{
    background-color: #3399FF;
}