下拉菜單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 */ 
}