我有一个基于 this 的水平菜单这是纯 CSS 和 HTML,我试图将每个顶级菜单项下的下拉 div 居中对齐,但我很难让它工作。它目前向右对齐,并且我在更改为子元素的“相对”定位时所做的任何更改都会正确对齐父/子元素,但随后会丢弃顶级元素,因为子元素会占用元素之间的空间。
下面是一个元素的代码,后面是相关的 CSS。
HTML:
<ul id="menu">
<li><a href="#" class="drop">Home</a>
<div class="dropdown_2columns">
<div class="col_1">
<p class="black_box">Download stuff here<br><img src="img/menu-button.png"></a></p>
</div>
<div class="col_1">
<ul>
<li><a href="#">Item 1</li>
<li><a href="#">Item 2</li>
<li><a href="#">Item 3</li>
</ul>
</div>
</div>
</li>
CSS
#menu {
text-align:center;
color: #2262a0;
list-style:none;
width:690px;
margin:30px auto 0px auto;
height:28px;
padding:0px 20px 10px 20px;
background: #fff;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:0px;
margin-top:7px;
border:none;
}
#menu li:hover {
padding: 4px 9px 4px 9px;*/
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
{
background:url("img/blue-arrow.png") no-repeat center 0px z-index;
margin:10px auto;
float:left;
display: inline-block;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:center;
padding:10px 5px 10px 5px;
border-left:1px solid #e5edf4;
border-right:1px solid #e5edf4;
border-top:3px solid #004b91;
border-bottom:3px solid #e5edf4;
}
.dropdown_1column {width: 260px;}
.dropdown_2columns {width: 520px;}
.dropdown_3columns {width: 780px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
{
left:-1px;
top:auto;
}
.col_1,
.col_2,
.col_3,
{
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:250px;}
.col_2 {width:500px;}
.col_3 {width:750px;}
有没有 CSS 大师愿意提供一些建议?
最佳答案
在发布的示例中,您可以通过更改来移动框
#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns
{
left: -212px; /*for column 4*/
}
当然,您必须为每个框设置静态宽度并相应地设置它们的样式。
关于css - 居中对齐 <li> 标签内的隐藏 div 用于菜单下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12936184/