html - Sublevels in Drop Down Menu Stack on top of One Another Instead of Displaying Verticly -
recently few months ago had add sublevel functionality drop down menu on 1 of our sites. tactic took before worked 1 column in navigation, asked add sublevel column before didn't work because using relative positioning (see example below):
<style type="text/css"> #div#mycontent { overflow: visible; } #nav ul { font-family: arial, verdana; font-size: 10px; margin: 0; padding: 0; list-style: none; font-weight: bold; } #nav ul li { display: block; float: left; margin: 0;} #nav li ul { display: none; } #nav ul li { display: block; text-decoration: none; color: #3c1c4e; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #f0e8d8; margin-left: 1px; white-space: nowrap; } #nav ul li a:hover { background: #f0e8d8; } #nav li:hover ul { display: block; position: absolute; } #nav li:hover li { float: none; font-size: 11px; } #nav li:hover { background: #f0e8d8; } #nav li:hover li a:hover { background: #fff7e7; } /* sublevels in drop down */ #nav li:hover ul li ul {display: none} #nav li ul li:hover ul { display: block; } #nav li ul li ul li { position: relative; left: 188px; bottom:25px ;padding-left:1px }
so modified sublevels in drop down menu use relative positioning used overlap approach (due way previous coder designed drop down). new code looks 1 below:
#nav li ul li ul li { position: absolute; left: 125px; bottom: 0px; border-style: solid; border-width: 1px; border-color:purple; z-index: 1; } however title indicates li under unordered list stacking on top of 1 another. instead of displaying vertically 1 after other. believe requires me clear float, looks done above. i'm unsure if need redefine float clear in order make sure links in sub list display vertically.
edit:
a thought add html show how i'm trying execute this:
<html> <head> <style type="text/css"> #div#mycontent { overflow: visible; } #nav ul { font-family: arial, verdana; font-size: 10px; margin: 0; padding: 0; list-style: none; font-weight: bold; } #nav ul li { display: block; float: left; margin: 0;} #nav li ul { display: none; } #nav ul li { display: block; text-decoration: none; color: #3c1c4e; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #f0e8d8; margin-left: 1px; white-space: nowrap; } #nav ul li a:hover { background: #f0e8d8; } #nav li:hover ul { display: block; position: absolute; z-index: 0;} #nav li:hover li { float: none; font-size: 11px; } #nav li:hover { background: #f0e8d8; } #nav li:hover li a:hover { background: #fff7e7; } /* sublevels in drop down */ #nav li:hover ul li ul {display: none} #nav li ul li:hover ul { display: block; } #nav li ul li ul li { position: absolute; left: 125px; bottom: 0px; border-style: solid; border-width: 1px; border-color:purple; z-index: 1; } </style> </head> <body> <div id="nav"> <ul id="menu"> <li><a href="#">column 1</a> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> </ul> </li> <li> <a href="#">column 2</a> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> </ul> </li> <li><a href="#">column 3</a><li> </ul> </div> </body> </html>
try these css rules sublevels in drop down:
/* sublevels in drop down */ #nav li:hover ul li ul { display: none } #nav li ul li:hover ul { display: block; position:absolute; top:0; left:100%; } #nav li ul li ul li { position:relative; display: block; float: left; border: 1px solid purple; z-index: 1; }
Comments
Post a Comment