Ok im trying to add a drop down to the portfolio link in my nav bar. i want it were when you go to it it drops down and has portraits, weddings, landscapes, sports. Thanks in advance for the help.
See if you like this. Before making any change, on your "advanced site-wide
customization" page click "email" button at the bottom to save a backup
your code.
Change your whole header to this. You'll need to add in the Portfolio links.
<div id="my_header">
<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a class="drop" href="#nopick">My Portfolio
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#Link">Portraits</a></li>
<li><a href="#Link">Weddings</a></li>
<li><a href="#Link">Landscapes</a></li>
<li><a href="#Link">Sports</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/7673373_BZftt">About Me</a></li>
<li><a href="/gallery/7680777_CbYbt">Services</a></li>
<li><a href="/gallery/8019914_ybTNT">Contact Me</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
<div id="my_banner">
<a href="http://CColemanPhotography.smugmug.com">
<img src="/img/spacer.gif" border="0" height="100" width="300">
</a>
</div>
</div> <!-- closes my_header -->
Remove this from your CSS
#navcontainer {
float: right;
margin: 85px 10px 10px 20px; /* top R bottom L */
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: right;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #FFFFFF;
background-color: #000000;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #C0C0C0;
}
Add this to your 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 */
/* CSS Section */
/* style the outer div to give it width */
.menu {
z-index:99;
float: right;
position:relative; /*Make the container moveable*/
width:600px; /*Main bar total width*/
margin-top: 80px; /* position nav vertically */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:100px;
}
.menu li {
float:left;
text-align:center;
width:100px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:14px;
text-decoration:none;
color:#fff;
font-family: Comic Sans MS, verdana, tahoma;
width:100px; /* Defines the main box dimensions. */
height:20px; /*How tall your cells are*/
background:#000;
line-height:20px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:100px; w\idth:100px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#000;}
/* style the second level hover */
.menu ul ul a.drop:hover{background:#444;}
.menu ul ul :hover > a.drop {background:#000;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#000;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#444;}
.menu ul ul ul :hover > a {background:#000;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:20px;
left:0;
width:100px; /* Size of the daughter cells */
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px; t\op:31px; /* IE gap between main bar and the dropdown items */
}
/* position the third level flyout menu */
.menu ul ul ul{
left:100px;
top:0;
width:100px;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#000;
color:#fff;
height:auto;
line-height:1em;
padding:5px 0px;
width:100px;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a{
width:100px; w\idth:100px;}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#444;
}
/* main when hover drop */
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#444;
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible;}
/* End Navbar Code */
Reference to html format.
http://allen-steve.smugmug.com/gallery/2327835