/ Published in: CSS
Stylesheet for Cascading Menu. Fixed width.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* Style Sheet for CasMenu.html */ *{ margin:0;padding:0;border:0; /* -- reset code -- */ } body { font-family: verdana; background-color: #AABBCC; margin: 2% auto; width: 500px; clear: both; } h2 { color: #EFFCDE; text-align: center; background-color: #111111; border: 2px solid #ABFDBD; border-radius: 5px; margin-bottom: 50px; } /* Menu-behaviour styling */ ul { list-style-type: none; } ul#navmenu li { width:100px; text-align: center; position:relative; float: left; } ul#navmenu a { text-decoration: none; display: block; height: 30px; line-height: 30px; background-color: #FFF; border: 1px solid #000; border-radius: 6px; } ul#navmenu .sublvl1 a{ margin-top: 5px; } ul#navmenu .sublvl2 a{ margin-left: 5px; margin-right: -5px; } ul#navmenu li:hover > a { background-color: #CFC; } ul#navmenu li:hover > a:hover { background-color: #CC0; } ul#navmenu ul.sublvl1 { display: none; position: relative; } ul#navmenu ul.sublvl2 { display: none; position: absolute; top: 0; left: 100px; } ul#navmenu li:hover .sublvl1 { display: block; } ul#navmenu .sublvl1 li:hover .sublvl2 { display: block; }