Can someone tell me what I did wrong with this drop down menu?

[dabblingmum]

I am trying to add a drop down menu to site but for some reason I cannot get the drop down menu to appear when hovered over the main tab. I spent all day yesterday and this morning scouring the net to see what I did wrong, but I can't figure it out. I truly do appreciate your time. Thank you.

Here's the info from my CSS page

===

/* Begin eMag Menu Styles */

#menu ul {
	background-color: #d1dab6;
	list-style-type: none;
	font-size: 12px;
	color: #993366;
	width: 100%;
	display: inline-block;
	padding: 3px 2px 3px 2px;
	overflow: hidden;
	float: left;
	margin: 0;
}

#menu ul li {
	display: inline-block;
	float: left;
	position: relative;
	overflow: hidden;
}

#menu ul li a {
	background-color: #d1dab6;
	text-decoration: none;
	text-align: center;
	color: #993366;
	width: 120px;
	display: inline-block;
	padding: 3px 2px 3px 2px;
}

#menu ul li a:hover {
	background-color: #eeeeee;
	color: #666666;
	border-radius: 10px;
	overflow:visible;
}

body#biz a#biznav, 
body#crafts a#craftsnav,
body#editorial a#editorialnav,
body#interview a#interviewnav,
body#living a#livingnav, 
body#reviews a#reviewsnav,
body#writer a#writernav {
	background-color: #eeeeee;
	color: #666666;
	border-radius: 10px;
}

/* End eMag Menu Styles */


/* Begin Drop Down Menu Styles */

.dropdown {
	background-color: #d1dab6;
	position: absolute;
}

.dropdown ul {
	background-color: #d1dab6;
	list-style-type: none;
	font-size: 12px;
	color: #993366;
	width: 100%;
	display: none;
	padding: 0px;
	margin: 0;
	visibility: hidden; 
}

.dropdown ul li {
	background-color: #d1dab6;
	text-decoration: none;
	text-align: left;
	color: #993366;
	float: none;
	display: none;
	padding: 0px;
	margin: 0;
	position: relative;
}

dropdown ul li a {
	background-color: #d1dab6;
	text-decoration: none;
	text-align: left;
	color: #993366;
	width: 120px;
	height: 25px;
	display: none;
	padding: 0px;
	margin: 0;
}

.dropdown ul li a:hover {
	background-color: #eeeeee;
	color: #666666;
	border-radius: 10px;
	visibility: visible; 
}

/* End Drop Down Menu Styles */

===

Here's what I have for Site Navigation

===

<div id="menu">

<center>
<ul>
<li><a id="craftsnav" href="../artsncrafts/index.htm" title="Create arts and crafts projects with your family and friends">Arts/Crafts Tuts</a>
	<ul class="dropdown">
	<li><a href="giftideas/index.htm" id="menu">Budget Friendly Gift Ideas</a></li>
	<li><a href="christmas/index.htm">Christmas Crafts</a></li>
	<li><a href="cincodemayo/index.htm">Cinco de Mayo Crafts</a></li>
	<li><a href="earthday/index.htm">Earth Day Crafts</a></li>
	<li><a href="easter/index.htm">Easter Crafts</a></li>
	<li><a href="embroidery/index.htm">Embroidery Projects</a></li>
	<li><a href="everyday/index.htm">Everyday Crafts</a></li>
	<li><a href="fathersday/index.htm">Father's Day Crafts</a></li>
	<li><a href="halloween/index.htm">Halloween Crafts</a></li>
	<li><a href="mothersday/index.htm">Mother's Day Crafts</a></li>
	<li><a href="papercrafts/index.htm">Paper Crafts</a></li>
	<li><a href="thanksgiving/index.htm">Thanksgiving Day Crafts</a></li>
	<li><a href="valentinesday/index.htm">Valentine's Day Crafts</a></li>
	</ul>
</li>

<li><a id="biznav" href="../business/index.htm" title="Read articles about creating and building a small business">Business Advice</a></li>
<li><a id="livingnav" href="../living/index.htm" title="Discover how you can live life on your own terms and create a life worth living.">Intentional Living</a></li>
<li><a id="interviewnav" href="../interviews/index.htm" title="Read the interviews with authors, actors, musicians, and entreprenuers">Q&amp;A Interviews</a></li>
<li><a id="reviewsnav" href="../reviews/index.htm" title="Get the latest scoop with book, movie, and product reviews">Product Reviews</a></li>
<li><a id="writernav" href="../writing/index.htm" title="Read articles on how to becoming a paid freelance writer">Writing Tips</a></li>
<li><a href="http://alyiceedrich.com" title="Art diary of Alyice Edrich" target="_blank">The Art Diary</a></li>
</ul>
</center>

</div>
<!-- end #menu -->

[PicnicTutorials]

Here try this. Take this code. http://www.visibilityinherit.com/cod...down-demo1.php. There now you have a working drop down. Make another copy of it so your not so afraid to make changes and add your desired style to it. Testing with each change so you make sure you didn't break anything.

[dabblingmum]

Thanks. I'll give it a go. But curious, do you know why the one I created didn't work?

[dabblingmum]

I should mention that I'm asking what isn't working in the code I wrote because I want to understand better how drop down menus work, there's a lot of examples online but no breakdown of why it works. Thanks.

