gpt4 book ai didi

html - 导航菜单对齐

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

我正在尝试创建一个基本的下拉菜单。我在对齐方面遇到问题。如何让子菜单项直接位于彼此的下方?例如,我试图在“社交”下获取 twitter、instagram 和 facebook。谢谢。

https://jsfiddle.net/xalxnder/ostaqgyk/

HTML

<body>
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
</body>

CSS

body {
background: #000000;
color: white;
}

.main-nav {
float: left;
}

.main-nav li {
font-size: 10px;
display: inline;
padding-right: 10px;
}

.main-nav .sub {
color: pink;
float: none;
z-index: -200;
}

//** .sub{display: none;

}
.dropdown:hover > .sub {
display: block;
position: absolute;
}

最佳答案

这是它的基础知识。

JSFiddle

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
ul {
list-style-type: none;
color: white;
}
.main-nav >li {
display: inline-block;
position: relative;
padding-right: 10px;
}
.sub {
position: absolute;
top: 100%;
left: 0;
color: pink;
/* display:none */ /* disabled for demo */
}

.dropdown:hover .sub {
display:block;
}
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>

关于html - 导航菜单对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35279397/

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