Newbie needs help with Navigation Menu

Paddit

05-13-2009, 03:38 PM

Hi All,
I'm new to CSS and have been pulling my hair out trying to get a horizonal drop down menu to work. I'd be very grateful for any help you can give me.
I've attached the html code for a test page I'm working on together with the CSS:

HTML
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>UKGAC</h1>
<h2> </h2>
<h2> </h2>
<h2> </h2>
<h2> </h2>
<h2>United Kingdom global accreditation corporation </h2>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Forms </a>
<li><a href="accreditation.html">Accreditation Info </a></li>
<li><a href="services.html">Services</a></li>
<li><a href="news.html">News & Events</a>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

CSS
/** Common Styles */

body {
margin: 30px 0 20px 0;
padding: 0;
background: #D7D7BD url(images/img01.png) repeat;
text-align: left;
line-height: 20px;
font-family: Tahoma, Arial, Helvetica, sans-serif, calibri;
font-size: 12px;
color: #4C4C4C;
float: right;
}

h1, h2, h3 {
padding: 0;
margin: 0;
color: #FF3232;
}

strong {
color: #000000;
}

p, ul, ol {
margin-bottom: 1.5em;
float: none;
padding-left: 23px;
}

ul {
margin: 0px;
padding: 0;
}

a {
color: #308AC0;
border-bottom: 1px #97C8E5 dotted;
}

a:hover {
text-decoration: none;
color: #005880;
}

/** Style for header starts here */

#header {
width: 800px;
height: 150px;
margin: 0px auto;
background: #FFAC16 url(images/img03.jpg) no-repeat left top;
}

#header h1, #header h2 {
padding: 0;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

#header h1 {
float: left;
padding: 43px 10px 10px 20px;
font-size: 4em;
}

#header h2 {
float: none;

margin:: 1.5em;
padding-left: 23px;
font-size: 20px;

}

/** Style for menu starts here */

#menu {
width: 800px;
height: 50px;
margin: 0px auto;
background: #000000;
}

#menu ul {
margin: 0px;
padding: 0 0 0 20px;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
border: none;
background: url(images/img05.jpg) no-repeat left 55%;
padding: 14px 30px 10px 12px;
text-decoration: none;
color: #FFFFFF;
}

#menu a:hover {
color: #FFFFFF;
font-weight: bold;
}

/** Style for wrapper starts here */

#wrapper {
width: 840px;
margin: 0px auto;
padding: 20px 0;
background: #FFFFFF url(images/img02.jpg) repeat-y left top;
}

The effect I'm trying to achieve is to have sub menus appear below the "services" and "news" top level menus. The sub-menus should just drop down immediately below the top level menus and should be the same (i.e. with the blue bullets against each sub menu).

I'd be eternally grateful for any help you can give me.
Thanks

abduraooft

05-13-2009, 03:42 PM

We need to see your complete code including DOCTYPE. Or a link to your page would be better. btw, http://htmldog.com/articles/suckerfish/dropdowns/ is a good resource to learn the making of drop down menus.

PS: Please use ][/COLOR] tags to wrap your code while posting here. You may edit your above post.

Paddit

05-13-2009, 03:52 PM

Hi sorry here's the code in it's entirety:

HTML

<!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>UKGAC - United Kingdom Global Accreditaion Corporation</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>UKGAC</h1>
<h2> </h2>
<h2> </h2>
<h2> </h2>
<h2> </h2>
<h2>United Kingdom global accreditation corporation </h2>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Forms </a>
<li><a href="accreditation.html">Accreditation Info </a></li>
<li><a href="services.html">Services</a></li>
<li><a href="news.html">News & Events</a>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="right">
<div class="post">
<h2>news & events </h2>
<div align="left"><img style="position:"absolute; WIDTH:145; HEIGHT:212" SRC="images/news.jpg"/>
</div>
<p><strong>News</strong> </p>
<ul>
<li>The Route to Accreditation</li>
<li>Terms & Conditions</li>
</ul>
<p><strong>Forthcoming Events </strong></p>
<ul>
<li>Event 1 </li>
<li>Event 2 </li>
<li>Event 3* </li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="post">
<h2>Other information </h2>
<p>Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Nullam et orci in erat viverra ornare. Nunc pellentesque. </p>
</div>
</div>
<div id="left">
<h2>news & events </h2>
<p> </p>
<p><br />
<a href="#"></a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="footer">
<p class="copyright">Copyright © 2009 UKGAC.com. Site Designed by 58Design </p>
<p class="links"> </p>
</div>
</div>
</body>
</html>

CSS

/** Common Styles */

body {
margin: 30px 0 20px 0;
padding: 0;
background: #D7D7BD url(images/img01.png) repeat;
text-align: left;
line-height: 20px;
font-family: Tahoma, Arial, Helvetica, sans-serif, calibri;
font-size: 12px;
color: #4C4C4C;
float: right;
}

h1, h2, h3 {
padding: 0;
margin: 0;
color: #FF3232;
}