[PicnicTutorials]

Are you hiding it with overflow visible? In that case you need to say it something like this...

li:hover ul {overflow:visible}

[PicnicTutorials]

Your probably better off doing it how I did it. Hide it off screen and then on hover bring it back. That's how it works.

[dabblingmum]

Okay, I am going to give it another go in the morning. I'll let you know if I get it to work. Thanks.

[Paul O'B]

Thanks. I'll give it a go. But curious, do you know why the one I created didn't work?

Hi,

Yes you had a number of problems. First you were hiding the overflow on the main nav so the dropdown wouldn't have shown anyway. You also set the nested ul to visibility:hidden and display:none but you never revealed it. You then also hid the list items with display:none so even if you got the first bit right it still wouldn't have shown

Then you compounded it all by saying .dropdown ul when there is no ul within .dropdown. It should have been ul.dropdown {} so you missed styling all the elements in the dropdown. However even if you got that right the rules would still have suffered because you addressed the top part of the menu using #menu ul and as ids carry more weight the ul.dropdown rules would again have been over-ridden.

Here is your code put into working order:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
/* Begin eMag Menu Styles */

#menu ul {
	background-color: #d1dab6;
	list-style-type: none;
	font-size: 12px;
	color: #993366;
	padding: 3px 2px 3px 2px;
	margin: 0;
	height:25px;
}
#menu ul li {
	display: inline-block;
	float: left;
	position: relative;
}
#menu ul li a {
	background-color: #d1dab6;
	text-decoration: none;
	text-align: center;
	color: #993366;
	width: 120px;
	display: inline-block;
	padding: 3px 2px 3px 2px;
}
#menu ul li a:hover {
	background-color: #eeeeee;
	color: #666666;
	border-radius: 10px;
	overflow:visible;
}
body#biz a#biznav, body#crafts a#craftsnav, body#editorial a#editorialnav, body#interview a#interviewnav, body#living a#livingnav, body#reviews a#reviewsnav, body#writer a#writernav {
	background-color: #eeeeee;
	color: #666666;
	border-radius: 10px;
}
/* End eMag Menu Styles */


/* Begin Drop Down Menu Styles */
#menu ul.dropdown {
	background-color: #d1dab6;
	list-style-type: none;
	font-size: 12px;
	color: #993366;
	width: 100%;
	display: none;
	padding: 0px;
	margin: 0;
	position: absolute;
}
#menu li:hover ul { display:block }
#menu ul.dropdown li {
	background-color: #d1dab6;
	text-decoration: none;
	text-align: left;
	color: #993366;
	float: none;
	padding: 0px;
	margin: 0;
	position: relative;
}
#menu .dropdown li a {
	background-color: #d1dab6;
	text-decoration: none;
	text-align: left;
	color: #993366;
	width: 120px;
	height: auto;
	padding:5px 10px;
	margin: 0;
}
#menu .dropdown li a:hover {
	background-color: #eeeeee;
	color: #666666;
	border-radius: 10px;
	visibility: visible;
}

/* End Drop Down Menu Styles */
</style>
</head>

<body>
<div id="menu">
		<ul>
				<li><a id="craftsnav" href="../artsncrafts/index.htm" title="Create arts and crafts projects with your family and friends">Arts/Crafts Tuts</a>
						<ul class="dropdown">
								<li><a href="giftideas/index.htm" id="menu">Budget Friendly Gift Ideas</a></li>
								<li><a href="christmas/index.htm">Christmas Crafts</a></li>
								<li><a href="cincodemayo/index.htm">Cinco de Mayo Crafts</a></li>
								<li><a href="earthday/index.htm">Earth Day Crafts</a></li>
								<li><a href="easter/index.htm">Easter Crafts</a></li>
								<li><a href="embroidery/index.htm">Embroidery Projects</a></li>
								<li><a href="everyday/index.htm">Everyday Crafts</a></li>
								<li><a href="fathersday/index.htm">Father's Day Crafts</a></li>
								<li><a href="halloween/index.htm">Halloween Crafts</a></li>
								<li><a href="mothersday/index.htm">Mother's Day Crafts</a></li>
								<li><a href="papercrafts/index.htm">Paper Crafts</a></li>
								<li><a href="thanksgiving/index.htm">Thanksgiving Day Crafts</a></li>
								<li><a href="valentinesday/index.htm">Valentine's Day Crafts</a></li>
						</ul>
				</li>
				<li><a id="biznav" href="../business/index.htm" title="Read articles about creating and building a small business">Business Advice</a></li>
				<li><a id="livingnav" href="../living/index.htm" title="Discover how you can live life on your own terms and create a life worth living.">Intentional Living</a></li>
				<li><a id="interviewnav" href="../interviews/index.htm" title="Read the interviews with authors, actors, musicians, and entreprenuers">Q&amp;A Interviews</a>
						<ul class="dropdown">
								<li><a href="giftideas/index.htm" id="menu">Budget Friendly Gift Ideas</a></li>
								<li><a href="christmas/index.htm">Christmas Crafts</a></li>
								<li><a href="cincodemayo/index.htm">Cinco de Mayo Crafts</a></li>
								<li><a href="earthday/index.htm">Earth Day Crafts</a></li>
								<li><a href="easter/index.htm">Easter Crafts</a></li>
								<li><a href="embroidery/index.htm">Embroidery Projects</a></li>
								<li><a href="everyday/index.htm">Everyday Crafts</a></li>
								<li><a href="fathersday/index.htm">Father's Day Crafts</a></li>
								<li><a href="halloween/index.htm">Halloween Crafts</a></li>
								<li><a href="mothersday/index.htm">Mother's Day Crafts</a></li>
								<li><a href="papercrafts/index.htm">Paper Crafts</a></li>
								<li><a href="thanksgiving/index.htm">Thanksgiving Day Crafts</a></li>
								<li><a href="valentinesday/index.htm">Valentine's Day Crafts</a></li>
						</ul>
				</li>
				<li><a id="reviewsnav" href="../reviews/index.htm" title="Get the latest scoop with book, movie, and product reviews">Product Reviews</a></li>
				<li><a id="writernav" href="../writing/index.htm" title="Read articles on how to becoming a paid freelance writer">Writing Tips</a></li>
				<li><a href="http://alyiceedrich.com" title="Art diary of Alyice Edrich" target="_blank">The Art Diary</a></li>
		</ul>
