html - Submenu Positioning -
(i have since updated code reflect working code. code below works now)
ive been working on trying position submenu. record, have done homework on lastly week trying create work think messing somewhere parent/child relationships.
what trying place menu in column on page, then, when hovering, have submenu appear right hand side. problem menu appears when resize page, submenu jumps on place. looks relative , absolute positions problems cant see where
here css code:
#col1 { background-color:#000033; width:15%; height:100%; float:left; color:#fff000; font-family: bold; font-size: 100%; } ul.nav li { position:relative; float:left; width:100%; } ul.nav { display: block; background-color:#b2b2d9; margin-right:3%; margin-bottom:1%; margin-left:1%; text-decoration:none; border-top-color:#ffffff; border-right-color:#e6e6e6; border-bottom-color:#ffffff; border-left-color:#e6e6e6; border-top-width: 3%; border-right-width: 3%; border-bottom-width: 3%; border-left-width: 3%; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; padding: 2%; } ul.nav { position:relative; list-style-type: none; padding-left:0px; line-height:1.5em; } ul.nav2 { display: block; background-color:#000033; border:solid 3px black; padding:5%; margin-right:0px; margin-bottom:0%; margin-left:0%; text-decoration:none; color:white; border-top-color:#ffffff; border-right-color:#e6e6e6; border-bottom-color:#ffffff; border-left-color:#e6e6e6; } ul.nav2 { position:absolute; top:0; left:100%; display:none; font-size:100%; list-style-type: none; width:8em; line-height:1.5em; float: none; clear: none; margin: 0px; } ul.nav2 li { display:block; margin-left:-2.8em; width:100%; line-height:1.3em; } here html , javascript:
<script> $(document).ready(function () { $('.nav').hover(function (e) { $('.nav2').slidedown('normal'); }, function () { $('.nav2').slideup('normal'); }); }); </script> </head> <body> <div id="banner"> <img src="images/banner.jpg" width="100%" alt="banner" /> </div> <div id="wrapper"> <div id="col1"> <ul class="nav"> <li><a href="http://www.ahome.com">home</a></li> <li><a href="http://www.ab.com">about</a></li> <ul class="nav2"> <li><a href="http://www.albio.com">bio</a></li> <li><a href="http://www.acred.com">credentials</a></li> <li><a href="http://www.aled.com">education</a></li> </ul> <li><a href="http://www.anew.com">new listings</a></li> <li><a href="http://www.afeat.com">featured home</a></li> <li><a href="http://www.atow.com">town facts</a></li> <li><a href="http://www.acme.com">contact me</a></li> </ul> </div> <div id="main"> "lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt </div> </div> </body> </html> as can see, menu problem. can me pointed in right direction?
you might need way. if able alter html , tweak css little, can accomplish this.
html<ul class="nav"> <li> <a href="#">menu 1</a> <ul> <li><a href="#">sub menu item</a></li> <li><a href="#">sub menu item</a></li> <li><a href="#">sub menu item</a></li> </ul> </li> <li> <a href="#">menu 2</a> <ul> <li><a href="#">sub menu item</a></li> <li><a href="#">sub menu item</a></li> <li><a href="#">sub menu item</a></li> </ul> </li> <li> <a href="#">menu 3</a> <ul> <li><a href="#">sub menu item</a></li> <li><a href="#">sub menu item</a></li> <li><a href="#">sub menu item</a></li> </ul> </li> </ul> css * {font-family: "segoe ui", tahoma;} ul.nav {border-bottom: 1px solid #999;} ul.nav li {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;} ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;} ul.nav li a:hover {background: #ccc; border: 1px solid #999;} ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;} ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;} ul.nav > li:hover ul {display: block;} ul.nav > li ul li {display: block;} /* vertical menu */ ul.nav > li ul li {display: inline-block;} /* horizontal menu */ fiddle: http://jsfiddle.net/vmuxa/ (vertical menu) http://jsfiddle.net/vmuxa/1/ (horizontal menu) html css submenu
No comments:
Post a Comment