Is there an easy way or should I say, easy to understand way to produce drop down menus? I have a link that works fine, but to continue on you have to keep hitting “more articles”. I would like to be able to have the viewer click on articles,and then see the names of the articles from a drop down menu.
Hi Barnum,
The basic structure for dropdowns is fairly simple. They can be intimidating at first and things can get complicated when the sublists nest into several levels.
Here is a very basic single level dropdown. For the sake of keeping it simple I will exclude support for IE6 in the code below. IE6 does not support pseduo :hover on anything except anchors so it needs a little help from js for li:hover. More info on that can be found at the [URL=“http://htmldog.com/articles/suckerfish/dropdowns/”]Suckerfish Article.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple Dropdown Nav</title>
<style type="text/css">
#nav, #nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
position:relative;/* set containing block for AP sub ul */
float:left;
background:#999;
text-align:center;
}
#nav li:hover {
background:#777;
}
#nav a {
float:left;
width:180px;
height:2em;
line-height:2em;
color:#000;
text-decoration:none;
}
/* ------ Sub UL Drop Down ------ */
#nav ul {
position:absolute;
width:180px;
left:0;
top:100%;
margin-left:-999em;/* hide the sub ul */
}
#nav li:hover ul {
margin-left:0;/* reveal the sub ul on li:hover */
}
</style>
</head>
<body>
<h2>Simple Dropdown Nav</h2>
<ul id="nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2 »</a>
<ul>
<li><a href="#">Drop1</a></li>
<li><a href="#">Drop2</a></li>
<li><a href="#">Drop3</a></li>
</ul>
</li>
<li><a href="#">Link3</a></li>
</ul>
</body>
</html>
Not sure I explained myself correctly. I have a link named “Articles” I would like to have the visitor click on that link and see a list of the artciles so that he or she can click on the one they want to read. I come with a list when I try the above.
I have a link named “Articles” I would like to have the visitor click on that link and see a list of the artciles so that he or she can click on the one they want to read.
Hi,
Yes that is what would happen if you clicked on the list item with the nested ul.
Here is a live version of the code I posted above.
Simple Dropdown Nav
Here is a slightly more complicated version that styles the first and second level links differently.
(I named the dropdown list as “articles”)
Simple Dropdown Nav-2
I come with a list when I try the above.
Well, the code above styles the list items in a ul with the ID as #nav.
<ul id=“nav”>
Does your ul have that same ID ?
We probably need to see your code to be able to help you further. 
Post a link to your page if it is live.
Thank you. Yes your live sample is what I am after. Unfortunately I am a real novice at this. Think I need to sit and look at the code more carefully, especially the styling/CSS.
My website is www.stoutstandards.com, and yes I know
it’s rough and amteurish. All I can say is that it’s far better than earlier
attempts, and hopefully down the road it will get even better. I want to eventually move the links on the first page to the left or right, and have drop
downs for photos and articles.
Thank you for helping…I will work on your code some more, and let you know.
I want to eventually move the links on the first page to the left or right, and have drop downs for photos and articles.
Hi,
I just looked through your code, I see you are using tables for all your links.
Let’s get rid of the table and just set up an unordered list <ul>.
So are you wanting all the links to run down the left or right side of the page as a column?
If so, then you will probably be wanting to use a flyout sub-list rather than a dropdown.
I’ve cleaned your code up and gave it a doctype. This should serve as a starting point for the html but I will help you get the menu the way you want it also. For now I have set it down the left side of the header div.
The code below will produce This Page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta name="keywords" content="Dick Stout, Metal Detecting, FMDAC, Treasure Hunting">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stout Standards</title>
<style type="text/css">
body {
background:#DEB887;
}
#container {
width: 100%;
background:#DEB887;
margin:0 auto;
padding:0;
text-align:left;
}
#header {
min-width:990px;
background:#97694F;
text-align:center;
margin:0;
padding:10px 0;
color:#000;
overflow:hidden;/*contain floats*/
}
#header img {float:left;}
#sidebar {
width: 12em;
font-size: 20px;
}
#MainContent {
background-color: #FFA07A;
margin-left: 5em;
margin-right: 5em;
padding: 10px 20px 0 1em;
}
/*=== Begin Nav Styles ===*/
#nav, #nav ul {
float:left;
width:180px;
margin:0;
padding:0;
list-style:none;
}
#nav li {
position:relative;/* set containing block for AP sub ul */
float:left;
text-align:center;
}
#nav li a {
float:left;
width:180px;
height:2em;
line-height:2em;
text-decoration:underline;
color:#000;
font-weight:bold;
}
#nav li:hover {background:#333;}
#nav li:hover a {color:#FFF}
#nav li:hover li a {background:#CCC; color:#000}
#nav li li:hover a {background:#333; color:#FFF}
/* ------ Sub UL Drop Down ------ */
#nav ul {
float:none;
position:absolute;
width:180px;
left:180px;
top:0;
margin-left:-999em;/* hide the sub ul */
}
#nav li:hover ul {
margin-left:0;/* reveal the sub ul on li:hover */
}
/*=== Begin Footer ===*/
#footer {
width:100%;
clear:both;
}
#footer p {
margin: 0;
padding: 10px 0;
background:#DDD;
text-align:center;
font-size:.8em;
}
.clearfloat {
clear:both;
height:0;
font-size:0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<ul id="nav">
<li><a href="Introduction.html">Introduction</a></li>
<li><a href="Aboutme.html">About Me</a></li>
<li><a href="Research.html">Research</a></li>
<li><a href="equipment.html">Equipment</a></li>
<li><a href="Coinhunting.html">Coinhunting</a></li>
<li><a href="clubs.html">Clubs</a></li>
<li><a href="Photos.html">Photos »</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="Scattershooting.html">Scattershooting</a></li>
<li><a href="Malamute.html">Malamute Saloon</a></li>
<li><a href="goodole.html">Articles »</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="Latest.html">Latest News</a></li>
<li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
</ul>
<img src="images/Stoutstandards3.jpg" width="800" height="600" border="3"/>
</div> <!--end #header-->
<div id="footer">
<p>Copyright © 2010 Dick Stout. All Rights Reserved</p>
</div> <!--end #footer-->
</div> <!--end #container-->
</body>
</html>
Wow, thanks very, very much for taking the time to redo the page. I love the changes for sure, and it’s exactly what I am lookiing for. I would like to get the photo centered more so that when I click on the menu the flyouts don’t end up in the photo, but I will figure that one out. Have started making the changes. It’s exactly this type of help that keeps me coming back to Sitepoint, and keeps me learning something new all the time. Have printed out your code on a piece of paper so I can better understand how all this works. Someday I might have a clue. Thanks again…
Another question… Using your great layout I now have the photo centered where I want it, but I am having difficulty moving the text on the left (links)to the right a little. i. e., want the text centered in the brown area to the left of img.
I am having difficulty moving the text on the left (links)to the right a little. i. e., want the text centered in the brown area to the left of img.
I will need to see your code in order to see what you have done. I just checked the link you gave previously and nothing has changed there so I assume you are building the page on your local machine.
Either post your code (html & css) here or set up a live test page and post the link.
It would be best to go ahead and set up a live test page if you are not ready to replace the homepage yet. That way I can keep track of your changes without requesting your code repeatedly should other problems arise.
We’ll go from there. 
This looks fair no my wife’s 17 inch monitor, but on my 22 inch the menu (links) are much to far to the left.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
<meta name=“keywords” content=“Dick Stout, Metal Detecting, FMDAC, Treasure Hunting”>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Stout Standards</title>
<link rel=“stylesheet” href=“styles.css” type=“text/css”/>
<style type=“text/css”>
body {
background:#DEB887;
}
#container {
width: 100%;
background:#DEB887;
margin:0 auto;
padding:0;
text-align: left;
}
#header {
min-width:990px;
background:#97694F;
text-align:center;
margin: 0;
padding:80px 0;
color:#000;
overflow:hidden;/contain floats/
}
#header img {float: center;}
#sidebar {
width: 12em;
font-size: 40px;
}
#MainContent {
background-color: #FFA07A;
margin-left: 5em;
margin-right: 5em;
padding: 10px 20px 0 1em;
}
/=== Begin Nav Styles ===/
#nav, #nav ul {
float: left;
width:180px;
margin:0;
padding:0;
list-style:none;
}
#nav li {
position:relative;/* set containing block for AP sub ul */
float: left;
text-align:center;
}
#nav li a {
float: left;
width: 180px;
height:3em;
line-height:2em;
text-decoration:underline;
color:#000;
font-weight:bold;
}
#nav li:hover {background:#333;}
#nav li:hover a {color:#FFF}
#nav li:hover li a {background:#CCC; color:#000}
#nav li li:hover a {background:#333; color:#FFF}
/* ------ Sub UL Drop Down ------ /
#nav ul {
float:none;
position:absolute;
width:180px;
left:180px;
top:0;
margin-left:-999em;/ hide the sub ul /
}
#nav li:hover ul {
margin-left:0;/ reveal the sub ul on li:hover */
}
/=== Begin Footer ===/
#footer {
width:100%;
clear:both;
}
#footer p {
margin: 0;
padding: 10px 0;
background:#DDD;
text-align:center;
font-size: 1em;
}
.clearfloat {
clear:both;
height:0;
font-size:0;
}
</style>
</head>
<body>
<div id=“container”>
<div id=“header”>
<ul id=“nav”>
<li><a href=“Introduction.html”>Introduction</a></li>
<li><a href=“Aboutme.html”>About Me</a></li>
<li><a href=“Research.html”>Research</a></li>
<li><a href=“equipment.html”>Equipment</a></li>
<li><a href=“Coinhunting.html”>Coinhunting</a></li>
<li><a href=“clubs.html”>Clubs</a></li>
<li><a href=“Photos.html”>Photos »</a>
<ul>
<li><a href=“Photos.html”>Photos 1</a></li>
<li><a href=“Photos2.html”>Photos 2</a></li>
<li><a href=“Photos3.html”>Photos 3</a></li>
</ul>
</li>
<li><a href=“Scattershooting.html”>Scattershooting</a></li>
<li><a href=“Malamute.html”>Malamute Saloon</a></li>
<li><a href=“goodole.html”>Articles »</a>
<ul>
<li><a href=“Goodole.html”>The Goodole days</a></li>
<li><a href=“#”>Link 2</a></li>
<li><a href=“#”>Link 3</a></li>
</ul>
</li>
<li><a href=“Latest.html”>Latest News</a></li>
<li><a href=“http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1”>Guest Book</a></li>
</ul>
<img src=“images/Stoutstandards3.jpg” width=“800” height=“600” border=“3”/>
</div> <!–end #header–>
<div id=“footer”>
<p>Copyright © 2010 Dick Stout. All Rights Reserved</p>
</div> <!–end #footer–>
</div> <!–end #container–>
</body>
</html>
i. e., want the text centered in the brown area to the left of img.
This looks fair no my wife’s 17 inch monitor, but on my 22 inch the menu (links) are much to far to the left.
The problem is that you have a fluid width header and the image is centered by the text-align:center on the header styles.
By the way that float:center; on the image is not a valid value. Floats can only be left, right, or none. It is ignoring the center value and defaulting back to an inline element (images are inline elements by default). Then the text-align:center is centering the image as I just mentioned.
The brown space to the left of the image is being determined by the viewers monitor size and settings. The only way to make it the same (or close) for all viewers is to set a fixed width on the header.
I would then move the header BG color to the #container div to give it that full width appearance.
I have set up some test BG colors on the left nav and the header div so you can see what is going on after I set a fixed width on the header. I also floated the header image right and changed the nav width to 200px. I commented some of the changes in the css.
This should help you see what is going on and you can remove the test BG colors when your done.
I’ll check back later this evening to see how you get along with it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta name="keywords" content="Dick Stout, Metal Detecting, FMDAC, Treasure Hunting">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stout Standards</title>
<link rel="stylesheet" href="styles.css" type="text/css"/>
<style type="text/css">
body {
background:#DEB887;
}
#container {
width: 100%;
background:#97694F;/*this was the header BG color*/
margin:0 auto;
padding:0;
text-align: left;
}
#header {
width:1012px;/*was min-width:990px;*/
background:lime;/*for testing only, remove when done*/
text-align:center;/*center the header image*/
margin:0 auto;/*center it up in the container div*/
padding:80px 6px;
color:#000;
overflow:hidden;/*contain floats*/
}
#header img {
float:right;
border:3px solid #000;
}
#sidebar {
width: 12em;
font-size: 40px;
}
#MainContent {
background-color: #FFA07A;
margin-left: 5em;
margin-right: 5em;
padding: 10px 20px 0 1em;
}
/*=== Begin Nav Styles ===*/
#nav, #nav ul {
float: left;
width:200px;
margin:0;
padding:0;
list-style:none;
background:red;/*for testing only, remove when done*/
}
#nav li {
position:relative;/* set containing block for AP sub ul */
float: left;
text-align:center;
}
#nav li a {
float: left;
width: 200px;
height:3em;
line-height:3em;
text-decoration:underline;
color:#000;
font-weight:bold;
}
#nav li:hover {background:#333;}
#nav li:hover a {color:#FFF}
#nav li:hover li a {color:#000}
#nav li li:hover a {color:#FFF}
/* ------ Sub UL Drop Down ------ */
#nav ul {
float:none;
position:absolute;
width:200px;
left:200px;
top:0;
margin-left:-999em;/* hide the sub ul */
background:#CCC;
}
#nav li:hover ul {
margin-left:0;/* reveal the sub ul on li:hover */
}
/*=== Begin Footer ===*/
#footer {
width:100%;
clear:both;
}
#footer p {
margin: 0;
padding: 10px 0;
background:#DDD;
text-align:center;
font-size: 1em;
}
.clearfloat {
clear:both;
height:0;
font-size:0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<ul id="nav">
<li><a href="Introduction.html">Introduction</a></li>
<li><a href="Aboutme.html">About Me</a></li>
<li><a href="Research.html">Research</a></li>
<li><a href="equipment.html">Equipment</a></li>
<li><a href="Coinhunting.html">Coinhunting</a></li>
<li><a href="clubs.html">Clubs</a></li>
<li><a href="Photos.html">Photos »</a>
<ul>
<li><a href="Photos.html">Photos 1</a></li>
<li><a href="Photos2.html">Photos 2</a></li>
<li><a href="Photos3.html">Photos 3</a></li>
</ul>
</li>
<li><a href="Scattershooting.html">Scattershooting</a></li>
<li><a href="Malamute.html">Malamute Saloon</a></li>
<li><a href="goodole.html">Articles »</a>
<ul>
<li><a href="Goodole.html">The Goodole days</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="Latest.html">Latest News</a></li>
<li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
</ul>
<img src="http://www.stoutstandards.com/images/Stoutstandards3.jpg" width="800" height="600"/>
</div> <!--end #header-->
<div id="footer">
<p>Copyright © 2010 Dick Stout. All Rights Reserved</p>
</div> <!--end #footer-->
</div> <!--end #container-->
</body>
</html>
Ray, you da man!! Thank you, thank you. Can I assume that moving the links (text) on the left further left is not possible? I love what you did, and will use it, but would be nice if the wide outs didn’t cut into the photo. Then again I am one ugly guy so maybe that’s a good thing.
Thank you again. Now I have to figure out all the links within the wide outs, and how to make them work. That I can do…just have to pour a glass of red first.
You made my night.
Can I assume that moving the links (text) on the left further left is not possible?
Hi,
If your talking about the text in all the links then sure you can move them left. I had them set to text-align:center; but you can remove that and it will default to text-align:left;
[B]#nav li[/B] {
position:relative;/* set containing block for AP sub ul */
float: left;
[COLOR=Red]/*text-align:center; remove this*/[/COLOR]
}
But that will shove the text all the way to the left, if you want the text off from the left side you will need to set a left padding on the anchor. You will need to remove whatever the padding value is from the total width though since padding adds to the width.
[B]#nav li a[/B] {
float: left;
[COLOR=Blue]width: 180px; [/COLOR][COLOR=Red]/*200px total with padding*/[/COLOR]
[COLOR=Blue]padding-left:20px;[/COLOR]
height:3em;
line-height:3em;
text-decoration:underline;
color:#000;
font-weight:bold;
}
but would be nice if the wide outs didn’t cut into the photo
I would not let it bother you. If you tried to make it so that the flyout sublist did not overlap the image there would be a wide gap there at all times. I don’t think it would be worth the trade off for the space that would be lost in this case since your image is 800px wide.
Ray, my last question for you. God you must be a patient person…
I tried changing things according to your last post, and now the text is back 4on the left side again, and I cannot, for whatever reason, get it back to where it was…centered. I am sending the code once again. Please help me get the text on the left centered, and I will not bother you again.
I have looked at this till I am blue in the face, and I only changed a couple of things…
Thank you…
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
<meta name=“keywords” content=“Dick Stout, Metal Detecting, FMDAC, Treasure Hunting”>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Stout Standards</title>
<link rel=“stylesheet” href=“styles.css” type=“text/css”/>
<style type=“text/css”>
body {
background:#DEB887;
}
#container {
width: 100%;
background:#DEB887;
margin:0 auto;
padding:0;
text-align: left;
}
#header {
min-width:990px;
background:#97694F;
text-align: center;
margin: 0;
padding:80px 0;
color:#000;
overflow:hidden;/contain floats/
}
#header img {float: center;}
#sidebar {
width: 12em;
font-size: 40px;
}
#MainContent {
background-color: #FFA07A;
margin-left: 5em;
margin-right: 5em;
padding: 10px 20px 0 1em;
}
/=== Begin Nav Styles ===/
#nav, #nav ul {
float: left;
width:200px;
margin:0;
padding:0;
list-style:none;
}
#nav li {
position:relative;/* set containing block for AP sub ul */
float: left;
text-align: center;
}
#nav li a {
float: left;
width: 200px;
height:3em;
line-height:2em;
text-decoration:underline;
color:#000;
font-weight:bold;
}
#nav li:hover {background:#333;}
#nav li:hover a {color:#FFF}
#nav li:hover li a {background:#CCC; color:#000}
#nav li li:hover a {background:#333; color:#FFF}
/* ------ Sub UL Drop Down ------ /
#nav ul {
float:none;
position:absolute;
width:200px;
left:200px;
top:0;
margin-left:-999em;/ hide the sub ul /
}
#nav li:hover ul {
margin-left:0;/ reveal the sub ul on li:hover */
}
/=== Begin Footer ===/
#footer {
width:100%;
clear:both;
}
#footer p {
margin: 0;
padding: 10px 0;
background:#DDD;
text-align:center;
font-size: 1em;
}
.clearfloat {
clear:both;
height:0;
font-size:0;
}
</style>
</head>
<body>
<div id=“container”>
<div id=“header”>
<ul id=“nav”>
<li><a href=“Introduction.html”>Introduction</a></li>
<li><a href=“Aboutme.html”>About Me</a></li>
<li><a href=“Photos.html”>Photos »</a>
<ul>
<li><a href="Photos.html">Photos 1</a></li>
<li><a href="Photos2.html">Photos 2</a></li>
<li><a href="Photos3.html">Photos 3</a></li>
<li><a href="Photos4.html">Photos 4</a></li>
<li><a href="Photos5.html">Photos 5</a></li>
<li><a href="Photos6.html">Photos 6</a></li>
<li><a href="Photos7.html">Photos 7</a></li>
<li><a href="Photos8.html">Photos 8</a></li>
<li><a href="Photos9.html">Photos 9</a></li>
<li><a href="Photos10.html">Photos 10</a></li>
<li><a href="Photos11.html">Photos 11</a></li>
</ul>
<li><a href="Research.html">Research</a></li>
<li><a href="equipment.html">Equipment</a></li>
<li><a href="Coinhunting.html">Coinhunting</a></li>
<li><a href="goodole.html">Articles »</a>
<ul>
<li><a href="Goodole.html">The Goodole days</a></li>
<li><a href="TreasureTips.html">Treasure Tips</a></li>
<li><a href="Oldfolks.html">Old Folks, Old Tales</a></li>
<li><a href="Bill.html">Cousin Bill</a></li>
<li><a href="BasicRules.html">Coin Hunting Rules</a></li>
<li><a href="Winter.html">Winter Treasure Hunting</a></li>
<li><a href="Productive.html">Finding Productive Sites</a></li>
<li><a href="Dan.html">Detector Dan</a></li>
</ul>
<li><a href="clubs.html">Clubs</a></li>
</li>
<li><a href="Scattershooting.html">Scattershooting</a></li>
<li><a href="Malamute.html">Malamute Saloon</a></li>
</li>
<li><a href="Latest.html">Latest News</a></li>
<li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
</ul>
<img src="images/Stoutstandards3.jpg" width="800" height="600" border="3"/>
</div> <!--end #header-->
<div id="footer">
<p>Copyright © 2010 Dick Stout. All Rights Reserved</p>
</div> <!--end #footer-->
</div> <!–end #container–>
</body>
</html>
Hi,
You have mixed up the closing list tags that have the nested <ul>s (the flyouts). Although that has nothing to do with centering the text, just letting you know.
Are you not using the code from my post#11 anymore? I see you still have float:center on your header image and you still have a min-width on the header div. I thought we got that sorted out already.
You have some new issues that have come up now that you have added more list items in the sublist and due to the fact that you increased the height of the anchors. Your sublist is being cut off below the header, it is because of the overflow:hidden; i used to contain the header floats. I will need to use the clearfix method now.
Let me know what you are doing with the header width now and I will post the revised corrections for the things I mentioned above.
and I will not bother you again.
Your not bothering me, I’m glad to help out
Ray, gotta turn in now. All I know is that I was relatively happy with your last code post, and when I tried to make the latest changes you suggested it
went awry. Now I cannot get back to the last one I was happy with.
Will play with it tomorrow, and get back to you.
Hi,
I have got it working in IE6/7 now with all of their bugs taken care of. I have also placed all my previous fixes in this revised code and got the text centered.
I have heavily commented the css so you should be able to edit the code to suit your needs. Just study through the code and refer back to this post for a fresh copy of the code if you get in a bind.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta name="keywords" content="Dick Stout, Metal Detecting, FMDAC, Treasure Hunting">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stout Standards</title>
<link rel="stylesheet" href="styles.css" type="text/css"/>
<style type="text/css">
body {
background:#DEB887;
font-size:100%;
margin:0;
padding:0;
}
#container {
width:100%;
min-width:990px;/*keep BG color from stopping short*/
background:#97694F;/*header BG color moved to here*/
}
#header {
width:990px;
text-align:center;
margin:0 auto;/*center it up in the container div*/
padding:80px 0;
color:#000;
}
#header:after { /*contain header floats and allow dropdowns to overflow past header bottom*/
clear:both;
content:"";
display:block;
height:0;
font-size:0;
}
#header img {
float:right;
border:2px solid #000;
}
#sidebar {
width:12em;
font-size:40px;
}
#MainContent {
background:#FFA07A;
margin-left:5em;
margin-right:5em;
padding:10px 20px 0 1em;
}
/*=== Begin Nav Styles ===*/
#nav, #nav ul {
float:left;
width:176px;/*180px total with 2px borders*/
margin:0;
padding:0;
list-style:none;
background:#D2B48C;/*for testing only, remove when done*/
border:2px solid #000;
}
#nav li {
position:relative;/* set containing block for AP sub ul */
float:left;/*kill IE whitespace bug*/
width:176px;
text-align:center;/*center the text*/
}
#nav li a {
display:block;/*use block instead of float for IE6 */
width:100%;/*IE needs a width*/
/*height:3em; remove height to allow text to wrap*/
padding:.65em 0;/*set padding on top and bottom to create more height*/
text-decoration:underline;
color:#000;
font-weight:bold;
font-size:1em;
}
/* --- Text and Bg colors on hover ---*/
#nav li:hover,
#nav li.sfhover {
background:#333;
visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a,
#nav li.sfhover a {color:#FFF}
#nav li:hover li a,
#nav li.sfhover li a {color:#000}
#nav li li:hover a,
#nav li li.sfhover a {background:#333; color:#FFF}
/* ------ Sub UL Drop Down ------ */
#nav ul {
position:absolute;
width:176px;
left:176px;
top:-2px;/*recover top border (use "0" without borders)*/
margin-left:-999em;/* hide the sub ul */
background:#F5DEB3;/* IE needs some sort of BG on the nested ul */
}
#nav li:hover ul,
#nav li.sfhover ul {
margin-left:0;/* reveal the sub ul on li:hover */
}
/*=== Begin Footer ===*/
#footer {
width:100%;
clear:both;
}
#footer p {
margin:0;
padding:10px 0;
background:#DDD;
text-align:center;
font-size:1em;
}
.clearfloat {
clear:both;
height:0;
font-size:0;
}
</style>
<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<ul id="nav">
<li><a href="Introduction.html">Introduction</a></li>
<li><a href="Aboutme.html">About Me</a></li>
<li><a href="Photos.html">Photos »</a>
<ul>
<li><a href="Photos.html">Photos 1</a></li>
<li><a href="Photos2.html">Photos 2</a></li>
<li><a href="Photos3.html">Photos 3</a></li>
<li><a href="Photos4.html">Photos 4</a></li>
<li><a href="Photos5.html">Photos 5</a></li>
<li><a href="Photos6.html">Photos 6</a></li>
<li><a href="Photos7.html">Photos 7</a></li>
<li><a href="Photos8.html">Photos 8</a></li>
<li><a href="Photos9.html">Photos 9</a></li>
<li><a href="Photos10.html">Photos 10</a></li>
<li><a href="Photos11.html">Photos 11</a></li>
</ul>
</li>
<li><a href="Research.html">Research</a></li>
<li><a href="equipment.html">Equipment</a></li>
<li><a href="Coinhunting.html">Coinhunting</a></li>
<li><a href="goodole.html">Articles »</a>
<ul>
<li><a href="Goodole.html">The Goodole days</a></li>
<li><a href="TreasureTips.html">Treasure Tips</a></li>
<li><a href="Oldfolks.html">Old Folks, Old Tales</a></li>
<li><a href="Bill.html">Cousin Bill</a></li>
<li><a href="BasicRules.html">Coin Hunting Rules</a></li>
<li><a href="Winter.html">Winter Treasure Hunting</a></li>
<li><a href="Productive.html">Finding Productive Sites</a></li>
<li><a href="Dan.html">Detector Dan</a></li>
</ul>
</li>
<li><a href="clubs.html">Clubs</a></li>
<li><a href="Scattershooting.html">Scattershooting</a></li>
<li><a href="Malamute.html">Malamute Saloon</a></li>
<li><a href="Latest.html">Latest News</a></li>
<li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
</ul>
<img src="http://www.stoutstandards.com/images/Stoutstandards3.jpg" width="800" height="600" />
</div> <!--end #header-->
<div id="footer">
<p>Copyright © 2010 Dick Stout. All Rights Reserved</p>
</div> <!--end #footer-->
</div> <!--end #container-->
</body>
</html>
Be sure to close the list item with the nested ul properly. It should be done just as I have posted above. You must have the </li> end after the nested ul.
<ul id="nav">
<li><a href="Introduction.html">Introduction</a></li>
<li><a href="Aboutme.html">About Me</a></li>
[SIZE=3][COLOR=Blue][B]<li><a href="Photos.html">Photos »</a>[/B][/COLOR][/SIZE]
[COLOR=Blue]<ul>[/COLOR]
<li><a href="Photos.html">Photos 1</a></li>
<li><a href="Photos2.html">Photos 2</a></li>
<li><a href="Photos3.html">Photos 3</a></li>
<li><a href="Photos4.html">Photos 4</a></li>
<li><a href="Photos5.html">Photos 5</a></li>
<li><a href="Photos6.html">Photos 6</a></li>
<li><a href="Photos7.html">Photos 7</a></li>
<li><a href="Photos8.html">Photos 8</a></li>
<li><a href="Photos9.html">Photos 9</a></li>
<li><a href="Photos10.html">Photos 10</a></li>
<li><a href="Photos11.html">Photos 11</a></li>
[COLOR=Blue]</ul>[/COLOR]
[SIZE=3][COLOR=Blue][B]</li>[/B][/COLOR][/SIZE]
<li><a href="Research.html">Research</a></li>
<li><a href="equipment.html">Equipment</a></li>
<li><a href="Coinhunting.html">Coinhunting</a></li>
Thanks Razur. I have been trying to get a simple drop down menu too and have just cribbed your code as it looks to be exactly what I need. Hope you dont mind
Spent hours with this css tutorial http://ago.tanfa.co.uk/css/examples/css-dropdown-menus.html#ccexp but cant get it to work properly in internet explorer despite copying it to the last letter and having it looking good in all other browsers I’ve tried.