</div>
<!-- end #menu -->
</body>
</html>

However as Eric mentioned this is not the best way to do a dropdown and you should move it off screen and then bring it back rather than using display:none.

The basics of a dropdown menu are very simple:

You set the dropdown to position:absolute and remove it form the flow and then you hide it off screen with a large negative margin. Then on hovering the parent list item you reveal the menu.

e.g.

ul.menu ul {
	position:absolute;
	left:0;
	top:100%;
	margin:1px 0 0 -999em;/* hide the menu */
	width:150px;/* usually best to give dropdowns a width */
}
ul.menu li:hover ul { margin-left:0 }/* show the menu */

Here's a small demo to show it in action.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
	margin:0;
	padding:0;
	list-style:none
}
/* top level */
ul.menu {
	background:red;
	height:27px;
	line-height:27px;
}
ul.menu li, ul.menu li a {
	float:left;
	height:25px;
	line-height:25px;
	color:#fff;
	background:#fcf;
	text-decoration:none;
	position:relative;/* stacking context for absolute dropdown*/
}
ul.menu li a {
	padding:0 10px;
	border:1px solid #000;
	margin:0 -1px 0 0;
}
/* nested menu level */
ul.menu ul {
	position:absolute;
	left:0;
	top:100%;
	margin:1px 0 0 -999em;/* hide the menu */
	width:150px;/* usually best to give dropdowns a width */
}
ul.menu li:hover ul { margin-left:0 }/* show the menu */
ul.menu ul li, ul.menu ul li a {
	float:none;/* set to vertical*/
	clear:both;
	display:block;
	height:auto;
	line-height:auto;
}
ul.menu ul li { margin-bottom:-1px }
ul.menu li:hover > a,/* keep top level highlighted while dropdown is revealed*/ ul.menu li a:hover { background:#000 }
</style>
</head>

<body>
<ul class="menu">
		<li><a href="#">menu 1</a>
				<ul>
						<li><a href="#">Sub menu 1</a></li>
						<li><a href="#">Sub menu 1</a></li>
				</ul>
		</li>
		<li><a href="#">menu 1</a>
				<ul>
						<li><a href="#">Sub menu 1</a></li>
						<li><a href="#">Sub menu 1</a></li>
				</ul>
		</li>
		<li><a href="#">menu 1</a>
				<ul>
						<li><a href="#">Sub menu 1</a></li>
						<li><a href="#">Sub menu 1</a></li>
				</ul>
		</li>
</ul>
</body>
</html>

[dabblingmum]

Thank you Paul for clarifying that for me. I figured I might have done something screwy like that... I just didn't know where I went wrong.

So instead of creating a separate style sheet I should be placing the code into the between the header tags?

Also, I tried the code you gave but the table isn't lining up correctly. Could it be because I have two navigation bars at the top of the page?

Without trying to implement a drop down menu, the page looks fine. I don't know if I can show it here, but this is the page I am working on: http://thedabblingmum.com/subscribe.htm See everything is fine right now.

I have one called navigation and one called menu, and in the menu navigation bar, I wanted drop down boxes.

It's the second line that I want to add the drop down menu but what keeps happening is this: http://www.flickr.com/photos/dabblin...in/photostream (screen shot).

And again, thank you so much for taking the time to help me better understand this.

[Paul O'B]

So instead of creating a separate style sheet I should be placing the code into the between the header tags?

No the styles should nearly always be external. I just put them in the head as its easier to debug in the forums that way but you should remove the styles to an external css file.

Also, I tried the code you gave but the table isn't lining up correctly. Could it be because I have two navigation bars at the top of the page?

Without trying to implement a drop down menu, the page looks fine. I don't know if I can show it here, but this is the page I am working on: http://thedabblingmum.com/subscribe.htm See everything is fine right now.

I have one called navigation and one called menu, and in the menu navigation bar, I wanted drop down boxes.

It's the second line that I want to add the drop down menu but what keeps happening is this: http://www.flickr.com/photos/dabblin...in/photostream (screen shot).

And again, thank you so much for taking the time to help me better understand this.

As you didn't show the code you had implemented I can't comment on what you did wrong but it looks like you didn't remove the nested styles such as float and thus the nav went horizontal.

Here is the code I gave you put into your page (all styles are in the head but should be external.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Subscribe To The Dabbling Mum</title>
<meta name="description" content="Subcribe Now! It's free to stay updated. Get tips on parenting, writing, running a home business, hosting a party, and more. You'll also get step-by-step instructions for crafts you can create with your children." />
<meta name="keywords" content="subscribe, join, newsletter, ezine, blog, the dabbling mum, alyice edrich" />
<meta name="author" content="The Dabbling Mum" />
<meta name="copyright" content="Copyright The Dabbling Mum, www.thedabblingmum.com" />
<meta name="rating" content="safe for kids" />
<meta name="robots" content="index, follow" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="revisit-after" content="3 days" />
<meta http-equiv="cache-control" content="no-cache" />

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<style tpe="text/css">
/* Begin Layout Styles */

body {
	padding: 0px;
	margin: 0px;
	background-color: #F2F2F2;
	background-image: url('http://thedabblingmum.com/images/mainback.gif');
	background-repeat: repeat;
	font-family: Arial, sans-serif, Helvetica, Cambria, Cochin, "Times New Roman";
	font-size: 15px;
	font-style: normal;
	font-weight: normal;
	color: #202020;
}
#container {
	border-radius: 15px 15px 15px 15px;
	width: 975px;
	margin: 15px auto 15px auto;
	padding: 0px;
	background-color: #FFFFFF;
}
#header {
	border-radius: 15px 15px 0px 0px;
	margin: 0px auto 0px auto;
	padding: 7px 0px 10px 0px;
	background-position: center center;
	height: 100px;
	background-color: #f6f6de;
	background-image: url('http://thedabblingmum.com/images/DM-Banner.png');
	background-repeat: no-repeat;
	clear: both;
}
#navigation {
	padding:5px 5px 5px 5px;
	background-color: #EEEEEE;
	position: relative;
	height: 25px;
	clear: both;
}
#menu {
	padding: 5px 5px 5px 35px;
	background-color: #d1dab6;
	position: relative;
	height: 25px;
	clear: both;
}
#right-column {
	width: 250px;
	float: right;
	margin-top: 25px;
	padding: 10px 15px 10px 3px;
	font-size: 12px;
	color: #000000;
	background-color: #FFFFFF;
	margin-right: 25px;
}
#left-column {
	border-radius: 10px;
	width: 585px;
	margin: 25px 200px 25px 35px;
	padding: 7px 15px 25px 15px;
	background-color: #F4F4F4;
}
#footer {
	font-size: 12px;
	color: #000000;
	border-radius: 0px 0px 15px 15px;
	padding: 0px 15px 25px 15px;
	margin: 0px auto 0px auto;
	background-color: #f6f6de;
	height: 55px;
	clear: both;
}
/* End Layout Styles */


