Hi all, Was hoping someone could help me out with this problem.

I'm not sure why i keep having issues with this, but im think its a CSS issue, was hoping someone could have a look and let me know what they think.

i have the following HTML, and im trying to create a drop down menu:

Code:
 <div id="headerLinks">
            <div id="menu_bar_main">
                <div class="menu_bar">
                    <ul>
                        <li id="stores_btn" class="menu_list">
                            <a href=""> Stores
                            </a>
                            <div id="stores_box">
                                 <ul>
                                    <li><a href="<%=Application("DEFAULT_URL") %>/stores/StoreExpertCalendar" title="Store Expert planner">Store Expert</a></li>
                                    <li><a href="<%=Application("DEFAULT_URL") %>/stores/visits" title="Store Visit Feedback">Visits</a></li>
                                    <li><a href="<%=Application("DEFAULT_URL") %>/stores/SalesDrivers" title="Store Sales Drivers">Sales Drivers</a></li>
                                    
                                </ul> 
                            </div>
                           
                        </li>  
                        
                        <li id="admin_btn" class="menu_list">
                        <a href="">Admin</a>
                            <div>
                                <ul>
                                    <li><a href="<%=Application("DEFAULT_URL") %>/admin/Stores" title="manage stores">Stores</a></li>
                                    <li><a href="<%=Application("DEFAULT_URL") %>/admin/Visits" title="manage visit reporting">Visits</a></li>
                                    <li><a href="<%=Application("DEFAULT_URL") %>/admin/sendMessage" title="send message">Send Message</a> </li>
                                    <li><a href="<%=Application("DEFAULT_URL") %>/admin/announcements" title="send message">Announcements</a></li>
                                </ul>
                            </div>
                        </li>      
                        
                        <li id="operations_btn" class="menu_list">
                        <a href="">Operations</a>
                            <div>
                                <ul>
                                    <li><a href="<%=Application("DEFAULT_URL") %>/holidays" title="go to holiday planner">holidays</a></li>
                                </ul>
                            </div>
                        </li>
                        
                        <li id="communique_btn" class="menu_list"><a href="">Communiqué</a>
                           <div>
                                <ul>
                                    <li><a>Announcements</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
The CSS im using is this:
Code:
#stores_btn{width:5em;}
#admin_btn{width:5em;}
#operations_btn {width:7em;}
#communique_btn {width:9em;}

.menu_bar a, .menu_bar a:visited{color:#fff;font-size:1em; line-height:2.3em;display:block; text-decoration:none;}
.menu_bar ul div {height:0; width:10em; visibility:hidden;}
.menu_bar ul div ul{ background:#222223; float:left;height:auto;margin:0;position:relative;visibility:hidden; }
.menu_bar ul div ul li{background:#222223 none repeat scroll 0 0;line-height:1em;width:10em;}

.menu_bar a:hover {color:yellow; background:#333;}
.menu_bar :hover > a, .menu_bar a:hover {background:#333;}

.menu_bar ul li:hover ul, .menu_bar ul a:hover ul, .menu_bar ul a:hover div ul{visibility:visible;}
The issue im having is when i hover over the drop down menu itself, it displays on the screen, but i want it to display only when you hover over the main list, for example "stores".

Any help would be great. I think its a CSS issues, though i could be wrong.

Regards
MG