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.