/* Begin Global Styles */

h1 {
	color: #000040;
	font-size: 24px;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	padding-top: 10px;
	padding-bottom: 0px;
}
h2 {
	color: #202020;
	font-size: 20px;
	font-weight: normal;
	font-style: normal;
	padding-top: 5px;
	padding-bottom: 5px;
}
h3 {
	color: #202020;
	font-size: 16px;
	font-weight: bold;
	font-style: normal;
	padding-top: 5px;
	padding-bottom: 5px;
}
h4 {
	color: #666666;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	padding-top: 0px;
	padding-bottom: 5px;
}
h5 {
	color: #202020;
	font-size: 15px;
	font-weight: bold;
	font-style: normal;
	padding-top: 1px;
	padding-bottom: 1px;
}
p { line-height: 20px; }
br { line-height: 20px; }
strong { font-weight: bold; }
em { font-style: italic; }
a:link, a:active, a:visited {
	text-decoration: none;
	color: #993366;
}
a:hover {
	text-decoration: underline;
	color: #666666;
}
.clear { clear: both; }
hr {
	color: #fff;
	background-color: #ffffff;
	border: 1px dotted #5a4c4c;
	border-style: none none dotted;
	width: 100%;
	text-align: center;
}
/*End Global Styles */


/* Begin Alignment Styles */

.alignleft {
	float: left;
	padding: 10px;
}
.alignright {
	float: right;
	padding: 10px;
}
#left-column blockquote {
	font-family: Arial, sans-serif, Helvetica, Cambria, Cochin, "Times New Roman";
	font-style: normal;
	font-size: 12px;
	color: #OOOOOO;
	background-color: #f6f6de;
	margin-left: 15px;
	margin-right: 15px;
	padding: 15px;
	border-radius: 15px;
	border: 2px dashed #c0c0c0;
	width: 500px;
}
#right-column blockquote {
	font-family: Arial, sans-serif, Helvetica, Cambria, Cochin, "Times New Roman";
	font-style: normal;
	font-size: 12px;
	color: #OOOOOO;
	background-color: #f6f6de;
	margin-left: 1px;
	margin-right: 1px;
	margin-bottom: 5px;
	padding: 0px 15px 15px 15px;
	border-radius: 15px;
	border: 2px dashed #c0c0c0;
	width: 200px;
}
/* End Alignment Styles */


