<li> 标签中的隐藏 div 居中对齐菜单下拉菜单答案

【问题标题】：Center align hidden divs within <li> tags for menu dropdown<li> 标签中的隐藏 div 居中对齐菜单下拉菜单
【发布时间】：2012-10-17 22:16:14
【问题描述】：

我有一个基于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 大师愿意提供一些建议？

【问题讨论】：

标签： css

【解决方案1】：

在发布的示例中，您可以通过更改来移动框

#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*/
}

当然，您必须为每个框设置一个静态宽度并相应地设置它们的样式。

【讨论】：

超级有帮助！谢谢twodayslate！