0

カテゴリがある左側のhttp://www.ebay.comのwhats のように見えるドロップダウン バーを作成しようとしています。eBayなどでワードボックスとドロップボックスをつなげようとしています。

私がそれをやろうとすると、同じように見えるように正しく配置することはできません. 私の試みは次のようになりました: http://jsfiddle.net/ctjNq/

<ul id="cat_menu">
        <li><a href="#">First</a>
            <div class="dropdown_2columns">
            <p>Drop down Content</p>
            </div>
        </li>
        <li><a href="#">Second</a>

        </li>
        <li><a href="#">Third</a>

        </li>
        <li><a href="#">Fourth</a>

        </li>
        <li><a href="#">Fifth</a>

        </li>
        <li><a href="#">Sixth</a>

        </li>
    </ul>

CSS:

#cat_menu {  
list-style:none;  
width:60px;  
margin-top:5px ;  
height:900px;  
padding:0px 20px 0px 20px;  

-moz-border-radius: 10px  
-webkit-border-radius: 10px;  
border-radius: 10px;

-moz-box-shadow:inset 0px 0px 1px #edf9ff;  
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;  
box-shadow:inset 0px 0px 1px #edf9ff; 
}  

#cat_menu li {  
float: left;  
display:block;   
postition: relative;  
padding: 4px 10px 4px 10px;    
margin-top:7px;  
border:none;  
}

すべての CSS は jsfiddle にあります。

ワード ボックスとドロップ ボックスを接続して 1 つに見せる方法はありますか?

みんな、ありがとう！

4

1 に答える 1

0

これを試して

http://jsfiddle.net/ctjNq/9/

.dropdown_1column,   
.dropdown_2columns,   
.dropdown_3columns,   
.dropdown_4columns,  
.dropdown_5columns {  
    margin:4px auto;  
    position:absolute;  
    left:-999em; /* Hides the drop down */  
    text-align:left;  
    padding:10px 5px 10px 5px;    
     margin-top: -24px ;
    float:left;
    /* Gradient background */  
    background:#A0A0A4;  
    /* Rounded Corners */   
}
于 2013-06-29T05:11:47.323 に答える