/* Begin Image Styles */

#left-column img {
	background-color: #FFFFFF;
	border-radius: 10px;
	border: thin solid #C0C0C0;
	padding: 15px;
}
#right-column img.alignright {
	border-width: 0px;
	float: right;
	margin: 0px 0px 3px 3px;
}
img.alignleft {
	float: left;
	margin: 0px 15px 15px 0px;
}
img.alignright {
	border-width: 0px;
	float: right;
	margin: 0px 0px 15px 15px;
}
img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
a img { border-width: 0px; }
/* End Image Styles */


/* Begin List Styles */

#left-column ul {
	list-style-type: disc;
	margin-left: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 20px;
}
#left-column li { margin-bottom: 10px; }
#left-column li { margin-bottom: 10px; }
#left-column li a { color: #993366; }
#left-column li a:hover {
	text-decoration: underline;
	color: #666666;
}
#left-column ol {
	list-style-type: decimal;
	margin-left: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
}
/* End Lists Styles */


/* Begin Navigation Menu Styles */

#navigation ul {
	background-color: #EEEEEE;
	list-style-type: none;
	font-size: 13px;
	color: #993366;
	width: 100%;
	display: inline-block;
	margin: 0;
	padding: 3px 2px 3px 2px;
	overflow: hidden;
	float: left;
}
#navigation ul li { float: left; }
#navigation ul li a {
	background-color: #EEEEEE;
	text-decoration: none;
	text-align: center;
	color: #993366;
	width: 133px;
	display: inline-block;
	padding: 3px 2px 3px 2px;
	overflow: hidden;
}
#navigation ul li a:hover {
	background-color: #d0dab7;
	color: #666666;
	border-radius: 10px;
}
body#home a#homenav, body#ebook a#ebooknav, body#artstore a#artstorenav, body#prints a#printsnav, body#collage a#collagenav, body#printables a#printablesnav, body#workwithme a#workwithmenav {
	background-color: #d0dab7;
	color: #666666;
	border-radius: 10px;
}
/* End Navigation Menu Styles */


/* Begin eMag Menu Styles */

#menu ul {
	background-color: #d1dab6;
	list-style-type: none;
	font-size: 12px;
	color: #993366;
	width: 100%;
	display: inline-block;
	padding: 3px 2px 3px 2px;
	overflow: hidden;
	float: left;
	margin: 0;
}
#menu ul li { float: left; }
#menu ul li a {
	background-color: #d1dab6;
	text-decoration: none;
	text-align: center;
	color: #993366;
	width: 120px;
	display: inline-block;
	padding: 3px 2px 3px 2px;
	overflow: hidden;
}
#menu ul li a:hover {
	background-color: #eeeeee;
	color: #666666;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
body#biz a#biznav, body#crafts a#craftsnav, body#editorial a#editorialnav, body#interview a#interviewnav, body#living a#livingnav, body#reviews a#reviewsnav, body#writer a#writernav {
	background-color: #eeeeee;
	color: #666666;
	border-radius: 10px;
}
/* End eMag Menu Styles */

/* dropdown styles */
#menu ul { overflow:visible }
#menu ul li { position:relative }/* stacking context*/
#menu ul ul {
	position:absolute;
	left:0;
	top:100%;
	margin:0 0 0 -999em;/* hide the menu *//* width:150px;usually best to give dropdowns a width */
}
#menu li:hover ul { margin-left:0 }/* show the menu */
#menu li ul li, ul.menu ul li a {
	float:none;/* set to vertical*/
	clear:both;
	display:block;
	height:auto;
	line-height:auto;
	background:transparent;
}
#menu li:hover > a,/* keep top level highlighted while dropdown is revealed*/ ul.menu li li a:hover {
	background-color: #eeeeee;
	color: #666666;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
/* Begin Right-Column Menu Styles */

#right-column ul {
	background-color: #f6f6df;
	list-style-type: none;
	font-size: 18px;
	color: #993366;
	text-transform: inherit;
	display: block;
	line-height: 40px;
	text-align: left;
	text-indent: 15px;
	word-spacing: inherit;
	margin: 7px;
	padding: 7px 10px 7px 5px;
	list-style-position: inside;
	border-radius: 10px;
	clear: both;
}
#right-column ul li a {
	text-decoration: none;
	background-color: #f6f6df;
	color: #993366;
	display: block;
	width: 145px;
}
#right-column ul li a:hover {
	background-color: #d0dab7;
	color: #666666;
	border-radius: 10px;
}

/* End Right-Column Menu Styles */
</style>
</head>

