horizontal inline sub-menu problem

Audiotech · 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 */
}

rajivgonsalves · 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>

rajivgonsalves · 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>

Audiotech · 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

rajivgonsalves · 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

rajivgonsalves · 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>

Audiotech · 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

Audiotech · 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;
}

Sign In

horizontal inline sub-menu problem

Recommended Posts

Audiotech

Link to comment

Share on other sites

rajivgonsalves

Link to comment

Share on other sites

rajivgonsalves

Link to comment

Share on other sites

Audiotech

Link to comment

Share on other sites

rajivgonsalves

Link to comment

Share on other sites

rajivgonsalves

Link to comment

Share on other sites

Audiotech

Link to comment

Share on other sites

Audiotech

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information