gpt4 book ai didi

html - 下拉菜单正确吗?

转载 作者:行者123 更新时间:2023-11-28 16:36:27 27 4
gpt4 key购买 nike

我想创建一个 dopdownmenu,仅使用 html 和 css。现在我想我犯了一个错误..我现在没有做太多这是我的页面:Page

互联网上的教程不适合我:/如果有人能给我写一些关于构造的东西,那就太好了。因为我认为这是不正确的。谢谢。

代码:

*{
margin: 0px;
padding: 0px;
}

a{
display: block;
display: block;
padding: 10px;
background-color: lightgrey;
}


.li_oben, .li_unten{
display: inline-block;
}
<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>

最佳答案

这种技术在互联网上广泛发布。
快速搜索让我进入了一个教程,该教程准确地捕捉了您想要实现的目标。

Simple CSS Drop Down Menu by James Richardson

这是一个快速 JSFiddle来 self 创建的教程。

快速查看 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;}

关于html - 下拉菜单正确吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27755094/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com