<body id="home">
<div id="container">
		<div id="header"></div>
		<!-- end #header -->
		
		<div id="navigation">
				<ul>
						<li><a id="homenav" href="subscribe.htm" title="How-to articles and essays">eMagazine</a></li>
						<li> <a id="printablesnav" href="printables/index.htm" title="Print your own cards">Free Printables</a></li>
						<li><a id="ebooknav" href="ebookstore/index.htm" title="Downloadable books">eBook Store</a></li>
						<li><a id="artstorenav" href="artstore/index.htm" title="Original works of art">Art Shoppe</a></li>
						<li> <a id="printsnav" href="printshop/index.htm" title="Customize art and photos at no extra charge">Artistic Prints</a></li>
						<li> <a id="collagenav" href="collagesheets/index.htm" title="Digital dowloadable papers">Collage Sheets</a></li>
						<li> <a id="workwithmenav" href="hiretheeditor/index.htm" title="Freelance writer for hire">Work With Me</a></li>
				</ul>
		</div>
		<!-- end #navigation -->
		
		<div id="menu">
				<ul>
						<li> <a id="craftsnav" href="artsncrafts/index.htm" title="Create arts and crafts projects with your family and friends">Arts/Crafts Tuts</a>
								<ul>
										<li><a href="#">Sub menu 1</a></li>
										<li><a href="#">Sub menu 1</a></li>
										<li><a href="#">Sub menu 1</a></li>
								</ul>
						</li>
						<li> <a id="biznav" href="business/index.htm" title="Read articles about creating and building a small business">Business Advice</a>
								<ul>
										<li><a href="#">Sub menu 1</a></li>
										<li><a href="#">Sub menu 1</a></li>
										<li><a href="#">Sub menu 1</a></li>
								</ul>
						</li>
						<li> <a id="livingnav" href="living/index.htm" title="Discover how you can live life on your own terms and create a life worth living.">Intentional Living</a></li>
						<li> <a id="interviewnav" href="interviews/index.htm" title="Read the interviews with authors, actors, musicians, and entreprenuers">Q&amp;A Interviews</a></li>
						<li> <a id="reviewsnav" href="reviews/index.htm" title="Get the latest scoop with book, movie, and product reviews">Product Reviews</a></li>
						<li> <a id="writernav" href="writing/index.htm" title="Read articles on how to becoming a paid freelance writer">Writing Tips</a></li>
						<li><a href="http://alyiceedrich.com" title="Art diary of Alyice Edrich" target="_blank">The Art Diary</a></li>
				</ul>
		</div>
		<!-- end #menu -->
		
		<div id="right-column"> <a href="hiretheeditor/index.htm"> <img src="images/homepage/AlyiceEdrich-125wide.jpg" alt="headshot" title="Alyice Edrich, Editor-in-Chief" width="125" height="141" class="alignright"/></a>
				<p><b>Hello!</b> I'm Alyice and I'll be your guide as you travel through the pages of <i> <a href="media/aboutus.htm">The Dabbling Mum</a></i>. Please grab a cup of java and stick around a bit.</p>
				<p>My hope is that <a href="subscribe.htm">the eMagazine</a> will inspire you to follow your dreams and the <a href="shop.htm">shoppes</a> will make life a little more fun.</p>
				<hr/>
				<br/>
				<center>
						<img src="images/subscribe-page/newsletter.jpg" alt="newsletter" title="DM News" height="213" width="250" />
						<blockquote> 
								<!-- Begin FeedBurner Signup Form -->
								<form style="border:0px #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TheDabblingMumNews', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
										<br/>
										<input value="Enter email" type="text" style="width:150px" name="email"/>
										<br/>
										<input type="hidden" value="TheDabblingMumNews" name="uri"/>
										<input type="hidden" name="loc" value="en_US"/>
										<input type="submit" style="width:150px" value="Subscribe to DM News" />
										<br/>
										<br/>
										<i>We won't sell, trade, or give away <br/>
										your email address.</i><br/>
										<a href="http://feeds.feedburner.com/TheDabblingMumNews" target="_blank">RSS Feed</a>
								</form>
								<!--End FeedBurner Signup Form --> 
						</blockquote>
						<br/>
						<hr/>
						<br/>
						<img src="images/sponsors.jpg"  alt="advertise" title="Sponsor The Dabbling Mum" height="45" width="160"/> <br/>
						<br/>
						
						<!-- begin ebookstore code --> 
						<a href="ebookstore/index.htm"> <img src="images/shops/ebooksad.jpg" alt="e-books ad" title="Shop for exclusive e-books" height="267" width="225" /></a> 
						<!-- end ebookstore code right --> 
						<br/>
						<br/>
						
						<!-- begin zazzle code --> 
						<a href="printshop/index.htm"> <img src="images/shops/zazzlead.jpg" alt="art ad" title="Shop for prints of Alyice Edrich's photos and art..." height="275" width="225" /></a> 
						<!-- end zazle code right --> 
						<br/>
						<br/>
						
						<!-- begin original art code --> 
						<a href="artstore/index.htm"> <img src="images/shops/EtsyAd.jpg" alt="art ad" title="Shop for original art by Alyice Edrich" height="275" width="225" /></a> 
						<!-- end original art code right --> 
						
						<br/>
						<br/>
						<hr/>
						<br/>
						<map id="ImgMap0" name="ImgMap0">
								<area alt="facebook" coords="5, 3, 47, 48" href="http://facebook.com/thedabblingmum" title="Like us on Facebook" target="_blank" shape="rect" />
								<area alt="twitter" coords="50, 3, 93, 48" href="http://twitter.com/#!/thedabblingmum"  title="Follow us on Twitter" target="_blank" shape="rect" />
								<area alt="youtube" coords="96, 4, 139, 47" href="http://youtube.com/dabblingmum"  title="View us on YouTube" target="_blank" shape="rect" />
						</map>
						<img src="images/icons/socialnetworks.jpg" alt="socialize" title="Social Media Networks" style="border-width: 0px;" height="52" usemap="#ImgMap0" width="140"/> <br/>
						<br/>
						Stop by our <a href="http://facebook.com/thedabblingmum" target="_blank" rel="nofollow">fan page</a> for daily <br/>
						gratitude posts, real-time <br/>
						updates, tid-bits from other <br/>
						sources, discounts, and more! <br/>
						<br/>
						<hr/>
						<br/>
						<img src="images/grabbutton.jpg" alt="grab button" title="Read The Dabbling Mum Magazine" height="45" width="160"/> <br/>
						<br/>
						
						<!-- begin grab button code --> 
						<img src="http://2.bp.blogspot.com/-Xl2_YG1jvW0/Tk8ygcOBVTI/AAAAAAAAB1Q/jOM2jd_F0k8/s1600/DMgrabmebutton.jpg" alt="grab button" title="Grab DM Button"/><br />
						<br />
						<textarea style="width:150px; height: 150px" name="textfield"><a title="The Dabbling Mum eMagazine" href="http://thedabblingmum.com"><img src="http://2.bp.blogspot.com/-Xl2_YG1jvW0/Tk8ygcOBVTI/AAAAAAAAB1Q/jOM2jd_F0k8/s1600/DMgrabmebutton.jpg" alt="grab button" title="Grab DM Button" style="border-width: 0px;" /></a></textarea>
						<!-- end grab buttoncode right --> 
						<br/>
						<br/>
				</center>
		</div>
		<!-- end #right-column -->
		
		<div id="left-column">
				<h1>Well Hello There...</h1>
				<p>Welcome to the magazine portion of <i><a href="index.htm">The Dabbling Mum</a>&reg;</i>.</p>
				<img src="images/subscribe-page/newarticles.jpg" alt="new articles" title="The Dabbling Mum Online Magazine" height="250" width="500"  class="center"/>
				<h2>Editor's Note</h2>
				<p><i>You may have noticed a few changes around here lately, including a new site design and missing article pages. As we move forward with the business, we've opted to do away with the parenting articles and recipes. While we've enjoyed publishing articles 
						in those areas over the years, our stats (and emails) have shown us that people want more information for creative entrepreneurs, more tips on improving one's writing, and more ways to live a happier, simpler lifestyle. We're excited about this new direction, and we hope you will be, too!</i></p>
				<h2>January Articles</h2>
				<p>Discover what it's like to live a creative lifestyle... Articles, interviews, and tutorials are added throughout the month so check back weekly. They are listed from newest to oldest.</p>
				<ul>
						<li><a href="interviews/writers/carlastewart.htm">Carla Stewart</a> <br/>
								Carla Stewart talks about her latest novel, Stardust, and what it's like to write Christian adult fiction.</li>
				</ul>
				<h2>December 2012 Articles</h2>
				<ul>
						<li>Alyice Edrich answers readers most <a href="media/qa-alyiceedrich.htm">frequently asked questions</a>.</li>
						<li>Alyice Edrich shares a simple, fun birth announcement project you can create with your kids using the <a href="reviews/artsupplies/eyecankit.htm">Book-In-A-Box Kit</a> by <i>Eye Can Art</i>.</li>
						<li>Learn how to earn residual income while building your creative business by <a href="business/bizideas/affiliatemarketer.htm">becoming an affiliate marketer</a>.</li>
						<li><a href="interviews/writers/carlasonheim.htm">Carla Sonheim</a> talks about her latest drawing book and what it's like to teach others how to have fun with art.</li>
						<li><a href="editorials/01-braindump.htm" rel="nofollow">Brain Dump</a>: Alyice Edrich talks about starting over after taking some time off from her business, and how showing a little vulnerability can be a good thing.</li>
						<li>A new <a href="printables/index.htm">printable</a> has been added to the site. This one is a 2 inch gift tag for those Christmas presents you're wrapping.</li>
				</ul>
				<h2>Shop Updates</h2>
				<a href="printshop/postcards.htm"><img src="images/subscribe-page/newproduct.jpg" alt="new product" title="The Dabbling Mum Shopping Portal" height="250" width="500"  class="center"/></a>
				<p>Besides the items shown in the photo above, we're constantly adding new product to our <a href="affiliates/zazzle.htm">Zazzle shop</a>. Stop by to check out our latest magnets, postcards, buttons, and more.</p>
				<h2>Guest Posts Wanted</h2>
				<a href="write4us/donate.htm"><img src="images/subscribe-page/tutorials-wanted.jpg" alt="writers wanted" title="Guest Posts Wanted" height="274" width="500" class="center"//></a>
				<p>We're looking for guest contributors. If you'd like to appear on this website, please check out our <a href="write4us/donate.htm">Writers' Guidelines</a>.</p>
		</div>
		<!-- end left-column -->
		
		<div id="footer">
				<p class="alignleft">&copy; The Dabbling Mum &reg; | Alyice Edrich. All rights reserved.<br/>
						No portion of this website may be reproduced without expressed, written permission.</p>
				<p class="alignright"> <a href="advertise/index.htm" title="Advertise with The Dabbling Mum">Advertise</a> | <a href="joinezine.htm">Subscribe</a> | <a href="media/index.htm" title="Media, Public Relations">Media</a> | <a href="termsofuse/index.htm" title="Terms of Use, Privacy Policy, Disclaimer">Terms of Use</a> | <a href="write4us/index.htm" title="Writers' Guidelines">Write for Us</a> | <a href="shop.htm" title="Go Shopping">Shoppes</a> | <a href="contact.htm" title="Contact The Dabbling Mum">Contact</a></p>
				
				<!-- Start of StatCounter Code --> 
				<script type="text/javascript">
