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>