下拉菜单 css 定位/自定义

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