Thanks Nik. I think it's probably just a couple of lines I need to add to the code I already have on the site, but I've hunted everywhere and so far not been able to find something that works.
blessings,
Lynn
Sorry Lynn I should have checked this earlier, I could have saved you a lot of time and bother, here is link to working example I have coded for you, I think this is what you want,
http://tlims.co.uk/revlyn/menu1.html
Let me explain how it works. First you need a seperate container for the navigation, this is given the id of Menu Container, in this case it is a DIV box. I have set the width to 300 pixels. This is important as to how the navigation will be displayed, it needs something to limit its width and so on.
Create your navigation as unordered lists with the UL tag and giving id or class names. Please note that an ID can only be used ONCE ONLY in the html on the page, if you want to use the styling for that item more than once then use CLASS . IN CSS the class is denoted by a . , .class or # for an id, #this_is_id.
Basically you nest your sub menu list after the main top level link in between the <li> </li> tags, and set the CSS not to display this list until its parent menu is hovered on. you can continue to add as many sub menus as you like using this method.
The trick to the effect you want is all in the relationship of using correct display and position properties of the sub menus etc, also not forgetting to remove list styling and all other default margin and border settings which are used by browsers to push the sub lists over.
Anyway Here is the CSS and HTML, i hope you do not have too many problems modifying and incorprating this. I have made a few comments in the CSS so you know what parts do what.
Any questions do not hesitate to ask!
HTML:
<div id="menu_container">
<ul id="main_nav">
<li><a href="#">About Us</a>
<ul class="sub_menu">
<li><a href="#">Background</a></li>
<li><a href="#"> Vision</a></li>
<li><a href="#">Satement of Faith</a><li>
<li><a href="#">Contact Us</a><li>
</ul>
</li>
<li><a href="#">Church</a>
<ul class="sub_menu">
<li><a href="#">Worship</a></li>
<li><a href="#"> Community</a></li>
<li><a href="#">Prayer</a><li>
</ul>
</li>
<li><a href="#">Missions</a>
<ul class="sub_menu">
<li><a href="#">About</a></li>
<li><a href="#">Pastor</a></li>
<li><a href="#">Child</a><li>
</ul>
</li>
</ul>
</div>
The CSS
HTML:
#menu_container {
width: 300px;
}
#main_nav {
display: block;
font-size: 0.9em;
list-style: none outside none;
margin: 0;
padding-left: 0;
}
#main_nav li{
width : 100%;
}
/* first navigation menu level styling */
#main_nav li a {
background: none repeat scroll 0 0 #F6ECCA;
border-bottom: 1px solid #FFFFFF;
border-left: 4px solid #EEDA9C;
border-top: 1px solid #FFFFFF;
color: #172F41;
display: block;
padding: 2px;
text-decoration: none;
width: 138px;
}
#main_nav li a:link {
background: none repeat scroll 0 0 #F6ECCA;
color: #172F41;
text-decoration: none;
width: 138px;
}
#main_nav li a:visited {
background: none repeat scroll 0 0 #F6ECCA;
color: #172F41;
text-decoration: none;
}
#main_nav li a:hover {
background: none repeat scroll 0 0 #EDC751;
border-left: 4px solid #9B8339;
color: #172F41;
text-decoration: none;
}
/*END First Layer Nav Style */
/*this bit hides the sub menu lists */
ul#main_nav li ul {
display: none;
margin : 0px;
padding : 0px;
}
/* this displays the sub lists when its parent is hovered on */
ul#main_nav li:hover ul {
display: block;
list-style: none;
position: relative;
margin : none;
padding: 0px;
/*SUb Menu Styling */
}#main_nav li ul li a {
background: none repeat scroll 0 0 #773c00;
border-bottom: 1px solid #FFFFFF;
border-left: 4px solid #EEDA9C;
border-top: 1px solid #FFFFFF;
color: #172F41;
display: block;
padding: 2px;
text-decoration: none;
width: 138px;
}
#main_nav li ul li a:link {
background: none repeat scroll 0 0 #dd4800;
color: #172F41;
text-decoration: none;
width: 138px;
}
#main_nav li ul li a:visited {
background: none repeat scroll 0 0 #dd4800;
color: #172F41;
text-decoration: none;
}
#main_nav li ul li a:hover {
background: none repeat scroll 0 0 #773c00;
border-left: 4px solid #9B8339;
color: #172F41;
text-decoration: none;
}