I am completely new at this as you will see! I am trying to add drop downs from two of my five components on my navigation bar. I would like to add a drop down for three galleries (newborn, children, and family & siblings) under Galleries. I would also like to have a drop down under Investment for pricing and client proofs. I have been copying and pasting info from the forum; however, I think I have made a big mess. Any help is appreciated!!!!!!! Thanks! www.hollybrowder.smugmug.com (http://www.hollybrowder.smugmug.com)
Try this.
Change your header html to this. It works great with Firefox, IE's might
need a little position tweaking.
<div id="my_header">
Capture the Moment Photography
</div>
<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/5747130_NJmQY/">About Me</a></li>
<li><a class="drop" href="/galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">newborn</a></li>
<li><a href="Link">children</a></li>
<li><a href="Link">family & siblings</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/5746863_hqVKQ/">How I Work</a></li>
<li><a class="drop" href="/gallery/5746989_K9fen/">Investment
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">pricing</a></li>
<li><a href="Link">client proofs</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/5754583_mNYFP/">Contact Me</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
Change your nav CSS to this
/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */
/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 630px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}
.menu ul {
padding: 10px 0px 10px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}
.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}
.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; /* main buttons */
color: #ccc; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 104px; /* main box width */
height: 20px; /* main box height */
background: none; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}
* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; /* IE main button */
}
.menu ul li ul {
display: none;}
/* */
/* Specific to Non-IE browsers */
/* */
.menu ul li:hover a {
color: #fff; /* main when hover DD */
background: #000; /* main when hover DD */
}
.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -7px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 104px; /* unknown */
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display: block;
background: #000; /* DD FO non-hover */
color: #ccc; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 104px; /* DD FO box width */
}
.menu ul li:hover ul li a:hover {
background: #000; /* DD FO hover */
color: #fff; /* DD FO hover */
}
.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 102px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 104px; /* FF FO box width */
}
/* */
/* Specific to IE browsers */
/* */
.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: #fff; /* main hover */
background: #000; /* main hover */
}
.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 0px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}
.menu ul li a:hover ul li a {
display: block;
background: #000; /* IE DD color non-hover */
color: #ccc; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 104px; /* IE DD FO box */
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}
.menu ul li a:hover ul li a:hover {
background: #000; /* DD FO hover */
color: #fff; /* DD FO hover */
}
.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 104px; /* FO right left */
}
/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width: 104px;
w\idth: 104px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}
/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a {
width: 104px; /* unknown */
w\idth: 104px; /* DD FF width */
}
/*END EXTRA ADDS FOR IE*/
/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}
/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}
/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}
/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}
/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}
/* ==== END NAVBAR CODE ==== */
See these pages here (http://allen-steve.smugmug.com/gallery/2327835), here (http://allen-steve.smugmug.com/gallery/2011077) and here (http://allen-steve.smugmug.com/gallery/2078255) for what I use.
Edit: forgot to mention you are missing a } at the end of your current CSS.