下拉菜单CSS定位/自定义

Question

I am trying to make a drop down bar that looks like whats on http://www.ebay.com on the left where it has the categories. I am trying to have the word box and the drop box connected such as on ebay.

When I try to do it I can not position it right to make it look the same. My attempt came to be: 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;  
}  

All CSS is in jsfiddle.

Any ideas how I can connect the word box and the drop box to make it look one?

Thanks everyone!

Answer 1

try this

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