3

純粋な 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 の専門家はいますか?

4

1 に答える 1