Audiotech Posted December 21, 2009 Share Posted December 21, 2009 Hello, this is my first post on what seems like quite a helpful forum. Salutations aside, I'm having problems controlling a horizontal inline drop down sub-menu. What I'm trying to accomplish is to get a sub-menu to appear on menu hover that stretches horizontally across the lower section of the menu bar. I don't know if I have my id's or list orders screwed up somehow but it's giving me fits and I can't seem to solve the problem. I'm pretty green with working on html and css so exhaustive explainations might not be a bad thing. Here's the live site with as much as I have functional at this point.... http://valvetech.byethost14.com/ it's a free hosting site so if there's any malicious that I'm unaware of please accept my appologies. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Carl's dynamic site v1.0</title> <!-- default set of jQuery Tools + jQuery 1.3.2 --> <script src="js/jquery.tools.min.js"></script> <link rel="stylesheet" media="screen" href="stylesheet.css" /> </head> <body> <div id="wrapper"><!-- makes page behave during browswer resize --> <!-- start page content --> <div id="header"><!-- header section including navigation tabs etc starts here. --> <div id="logo"><a href="index.html"><img src="img/logo1.gif" width="318" height="85" /></a></div><!-- logo --> <div id="menu"><!-- start menu --> <ul> <li><a href="index.html" id="active">Home</a></li> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="support.html">Support</a></li> <li><a href="ordering.html">Ordering</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!-- end menu --> <div id="sub-menu">Div id=sub-menu. Products 1 products 2 service 1 service 2 etc</div><!-- sub-menu --> </div><!-- end id=header --> <p>The way Id like the menu to perform is that the main list items as outlined below would be sitting on the menu bar, then have the ordered list as shown below display inline across the division id "sub-menu"</p> <br> <br> <ul> <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a> <ol> <li><a href="#">Fender</a></li> <li><a href="#">Marshall</a></li> <li><a href="#">Peavy</a></li> <li><a href="#">Mesa-Boogie</a></li> </ol> </li> <li><a href="services.html">Services</a> <ol> <li><a href="#">Repairs</a></li> <li><a href="#">Modifications</a></li> <li><a href="#">Lessons</a></li> <li><a href="#">Rentals</a></li> </ol> </li> <li><a href="support.html">Support</a></li> <li><a href="ordering.html">Ordering</a> <ol> <li><a href="#">Inventory</a></li> <li><a href="#">Custom Designs</a></li> </ol> </li> <li><a href="contact.html">Contact</a></li> </ul> </div><!-- end wrapper division --> </body> </html> the css stylesheet... /* Global white space reset */ * {padding:0; margin:0} h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address {margin:0 10px} li, dd {margin-left:15px} fieldset {padding:6px} /* Undo default HTML styling of common browsers */ a:link, a:visited { text-decoration:none; color:#aaa; font-weight:bold } h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, h4 a:link, h4 a:visited { text-decoration:none; color:#1c4851 } ul, ol { list-style:none } img { border:none } /* root element for background and other base formatting */ body { background: #000 url('img/bg_general.gif') no-repeat top center; color:white; text-align:center; margin:0; font:normal 11px/15px verdana,serif } /* wrapper div fir IE and window resize */ #wrapper { width:998px; height:auto; margin:0 auto -95px auto; text-align:left } /* Header */ #header { height:150px } #logo { width:366px; height:85px; padding:20px 0 10px 0; /* first digit adjusts vertical height */ background:url('img/bg_menu_starter.gif') no-repeat top right; float:left; display:inline; position:relative } #sub-menu { width:632px; height:31px; float:right; display:inline; padding:15px 0 0 0; text-align:left; color:white } /* Menu */ #menu { width:632px; /* defines the width of the background image behind the menu buttons */ height:53px; background:url('img/bg_menu.gif') repeat-x top left; float:right; display:inline } #menu ul { padding:20px 0 20px 17px; margin:0 } #menu li { display:inline; list-style:none; margin:0 16px 0 0; /* second digit spacing between menu buttons */ font:bold 13px verdana,serif } #menu ul li a:link, #menu ul li a:visited { padding:5px 7px; color:#000; border:2px solid #003399; background:#fff } #menu ul li a:hover, #menu ul li a #active, #menu ul li a:active { color:#fff; border:2px solid #ff3333; background:#000; text-decoration:none } /* root element for content formatting */ #content { background-color: #282627; background-repeat: no-repeat; border: 2px solid #999; margin: 200px 20px 0px 20px; /* shifts top right bottom left respectively */ padding: 0px; height: auto; color: white; } html>body #content { heigth: auto; /* reinforcement tag for old browsers...I think */ } Quote Link to comment https://forums.phpfreaks.com/topic/185891-horizontal-inline-sub-menu-problem/ Share on other sites More sharing options...
rajivgonsalves Posted December 21, 2009 Share Posted December 21, 2009 it is possible through css however I could not get that to work so I tried with jquery here is a test it should give you a idea <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> $(document).ready( function() { $('ul li').hover(function() { $(this).find('ol').show(); }, function() { $(this).find('ol').hide(); }); }); </script> </HEAD> <BODY> <ul> <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a> <ol style="display:none"> <li><a href="#">Fender</a></li> <li><a href="#">Marshall</a></li> <li><a href="#">Peavy</a></li> <li><a href="#">Mesa-Boogie</a></li> </ol> </li> <li><a href="services.html">Services</a> <ol style="display:none"> <li><a href="#">Repairs</a></li> <li><a href="#">Modifications</a></li> <li><a href="#">Lessons</a></li> <li><a href="#">Rentals</a></li> </ol> </li> <li><a href="support.html">Support</a></li> <li><a href="ordering.html">Ordering</a> <ol style="display:none"> <li><a href="#">Inventory</a></li> <li><a href="#">Custom Designs</a></li> </ol> </li> <li><a href="contact.html">Contact</a></li> </ul> </BODY> </HTML> Quote Link to comment https://forums.phpfreaks.com/topic/185891-horizontal-inline-sub-menu-problem/#findComment-981624 Share on other sites More sharing options...
rajivgonsalves Posted December 21, 2009 Share Posted December 21, 2009 and this is the css version <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE> New Document </TITLE> <style > ul li:hover ol {display:block} ul li ol {display:none} </style> </HEAD> <BODY> <ul> <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a> <ol> <li><a href="#">Fender</a></li> <li><a href="#">Marshall</a></li> <li><a href="#">Peavy</a></li> <li><a href="#">Mesa-Boogie</a></li> </ol> </li> <li><a href="services.html">Services</a> <ol> <li><a href="#">Repairs</a></li> <li><a href="#">Modifications</a></li> <li><a href="#">Lessons</a></li> <li><a href="#">Rentals</a></li> </ol> </li> <li><a href="support.html">Support</a></li> <li><a href="ordering.html">Ordering</a> <ol> <li><a href="#">Inventory</a></li> <li><a href="#">Custom Designs</a></li> </ol> </li> <li><a href="contact.html">Contact</a></li> </ul> </BODY> </HTML> Quote Link to comment https://forums.phpfreaks.com/topic/185891-horizontal-inline-sub-menu-problem/#findComment-981634 Share on other sites More sharing options...
Audiotech Posted December 21, 2009 Author Share Posted December 21, 2009 thanks for a crazy fast reply! Unless I screwed something up which is quite within the realm of possibility, it seems that solution cascades the menu list vertically, then creates another vertical sub-menu that moves out horizontally. What I'm trying to do is, and I hope I'm not doing a poor job of explaining this, is that if I mouse over say "products" it creates a dropdown that spills out horizontally if that makes any sense. Something like this (wow I hate doing things in ASCII) but I don't have any sort of screen shot..... Products | fender marshall peavy Mesa Boogie Or if you want a live example you can always go to http://www.forbes.com to get an idea of where I'm trying to go with this. Thanks soo much in advance! -Carl Quote Link to comment https://forums.phpfreaks.com/topic/185891-horizontal-inline-sub-menu-problem/#findComment-981655 Share on other sites More sharing options...
rajivgonsalves Posted December 21, 2009 Share Posted December 21, 2009 Actually what the code does is only show and hide the ol, the ol can be style to gain that effect you'll just have to style it correctly and the very same code will do the job Quote Link to comment https://forums.phpfreaks.com/topic/185891-horizontal-inline-sub-menu-problem/#findComment-981659 Share on other sites More sharing options...
rajivgonsalves Posted December 21, 2009 Share Posted December 21, 2009 a modification to the previous code this display horizontally <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style > ul li {display:inline} ul li:hover ol {display:block} ul li ol {display:none;float:left;position:absolute} </style> </HEAD> <BODY> <ul> <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a> <ol> <li><a href="#">Fender</a></li> <li><a href="#">Marshall</a></li> <li><a href="#">Peavy</a></li> <li><a href="#">Mesa-Boogie</a></li> </ol> </li> <li><a href="services.html">Services</a> <ol> <li><a href="#">Repairs</a></li> <li><a href="#">Modifications</a></li> <li><a href="#">Lessons</a></li> <li><a href="#">Rentals</a></li> </ol> </li> <li><a href="support.html">Support</a></li> <li><a href="ordering.html">Ordering</a> <ol> <li><a href="#">Inventory</a></li> <li><a href="#">Custom Designs</a></li> </ol> </li> <li><a href="contact.html">Contact</a></li> </ul> </BODY> </HTML> Quote Link to comment https://forums.phpfreaks.com/topic/185891-horizontal-inline-sub-menu-problem/#findComment-981662 Share on other sites More sharing options...
Audiotech Posted December 21, 2009 Author Share Posted December 21, 2009 Alrighty!!!!!!! The basics seem to be working right. I'll play with this and see what I can come up with. Many thanks -Carl Quote Link to comment https://forums.phpfreaks.com/topic/185891-horizontal-inline-sub-menu-problem/#findComment-981680 Share on other sites More sharing options...
Audiotech Posted January 11, 2010 Author Share Posted January 11, 2010 Ok, I'm going to close this out as resolved. But before I do, I thought I'd post the html and css code to show how I managed to get things working properly. I don't really know why or how it works but it does and really that's all that matters so here's the solution and maybe it'll help somebody else out that may have a similar problem. Be well and thanks for having a great forum available! -Carl html <div id="menu"><!-- start menu --> <ul id="navbar"> <li><a href="index.html">Home</a></li> <!-- Menu item 1 --> <li><a href="products.html">Products</a> <!-- Menu item 2 --> <ul> <li><a href="vm452.html">Vintage/Modern 452</a></li> <!-- sub-item 21 --> <li><a href="crossfire.html">Crossfire</a></li> <!-- sub-item 22 --> <li><a href="banshee.html">Banshee 50</a></li> <!-- sub-item 23 --> </ul> </li> <li><a href="services.html">Services</a></li> <!-- Menu item 3 --> <li><a href="ordering.html">Ordering</a> <!-- Menu item 4 --> <ul> <li><a href="#">Inventory</a></li> <!-- sub-item 41 --> <li><a href="#">Custom Shop</a></li> <!-- sub-item 42 --> </ul> </li> <li><a href="support.html">Support</a></li><!-- Menu item 5 --> <li><a href="contact.html">Contact</a></li><!-- Menu item 6 --> </ul> </div><!-- end menu --> css style sheet: /* Menu */ #menu { width: 632px; height: 53px; background: url('img/bg_menu.gif') repeat-x top left; float: right; display: inline; } #navbar { position: absolute; margin: 0; padding: 0; } #navbar li { list-style: none; float: left; } #navbar li a { display: block; margin: 27px 0 0 0; padding: 3px 8px; text-transform: none; text-decoration: none; color: black; /* normal state main list items */ outline: none; font-size: 14px; font-weight: bold; } #navbar li a:hover { color: red; /* over state main list items */ outline: none; } #navbar li ul { display: none; } #navbar li:hover ul, #navbar li.hover ul { position: absolute; display: inline; left: 0; width: 100%; margin: 0; padding: 0 0 75px 0; font-size: 11px; /* normal state of sub-group items */ } #navbar li:hover li, #navbar li.hover li { float: left; } #navbar li:hover li a, #navbar li.hover li a { margin: 15px 0 0 0; color: white; outline: none; } #navbar li li a:hover { color: aqua; /* over state of sub-group items */ font-size: 16px; font-weight: bold; text-transform: uppercase; } Quote Link to comment https://forums.phpfreaks.com/topic/185891-horizontal-inline-sub-menu-problem/#findComment-992671 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.