var sc_project=228536; 
var sc_invisible=1; 
var sc_security=""; 
</script> 
				<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script> 
				<!-- End of StatCounter Code --> 
				
		</div>
		<!-- end #footer --> 
		
</div>
<!-- end #container -->

</body>
</html>

Just copy that code and view it in a browser while online and you can see it working so you know its working before you mess around with implementing it.

The main changes were here:

/* dropdown styles */
#menu ul { overflow:visible }
#menu ul li { position:relative }/* stacking context*/
#menu ul ul {
	position:absolute;
	left:0;
	top:100%;
	margin:0 0 0 -999em;/* hide the menu *//* width:150px;usually best to give dropdowns a width */
}
#menu li:hover ul { margin-left:0 }/* show the menu */
#menu li ul li, ul.menu ul li a {
	float:none;/* set to vertical*/
	clear:both;
	display:block;
	height:auto;
	line-height:auto;
	background:transparent;
}
#menu li:hover > a,/* keep top level highlighted while dropdown is revealed*/ ul.menu li li a:hover {
	background-color: #eeeeee;
	color: #666666;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

Also don't use center tags as they are presentational and deprecated in strict and have no place in a modern website. Use CSS to center (although its not always as easy as the center tag I agree).

Also you made the nav menus harder to use by wrapping an unnecessary div around them. Just use the ul as the wrapper as there is no need for the extra div and in that way nested rules are easier to follow.

