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/dabblingmum/8343231523/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&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>®</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">© The Dabbling Mum ® | 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 */
