Hi,
I have been working on some of the graphics etc for my
site, and wanted to take the next step and change my navbar
so it can dropdown into the following categories. The orientation
of my bar is horizontal, I listed vertically to keep things from
running into each other...
...
Thanks, Dave
Here ya go.
Add this to your header nav html.
<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a class="drop" href="#nopick">Info
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/4179524">About Me</a></li>
<li><a href="mailto:DaveJL1984@aol.com">Contact Us</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#nopick">Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">Little league Baseball</a></li>
<li><a href="Link">Minor League Baseball</a></li>
<li><a href="Link">NECBL Baseball</a></li>
<li><a href="Link">Spring Training Baseball</a></li>
<li><a href="Link">Band Photography </a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/4227072">FAQ</a></li>
<li><a href="/gallery/xxxxxxx">Links</a></li>
<li><a href="/gallery/4139462">Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
Add this to your CSS. I has the code for flyouts if you ever need them also.
/* 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 */
width: 616px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto;
}
.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;
}
.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; /* main buttons */
color: #7FFFD4; /* 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 */
/* border: 1px solid red; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: #000; /* 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: #7FFFD4; /* main when hover DD */
background: #000; /* main when hover DD */
}
.menu ul li:hover ul {
display: block;
position: absolute;
top: -6px; /* 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: #7FFFD4; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px; /* DD FO box width */
}
.menu ul li:hover ul li a:hover {
background: #369; /* 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: 146px; /* FF FO box width */
}
/* */
/* Specific to IE browsers */
/* */
.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: #fff; /* main hover */
background: #369; /* main hover */
}
.menu ul li a:hover ul {
display: block;
position: absolute;
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: #7FFFD4; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* 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: #369; /* 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: 147px; /* 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: 125px;
w\idth: 139px;
}
/* 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: 125px; /* 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 ==== */