...
I am also curious if I can add a drop down menu to my pre-exsisting navibar. I am hoping to remove the 2 portfolio links (kids & Life) and just have one for the 2 portfolio links. .....
Welcome to Dgrin:wave .... and Happy Birthday!
Answering your navbar part.
A quick starter, add the green to your navbar in your header code to close
the div and container (ul).
<div id="navcontainer">
<ul>
<li><a href="http://katherinecardenas.smugmug.com">Home</a></li>
<li><a href="http://katherinecardenas.smugmug.com/gallery/2227978/">Portfolio/Kids</a></li>
<li><a href="http://katherinecardenas.smugmug.com/gallery/2295040/">Portfolio/Life</a></li>
<li><a href="http://katherinecardenas.smugmug.com/Clients">Clients</a></li>
<li><a href="mailto:%20citycat29@gmail.com">Contact</a></li>
</ul>
</div>
Sounds like you want a simple dropdown under Portfolio for Kids and Life.
I through together the html and CSS to give you your dropdown.
This first part is your header html code.
<div id="navcontainer">
<ul>
<li><a href="http://katherinecardenas.smugmug.com">Home</a></li>
<li><a class="drop" href="http://katherinecardenas.smugmug.com/gallery/2227978/">Portfolio/Kids
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://katherinecardenas.smugmug.com/gallery/2295040/">Life</a></li>
<li><a href="http://katherinecardenas.smugmug.com/gallery/2295040/">Kids</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://katherinecardenas.smugmug.com/Clients">Clients</a></li>
<li><a href="mailto:%20citycat29@gmail.com">Contact</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
This following part would replace your navcontainer CSS.
/* 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 */
#navcontainer {
position:relative;
display:block;
z-index:99;
padding:0px 0px 0px 0px; /* spacing around menu - top right bottom left */
height:20px; /* menu container (div #navcontainer) */
width:420px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
margin:0 auto; /* this should center navbar, if not tweak with left's below */
}
#navcontainer ul {
padding:10px 0px 10px 0px; /* this effects menu centering if too big, maybe not needed? */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}
#navcontainer ul li {
float:left; /* WARNING: float right reverses menu */
position:relative;
}
#navcontainer ul li a,
#navcontainer ul li a:visited {
display:block;
font-size:1.2em; /* main buttons */
color: white ; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width:100px; /* main box width */
height:20px; /* main box height */
background:#000000; /* main button color */
padding-left:0px;
line-height:20px; /* positions text up/down in box */
}
* html #navcontainer ul li a, #navcontainer ul li a:visited {
width:104px; w\idth:104px; /* IE main button */
}
#navcontainer ul li ul {
display:none;}
/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */
#navcontainer ul li:hover a {
color:silver; /* main when hover DD */
background:black; /* main when hover DD */
}
#navcontainer ul li:hover ul {
display:block;
position:absolute;
top:-4px; /* FF DD up down */
margin-top:17px; /* FF main mouse active vertical */
left:0px; /* FF DD right left */
width:104px; /* unknown */
}
#navcontainer ul li:hover ul li ul {
display: none;
}
#navcontainer ul li:hover ul li a {
display:block;
background:black; /* DD FO non-hover */
color:white; /* DD FO non-hover */
height:auto;
line-height:20px; /* DD FO box height */
padding:0px 0px;
width:100px /* DD FO box width */
}
#navcontainer ul li:hover ul li a:hover {
background:black; /* DD FO hover */
color:silver; /* DD FO hover */
}
#navcontainer ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:102px; /* FF FO right left */
top:-27px; /* FF FO up down */
width:146px; /* FF FO box width */
}
#navcontainer ul li:hover ul li:hover ul.left {
left:-134px; /* unknown - previously defined */
} /* class of .left for left flyouts? */
/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */
#navcontainer ul li a:hover {
/* text-decoration:none; /* might be needed */ */
color:silver; /* main hover */
background:black; /* main hover */
}
/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */
* html #navcontainer a, * html #navcontainer a:visited {
width:125px;
w\idth:139px;
}
/* another hack for IE5.5 */
* html #navcontainer 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 */
#navcontainer table {
position:absolute;
top:auto 0; left:0;
}
/* yet another hack for IE5.5 */
* html #navcontainer ul ul a{
width:125px; /* unknown */
w\idth:104px; /* DD FF width */
}
So if you're feeling adventurous you can try this and
fire back with any questions.
Al
Edit: There will probably need to be some edit of the CSS for IE,
colors etc. But that'll be tackled after FireFox is perfert.