Css - Navigation menu <Ul> - Sub Menus

[Sean Hall]

Hello,
I am currently developing a site and I am trying to get into more css coding, I have go the basic css for the navigation done. Although what I want to do now is Make sub menus, so when you roll over one of the buttons. The menus appear.

Here's my current Css:

/*Naviagtion Bar Css */
ul {
    margin: 0;
    padding: 0;
	list-style:none;
}
li {
padding-top:5px;
color: #FFF;
width:120px;
float: left;
margin: 0;
padding: 0;
}
li a {
    display: block;
    width: 120px;
    height: 30px;
	padding-top:20px;
}
#homepage a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#homepage_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#homepage a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}
 
#guide a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#guide_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#guide a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}
 
#blog a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#blog_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#blog a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}
 
#media a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#media_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#media a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}
 
#forum a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#forum_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#forum a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}
#navbar {
	position:relative;
	top:5px;
	float:left;
	margin-top:30px;
	margin-left:45px;
	width:600px;
	height: 50px;
	z-index:-1;
}

Html Code:
<div id="navbar" style="display: inline-block;">
<ul>
<li id="homepage_current"><a><strong>Home</strong></a></li>
<li id="guide"><a><strong>Guide</strong></a>
<ul>
<li> Sub Menu 1 </li>
<li> Sub Menu 2 </li>
<li> Sub Menu 3 </li>
</ul></li>
<li id="blog"><a><strong>Blog</strong></a></li>
<li id="media"><a><strong>Media</strong></a></li>
<li id="forum"><a><strong>Forums</strong></a></li>
</ul>
</div>

Any help would be appreciated. Here's a link to the page.

[Williamsun]

It looks like you kind of have something working.

Sub-menus can be a little complicated. I'll try to give you the short version, and you can fill in the blanks with your own styles.
<div id="navigation">
<ul>
<li><a href="#">blah</a></li>
<li><a href="#">blah blah</a></li>
<li><a href="#">sub menu here</a>
<ul class="drop-down">
<li><a href="#">sub-menu item</a></li>
<li><a href="#">sub-menu item 2</a></li>
</ul>
</li>
<li>......</li>

Define the background or not, background color, float:left of sub-menu items, padding, etc., in your css file.

Sample CSS
ul#navigation ul.drop-down {
position:absolute;
top:40px; /*how far away from the top menu*/
margin:0;
padding:12px 10px 8px 10px;
width:230px;
background-color:#161616;
}
ul#navigation ul.drop-down li {
margin:0;
list-style:none;
display:inline;
}
ul#navigation ul.drop-down a {
position:relative;
list-style:none;
display:inline;
float:none;
border:none;
padding:6px 0px 8px 0px;
background:none;
font:12px Verdana, Copse, arial, serif;
line-height:1.6em;
color:#fff;
/*border-top:2px solid #000;*/
text-transform:none;
}

This is nowhere near complete, I'm just trying to give you the idea. Notice the </li> of the menu item with the drop down menu is placed below the second ul li items.

Hope this helps a little.