Menu with 3 rows

lowanda · 02-01-2013, 03:04 PM

Hi all,
I am new to the forum and not very competent in programming.

I would like to ask your help for something I cannot implement: I have the following javascript code for my menu.

Code:

<style type="text/css"> 
body {
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
.container {
   float:left;
   width:100%;
   background:url(IMG/topnav2.jpg);
   margin: 0 auto;
}
ul#topnav {
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
ul#topnav li {
   display:block;
   float:left;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
   border-right: 1px solid #555;
}
ul#topnav li a {
   display:block;
   padding: 8px 16px;
   color:#f0f0f0;
   text-decoration:none;
}
ul#topnav li:hover {background::url(IMG/topnav1.jpg);}
ul#topnav li span {
	float: left;
	padding: 8px 0;
	position:fixed;
	left: 0; top:29px;
	display: none;
	width: 100%;
	background:url(IMG/topnav180.jpg);
	border-bottom: 1px solid #69430F;
	color: #fff;
}

ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration:underline;}

</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
	
$("ul#topnav li").hover(function() { //Hover over event on list item
	$(this).css({ 'background' : ' url(IMG/topnav1.jpg) repeat-x'}); //Add background color + image on hovered list item
	$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
	$(this).css({ 'background' : 'none'}); //Ditch the background
	$(this).find("span").hide(); //Hide the subnav
});
	
});

</script>

Then there is the code in the <body> section:

Code:

<div class="container">	
    <ul id="topnav"> 
        <li><a href="home.html" target="_top">HOME</a></li> 
        <li> 
            <a href="company.html" target="_top">ABOUT THE COMPANY</a> 
            <span> 
                <a href="history.html" target="_top">HISTORY</a> |
                <a href="mission.html" target="_top">MISSION - OBJECTIVES</a>  
            </span> 
</li> 
        <li> 
            <a href="products.html" target="_top">PRODUCTS</a> 
            <span> 
                <a href="PRODUCT1.html" target="_top">PRODUCT1</a> |
                <a href="PRODUCT2.html" target="_top">PRODUCT2</a> 
             
            </span>
    </li> 
    </ul> 
	
</div>

So far it works great.

Now I want to add a submenu under the "PRODUCT1", this means a third line of menu, where I can list SUB-PRODUCT1, ........

Can you help me with the code?
Thank you very much.
Best Regards
L.

sunfighter · 02-03-2013, 06:58 PM

Most dropdown menus are done in css with minimal js. Look at this page for instructions
http://www.htmldog.com/articles/suckerfish/dropdowns/
And look here for demo of three tiered menu
http://www.htmldog.com/articles/suck...le/bones3.html

You can style the way you want so don't judge on how it looks.

lowanda · 02-06-2013, 12:48 PM

Well thank you very much for the links!
I will work on it.
Br
L.

lowanda · 02-06-2013, 02:13 PM

Unfortunately I cannot understand how to change the code in order to obtain the third line menu.

Can you help me out a little bit, because I can't understand where I have the <span> tag, which defines the 2nd line menu, what is the tag I should add for the 3rd line? <span li>? I really don't understand. Unfortunately I am not familiar with this kind of stuff.

I need a little advice...
Thank you
br
L.