/ Published in: CSS
A working HTML/CSS dropdown (flyout) menu.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<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>