Question

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

Answer 1

我认为您必须在AT TIME ZONE标签之间插入<ul>嵌套元素，像这样：

<li>

Answer 2

我举一个例子：

<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 个答案: