logo标签列表

在菜单下拉列表中居中隐藏的<div>标签，使其在<li>标签内对齐

css
3

我有一个基于这个的横向菜单，它是纯CSS和HTML编写的。我正在尝试将每个顶级菜单项下拉菜单的div居中对齐，但是我很难使其正常工作。它目前是右对齐的，当我更改子元素为"relative"定位时，任何更改都会矫正父/子元素的对齐方式，但是由于子元素占用了项目之间的空间，因此会扰乱顶级项目。

以下是一个项目的代码，接下来是相关的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大师能提供一些建议？

1个回答
0
在所发布的示例中，您可以通过更改代码来移动方框。
#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！ - bridgemanusa
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接