我有一个全宽的 css 菜单，可以延伸整个屏幕，但我无法弄清楚如何让相应的子导航项位于其父级下方。
这能做到吗？ 我在网上找不到任何让我完全做到这一点的东西，但肯定有可能，不是吗？
顶部菜单项的数量需要可变，因此无论有多少，它都会相应地拉伸(stretch)。
链接到上面的 JSFiddle 以查看到目前为止我得到了什么。
html:
<div class="nav">
<ul id="css3menu1" class="topmenu">
<li class="link"><a href="/content/home.php">Home</a>
</li>
<li class="link"><a href="/content/products.php">Products</a>
<ul>
<li class="sublink"><a href="/content/products.php">Sub Products</a></li>
<li class="sublink"><a href="/content/switchboards_distribution_panels.php">Switchboards</a></li>
</ul>
</li>
<li class="link"><a href="/content/solutions.php">Solutions</a>
</li>
<li class="link"><a href="/content/case_studies.php">Case Studies</a>
</li>
<li class="link"><a href="/content/downloads.php">Downloads</a>
</li>
<li class="link"><a href="/content/careers.php">Careers</a>
</li>
<li class="link"><a href="/content/contact.php">Contact</a>
</li>
</ul>
</div>
CSS:
ul#css3menu1,ul#css3menu1 ul{
margin:0;
list-style:none;
padding:0;
z-index:5000;
}
ul#css3menu1 ul{
display:none;
position:absolute;
left:0;
top:100%;
padding:10px 10px 10px 10px;
margin:0px 0 0 -13px;
background-color:#fff;
}
ul#css3menu1 li:hover>ul{
display:inline-block;
}
ul#css3menu1 li:hover li{
}
ul#css3menu1 li{
display:table-cell;
/*white-space:nowrap;*/
font-size:0;
color:#000;
}
ul#css3menu1 li:hover{
z-index:1;
}
ul#css3menu1{
font-size:0;
z-index:999;
position:relative;
display:table;
table-layout:fixed;
width:100%;
zoom:1;
padding:0;
*display:inline;
}
* html ul#css3menu1 li a{
display:block;
}
ul#css3menu1>li{
margin:0;
}
ul#css3menu1 .link a:active, ul#css3menu1 .link a:focus{
outline-style:none;
}
ul#css3menu1 .link a{
display:block;
vertical-align:middle;
text-align:center;
text-decoration:none;
font-size:14px;
color:#777777;
cursor:pointer;
padding:23px 9px 24px;
font-weight:bold;
transition:all ease-in-out 0.4s;
border-right:1px solid #eef1f1 !important;
letter-spacing:0px;
}
ul#css3menu1 .link a:last-of-type{
border-right:0;
}
ul#css3menu1 .link a.selected{
background-color:#E4E8E8;
}
ul#css3menu1 .link a:hover{
background-color:#E4E8E8;
transition:all ease-in-out 0.4s;
}
ul#css3menu1 ul li{
float:none;
display:inherit;
margin:10px 0 0;
}
ul#css3menu1 ul ul{
margin-left:-10px;
}
ul#css3menu1 ul a{
text-align:left;
padding:4px;
font:14px Tahoma;
color:#FFF;
text-decoration:none;
}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
text-decoration:none;
}
ul#css3menu1 span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
color:#666;
text-decoration:none;
}
ul#css3menu1 li.topfirst>a{
border-width:0;
}
ul#css3menu1 li.toplast>a{
}
最佳答案
问题不在于您的代码或什么是可能的。这就是 CSS 为 position: absolute 引用原点的方式.
top/left 之类的 Origin 值基于具有指定位置值的下一个父元素。如果链中没有明确定位的元素，则原点基于 <body>元素。
|||| Element with position: absolute
||| - parent
|| - parent position: relative (this X/Y is used to position the element)
|
你只需要给你的导航容器定位。这是一个例子:
(注意:在示例中，我使用 flexbox 来对齐菜单以使生活更轻松，ul 和 li 也可以。另外，将鼠标悬停在容器上，以便移动到子内容将使菜单保持打开状态。)
nav {
display:flex;
justify-content: space-between;
}
.navItem {
flex-basis: 1;
background: #333333;
color: #ffffff;
margin: 0 1px;
cursor:pointer;
position: relative; // this is important to have
}
.navItem span {
display:block;
margin: 10px;
}
.subNav {
position: absolute;
top: 100%; // push to bottom of container
left: 0;
min-width: 100%;
background: #555555;
color: #ffffff;
display:none;
}
.navItem:hover .subNav {
display:block;
}<nav>
<div class="navItem">
<span>Main Nav</span>
</div>
<div class="navItem">
<span>Main Nav</span>
<div class="subNav">
<span class="subMenuItem">Sub 1</span>
<span class="subMenuItem">Sub 2</span>
<span class="subMenuItem">Sub 3</span>
<span class="subMenuItem">Sub 4</span>
</div>
</div>
<div class="navItem">
<span>Main Nav</span>
</div>
<div class="navItem">
<span>Main Nav</span>
<div class="subNav">
<span class="subMenuItem">Sub 1</span>
<span class="subMenuItem">Sub 2</span>
<span class="subMenuItem">Sub 3</span>
<span class="subMenuItem">Sub 4</span>
</div>
</div>
<div class="navItem">
<span>Main Nav</span>
</div>
</nav>关于html - CSS 全宽菜单，在各自的条目下方有下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54559170/