Advanced Search

Return to Snippet

Revision: 51990
at October 10, 2011 14:11 by zvineyard
Initial Code 
<style>
.dropdown {
height:40px;
}

.dropdown ul {
list-style-type:none;
margin:0;
padding:0;
}

.dropdown ul li {
display:block;
float:right;
position:relative;
}

.dropdown ul li a {
text-decoration: none;
display:block;
background:#e3e3e3;
border-bottom:1px solid #ccc;
color:#444;
display:block;
float:left;
font-weight:bold;
padding:10px 16px;
padding:11px 16px\9; /* IE9 and below */  
*padding:10px 16px; /* IE7 and below */
}

.dropdown ul li a:hover {
background:#d1e4f8;
color:#000;
text-decoration:none;
}

.dropdown ul li:hover ul.children {
display:block;
position:absolute;
top:36px;
right:0;
}

ul.children {
background:#8f714d;
display:none;
margin:0;
width:184px;
}

ul.children li {
margin:0;
}

ul.children a {
border:none;
width:200px;
}

</style>
<div class="dropdown">
    <ul>
        <li><a href="#">Login</a>
            <ul class="children">
                <li><a href="#">Email</a></li>
                <li><a href="#">Students</a></li>
                <li><a href="#">Staff</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">File Storage</a></li>
            </ul>
        </li>
    </ul>
</div>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
A working HTML/CSS dropdown (flyout) menu.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
CSS Dropdown Menu

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, dropdown

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS