HTML在更多行上创建一个下拉列表

Question

我构建了一个下拉菜单，其中包含更多下拉链接。这就像一个下拉列表中的一个下拉列表。我想将第二个下拉菜单放在更多的行或列中时遇到问题。

这是我用来为下拉菜单创建容器的CSS

.container{
  position: relative;

} 
div.container ul
{
    list-style: none;
}
div.container ul li
{
    background-color:silver;
    width:100px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    float:left;
    position: relative;
    border: 1px solid black;
    outline:black solid 1px;

}
div.container ul li:hover
{
    background-color:red;


}
div.container ul ul
{
    display:none;

}
div.container ul li:hover > ul
{
    display:block;

}
div.container ul ul ul
{
    margin-left:100px;
    top:0px;
    position: absolute;

}

和html：

    <div class=" container ">
        <ul>
            <li><a href="#">Magazin</a>
                <ul>
                    <li><a href="#">Pc</a>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>

                    </ul>
                    </li>
    </ul>
</li>
</ul>
    </div>

我希望它看起来像

                Magazin
Mouse here->    PC         Home Home Home
                Laptop     Home Home Home

类似的东西。请帮忙。谢谢：）

Answer 1

尝试此代码。 让我知道这是否适合您。

.container{
  position: relative;

} 
div.container ul
{
    list-style: none;
}
div.container ul li
{
    background-color:silver;
    width:100px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    float:left;
    position: relative;
    border: 1px solid black;
    outline:black solid 1px;

}
div.container ul li:hover
{
    background-color:red;


}
div.container ul ul
{
    display:none;

}
div.container ul li:hover > ul
{
    display:block;

}
div.container ul ul ul
{
    margin-left:100px;
    top:0px;
    position: absolute;

}
#pc{
  position:fixed;
  margin-top:40px;
 }
 #laptop{
   position:fixed;
  margin-top:60px;
 }

    <div class=" container ">
        <ul>
            <li><a href="#">Magazin</a>
                <ul>
                    <li><a href="#">Pc</a>
                    <ul id = "pc">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>

                    </ul>
                    </li>
                     <li><a href="#">laptop</a>
                   <ul id ="laptop">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                    
                    </ul>
                    </li>
    </ul>
</li>
</ul>
    </div>