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.

Look at your menu based on that example -

Code:

<!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>
    <!--end navigation--></div>
</body>
</html>

Nicholas23 · 11-16-2012, 02:17 PM

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