水平导航栏/下拉内容不会出现在悬停上，但除外。谢谢答案

【问题标题】：Horizontal navigation bar / dropdown content does not appear on hover as excepted. Thanks水平导航栏/下拉内容不会出现在悬停上，但除外。谢谢
【发布时间】：2019-01-09 03:22:48
【问题描述】：

 <style>

.navbar {
    position: absolute;
    left:24vw;

        }
.listitem  { 

        display: inline-block;
        padding: 0.5vw;
        border: 1px solid black;
        width: 8vw;
        float: left;
        list-style-type: none;
        z-index:1;
        background-color:green;
         }

.listitem:hover {
            background-color: red;

}
li {
list-style-type: none;

}

这里我显示导航栏的这个部分/第一项默认不出现。

    .ddc1  { 

    position: absolute;
    top: 5.3vh;
    left: 0vw;
    display: none;
    width: 7.1vw;
    z-index:999;




}

这里我显示默认不显示此部分/导航栏的第二项。

    .ddc2  {
    position: absolute;
    top: 5.2vh;
    left: 9.2vw;
    display:none;
    width: 7.1vw;
    z-index:999;

}

.ddc1 li, .ddc2 li {background-color: yellow;}
.ddc1 li, .ddc2 li { 

                border: 1px solid black;
                padding: 2vh 2vw; }

所以这是我希望在悬停时显示下拉内容的代码。

    .drpdm1:hover .ddc1 {display: block;}
    .drpdm2:hover .ddc2 {display: block;}


    </style>

这是我正在尝试创建的导航栏。

        <ul class="navbar">
<li class="listitem" class="drpdm1"><a>123456</a></li>
  <ul class="ddc1">
    <li><a>123456</a></li>
    <li><a>123456</a></li>
    <li><a>123456</a></li>
  </ul> 
<li class="listitem" class="drpdm2"><a>654321</a></li>
  <ul class="ddc2">
    <li><a>123456</a></li>
    <li><a>123456</a></li>
    <li><a>123456</a></li>
  </ul>
<li class="listitem"><a>7891911</a></li>
<li class="listitem"><a>1231231</a></li>
 </ul>

【问题讨论】：

标签： html css

【解决方案1】：

我举个例子：

<li class="listitem">
<a>123456</a>
  <ul class="ddc1">
    <li><a>123456</a></li>
    <li><a>123456</a></li>
    <li><a>123456</a></li>
  </ul> 
</li>

在 CSS 中，在 listitem 悬停时到达 ddc1：

.listitem:hover .ddc1  {
    display: inline-block;
}

【讨论】：

【解决方案2】：

我认为您必须在开始和结束<li> 标签之间有嵌套的<ul> 元素，如下所示：

<ul class="navbar">
    <li class="listitem" class="drpdm1"><a>123456</a>
        <ul class="ddc1">
            <li><a>123456</a></li>
            <li><a>123456</a></li>
            <li><a>123456</a></li>
        </ul>
    </li>
    <li class="listitem" class="drpdm2"><a>654321</a>
        <ul class="ddc2">
            <li><a>123456</a></li>
            <li><a>123456</a></li>
            <li><a>123456</a></li>
        </ul>
    </li>
    <li class="listitem"><a>7891911</a></li>
    <li class="listitem"><a>1231231</a></li>
</ul>

【讨论】：

谢谢。这绝对可能是错误之一，但似乎还有其他错误，因为它仍然无法正常工作。