e.g.
<ul id="menu">

...

#menul{}/* top level */
#menu ul {}/* dropdown level */

instead of what you have:

#menu ul {}/* top level */
#menu ul ul {}/* dropdown level */

[dabblingmum]

Thank you for taking the extra time to explain things to me.

I removed the center tags, I honestly don't even know why I put them in there because it does what I want by removing them. I have to wonder if it's a carry over form the old html site. At any rate, thanks for that tip! I'm going to have to check other areas of the site to see if I did that with anything else.

I'm going to give the code another shot. I'll let you know how it goes.

[dabblingmum]

I was finally able to sit down and give your changes a shot. I just wanted to say THANK YOU THANK YOU THANK YOU!

The drop down box works now (http://thedabblingmum.com/subscribe.htm) It feels so good to have drop down boxes, it makes the page look more professional.

Have a great week!

Alyice

[dabblingmum]

I hate to bug you again, but can I ask how to get the bottom of the drop down box to have rounded corners? Thanks.

[ralph.m]

can I ask how to get the bottom of the drop down box to have rounded corners? Thanks.

Try something like this (new styles in red):

#menu ul ul {
position: absolute;
left: 0;
top: 100%;
margin: 0 0 0 -999em;
width: 110px;
border-radius: 6px;
}

#menu ul ul li a {
background: none;
padding: 3px 0 2px;
}

[dabblingmum]

Where would that go here?

/* Begin eMag Menu Styles */

#menu ul {
background-color: #d1dab6;
list-style-type: none;
font-size: 12px;
color: #993366;
width: 100%;
display: inline-block;
padding: 3px 2px 3px 2px;
overflow: hidden;
float: left;
margin: 0;
}

#menu ul li {
float: left;
}

#menu ul li a {
background-color: #d1dab6;
text-decoration: none;
text-align: center;
color: #993366;
width: 110px;
display: inline-block;
padding: 3px 2px 3px 2px;
overflow: hidden;
}

#menu ul li a:hover {
background-color: #eeeeee;
color: #666666;
-moz0border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

body#samples a#samplesnav,
body#testimonies a#testimoniesnav,
body#rates a#ratesnav,
body#faqs a#faqsnav,
body#content a#contentnav,
body#eulogy a#eulogynav
body#webdesign a#webdesignnav {
background-color: #eeeeee;
color: #666666;
border-radius: 10px;
}

/* End eMag Menu Styles */


/* Begin dropdown Menu Styles */

#menu ul {
overflow: visible;
}

#menu ul li {
position: relative;
}

/* stacking content */

#menu ul ul {
position: absolute;
left: 0;
top: 100%;
margin: 0 0 0 -999em;
width: 110px;
}
/* hide menu */


#menu li:hover ul {
margin-left: 0;
}

/* show menu */

#menu li ul li, ul.menu ul li a{
float: none;
clear: both;
display: block;
height: auto;
line-height: auto;
background: transparent;
}

#menu li:hover > a, ul.menu li li a:hover {
background-color: #eeeeee;
color: #666666;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

/* keep dropdown menu highlighted while dropdown is revealed */


/* End dropdown Menu Styles */

[dabblingmum]

oh nevermind I figured it out... I think I was overthinking it. Thank you so much, it works!