下拉菜单css定位/自定义

Question

我试图做一个下拉栏，它看起来像左侧什么，它有类别。我试图让字框和下拉框连接起来，例如在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 */ 
}