strong {
color: #000000;
}

p, ul, ol {
margin-bottom: 1.5em;
float: none;
padding-left: 23px;
}

ul {
margin: 0px;
padding: 0;
}

a {
color: #308AC0;
border-bottom: 1px #97C8E5 dotted;
}

a:hover {
text-decoration: none;
color: #005880;
}

/** Style for header starts here */

#header {
width: 800px;
height: 150px;
margin: 0px auto;
background: #FFAC16 url(images/img03.jpg) no-repeat left top;
}

#header h1, #header h2 {
padding: 0;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

#header h1 {
float: left;
padding: 43px 10px 10px 20px;
font-size: 4em;
}

#header h2 {
float: none;

margin:: 1.5em;
padding-left: 23px;
font-size: 20px;

}

/** Style for menu starts here */

#menu {
width: 800px;
height: 50px;
margin: 0px auto;
background: #000000;
}

#menu ul {
margin: 0px;
padding: 0 0 0 20px;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
border: none;
background: url(images/img05.jpg) no-repeat left 55%;
padding: 14px 30px 10px 12px;
text-decoration: none;
color: #FFFFFF;
}

#menu a:hover {
color: #FFFFFF;
font-weight: bold;
}

/** Style for wrapper starts here */

#wrapper {
width: 840px;
margin: 0px auto;
padding: 20px 0;
background: #FFFFFF url(images/img02.jpg) repeat-y left top;
}

/** Style for content starts here */

#content {
width: 800px;
margin: 0px auto;
}

#content h2 {
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border-bottom: 1px #CCCCCC dashed;
}

#content p {
top: auto;
}

#content a {
text-decoration: none;
}

#right {
float: right;
width: 480px;
padding: 20px 20px;
}

#right_other {
float: right;
width: 680px;
padding: 20px 20px;
}

#right ul {
margin: 0 3em;
padding: 0;
list-style: none;
}

#right li {
margin-bottom: 8px;
padding-left: 10px;
background: url(images/red_dot.gif) no-repeat 0 7px;
line-height: 17px;
}

#right .post {
}

#left {
float: left;
width: 220px;
padding: 20px 20px;
background-color: #E1EFFF;
}

#left_other {
float: left;
width: 120px;
padding: 20px 20px;
background-color: #E1EFFF;
}

#left ul {
margin: 15px 0 0 0;
padding: 0;
list-style: none;
}

#left li {
padding-left: 10px;
background: url(images/img04.gif) no-repeat left 50%;
}

/** Style for footer starts here */

#footer {
clear: both;
width: 800px;
height: 38px;
margin: 0px auto;
padding-top: 18px;
border-top: 1px solid #444444;
background: #000000;
text-transform: uppercase;
font-size: 10px;
color: #E5E5CC;
}

#footer .copyright {
float: left;
margin: 0px;
padding-left: 20px;
text-align: center;
}

#footer .links {
float: right;
margin: 0px;
padding-right: 20px;
text-align: center;
}

#footer .css {
padding-left: 20px;
background: url(images/image01.png) no-repeat left 50%;
}

#footer .xhtml {
padding-left: 20px;
background: url(images/image02.png) no-repeat left 50%;
}

#footer a {
border-bottom: 1px #E5E5CC dashed;
text-decoration: none;
color: #E5E5CC;
}

Hope someone can help

abduraooft

05-13-2009, 03:59 PM

The effect I'm trying to achieve is to have sub menus appear below the "services" and "news" top level menus. The sub-menus should just drop down immediately below the top level menus and should be the same (i.e. with the blue bullets against each sub menu).
Have you checked the link in my above post?

Paddit

05-13-2009, 04:05 PM

Hi,
Yes I did. Although I'm still a bit uncertain as to which bits of my code I should be editing.

abduraooft

05-13-2009, 04:10 PM

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Forms </a>
<li><a href="accreditation.html">Accreditation Info </a></li>
<li><a href="services.html">Services</a>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
</ul>
</li>
<li><a href="news.html">News & Events</a>
<ul>
<li><a href="#">Sub 3</a></li>
<li><a href="#">Sub 4</a></li>
</ul>
</li>
<li><a href="contact.html">Contact Us</a></li>
</ul>

Paddit

05-13-2009, 04:26 PM

Hi
Doesn't work. What I get now is all the menus on the top with no menus below. The effect I'm looking for can be found here -

http://sperling.com/examples/menuh/

abduraooft

05-13-2009, 04:33 PM

The effect I'm looking for can be found here -

http://sperling.com/examples/menuh/
The method is also described there.. isn't it? Take some time to read and follow.

Paddit

05-14-2009, 08:00 AM

Yes. I looked at that and tried to apply those changes to my code but still couldnt get it to work. Could the problem be my CSS?

developoor

05-15-2009, 03:04 AM

You can compare code of this menu with yours: pure css horizontal menu (http://www.cafewebmaster.com/web2-style-css-dynamic-menu-arrows-and-background-images).