Question

我正在尝试制作一个下拉栏，看起来像左侧http://www.ebay.com上有类别的内容。我正在尝试将单词框和连接框连接在一起，例如在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。

我有什么想法可以连接单词框和下拉框以使它看起来像一个？

谢谢大家！

Answer 1

试试这个

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

下拉菜单css定位/定制

1 个答案: