Posted By

zvineyard on 10/10/11

Tagged

css
dropdown

Versions (?)

Last Edited at 10/10/11 02:11pm

Statistics

Viewed 787 times

Favorited by 0 user(s)

Related snippets

CSS Dropdown Menu

/ Published in: CSS

A working HTML/CSS dropdown (flyout) menu.

Highlighted TextExpand

.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>

Report this snippet Tweet