Question

我想创建一个dopdownmenu，只有html＆amp; CSS。而现在我认为我犯了错误......此刻我没有多少这是我的页面：Page

互联网上的教程不适合我：/如果有人可以给我写一些关于建筑的东西会很酷。因为我认为这是不正确的。感谢。

代码：

＆＃13;

*{
    margin: 0px;
    padding: 0px;
}

a{
    display: block;
    display: block;
    padding: 10px;
    background-color: lightgrey;
}


.li_oben, .li_unten{
    display: inline-block;
}

＆＃13;

<html>
    <head>
        <title>Homeapge</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <nav>
            <ul class="ul_oben">
                <li class="li_oben"><a href="#">Link 1</a></li>
                <li class="li_oben"><a href="#">Link 2
                    <ul class="ul_unten">
                        <li class="li_unten"><a href="#">Link 2.1</a></li>
                        <li class="li_unten"><a href="#">Link 2.2</a></li>
                    </ul>    
                </a></li>
            </ul>
        </nav>
    </body>
</html>

＆＃13;

Answer 1

多级菜单标记应如下所示：

<ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
    <li>
        <a>Link 3</a>
        <ul>
            <li><a>Link 3.1</a>
            <li><a>Link 3.2</a>
            (...)
        </ul>
    </li>
</ul>

Answer 2

这种技术在互联网上广泛发布快速搜索使我获得了一个教程，可以准确地捕获您想要实现的目标。

Simple CSS Drop Down Menu by James Richardson

这是我创建的教程中的快速JSFiddle。

快速查看CSS样式。

ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
       white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}

下拉菜单正确吗？

2 个答案: