Nav Menu Problem

Nicholas23

11-15-2012, 03:57 PM

anyone help, i have a horizontal menu the html is:

<div id="navigation">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="aboutus.html">ABOUT US</a></li>
<li><a href="courses.html">COURSES</a></li>
<li>OTHER SERVICES
<ul>
<li><a href="#">SUB MENU 1</a></li>
<li><a href="#">SUB MENU 2</a></li>
</ul>
</li>
<li><a href="gallery">GALLERY</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contactus.html">CONTACT US</a></li>
</ul>

</div>

and the CSS is:

#navigation ul{ padding:20px; background-color:#333; position:absolute;} /*main nav bar*/
#navigation li{ margin-left:30px; float:left;} /* primary links */
#navigation ul li{ font-size:24px; color:#FFF;} /*other services text*/
#navigation a { display:block; color:#FFF;} /* all text excl other services */
#navigation a:hover{ color:#F60;} /* main links hover */
#navigation ul ul{ margin-top:20px; background-color:#666;} /* sub menu */
#navigation ul ul a{ color:#CCC;} /* sub menu links */
#navigation ul ul a:hover{color:#CF0;} /* sub menu hovers */

problem im having is how do i make the sub menu's hidden and appear when i move over "other services"?

thank you
p.s. its a site im building so its not online atm.

Excavator

11-15-2012, 04:34 PM

Hello Nicholas23,
Look at a demo I have of a simple CSS dropdown menu (http://nopeople.com/CSS%20tips/CSS_dropDownMenu-noImages/index.html).

Look at your menu based on that example - <!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>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
#navigation {
width: 1000px;
margin: 50px auto;
padding: 0 0 400px;
background: #ccc;
}
ul {
margin: 0;
padding: 0;
background: #333;
}
ul li {
padding: 0 10px;
display: inline-block;
position: relative;
list-style: none;
font-size: 24px;
color: #fff;
}
ul li a {
display: block;
color: #fff;
text-decoration: none;
}
ul li:hover {color: #cf0;}
ul ul {
position: absolute;
top: 26px;
left: 0;
visibility: hidden;
background: #666666;
}
ul li:hover ul {visibility: visible;}
ul ul a { color: #ccc; }
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="aboutus.html">ABOUT US</a></li>
<li><a href="courses.html">COURSES</a></li>
<li>OTHER SERVICES
<ul>
<li><a href="#">SUB MENU 1</a></li>
<li><a href="#">SUB MENU 2</a></li>
</ul>
</li>
<li><a href="gallery">GALLERY</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contactus.html">CONTACT US</a></li>
</ul>
</div>
</body>
</html>

Nicholas23

11-16-2012, 02:17 PM

thanks thats really helpful, wasnt the way i was thinking but very useful.