* { margin: 0; padding: 0; } body { font: 14px Helvetica, Sans-Serif; } #page-wrap { width: 800px; margin: 25px auto; } a { text-decoration: none; } ul { list-style: none; } p { margin: 15px 0; } /* LEVEL ONE */ ul.dropdown { position: relative; } ul.dropdown li { font-weight: bold; float: left; zoom: 1; background: #ccc; } ul.dropdown a:hover { color: #fff; text-decoration:none } ul.dropdown a:active { color: #fff; } ul.dropdown li a { display: block; padding: 0px 0px; color: #fff; } ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ ul.dropdown li.hover, ul.dropdown li:hover { background: #308CCC; color: #fff; position: relative; } ul.dropdown li.hover a { color: #fff; } /* LEVEL TWO */ ul.dropdown ul { width: 204px; visibility: hidden; position: absolute; top: 100%; left: 0; margin-top:0; margin-left:1px; z-index:2;} ul.dropdown ul li { font-weight: normal; background: #333; color: #fff; border-bottom: 1px dotted #fff; float: none; font-size:1.4em; padding:10px 0;} ul.dropdown ul li.end { border-bottom: none;} /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; } /* LEVEL THREE */ ul.dropdown ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; } .breaktext { word-break: break-all; word-wrap: break-word; }