Question

我有一个基于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专家都会发送一些建议吗？

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

当然，每个盒子都必须有一个静态宽度，并相应地设置它们的样式。

在<li>标签中居中对齐隐藏的div以进行菜单下拉</li>

1 个答案: