I have been trying to figure out how to get drop down menus since I first got the CSS upgrade, which is weird since I only have 3 subpages on my blog. I searched the forums a while ago and to no luck, so in the future if CSS users search for how to create a drop down menu, now the code is in the forum. The drop down menu looks awkward on my blog, but maybe I'll get used to it. Anyways, I did this on sandbox, heres my CSS code for the navigation menu,
#globalnav {
border-left:10px solid #FF00A6;
border-bottom:3px solid #FF00A6;
border-top:3px solid #FF00A6;
background:#ffffff;
text-transform:uppercase;
width:980px;
height:29px;
position:relative;
}
#globalnav ul#menu {
height:55%;
font-size:85%;
font-weight:bold;
letter-spacing:.07em;
border-left:10px solid #FFBAE7;
list-style-type:none;
margin:0;
padding:.6em .6em .6em 5px;
}
#globalnav ul li {
display:inline;
border-left:0 solid #4A4A4A;
padding-right:9px;
padding-top:0;
float:left;
position:relative;
}
#globalnav ul li a:link,#header ul li a:active,#globalnav ul li a:visited {
color:#4A4A4A;
text-decoration:none;
}
#globalnav li ul {
visibility:hidden;
position:absolute;
top:1.5em;
left:0;
height:0;
overflow:hidden;
}
#globalnav ul li a:visited {
color:#000000;
text-decoration:none;
}
#globalnav ul li a:hover {
color:#FF219F;
text-decoration:none;
background:#FFFFFF;
border:4.5px solid #FFBAE7;
padding:7px 5px;
}
#globalnav li:hover a,#globalnav li a:hover {
background:none;
color:#FAFAFA;
border:none;
}
#globalnav li:hover ul,#globalnav li a:hover ul {
color:#333333;
visibility:visible;
height:auto;
width:15em;
background:#FFF8FC;
border:1px solid #FF00A6;
left:0;
margin-top:.1em;
overflow:visible;
}
#globalnav li:hover ul li a,#globalnav li a:hover ul li a {
color:#333;
display:block;
font-weight:normal;
background:transparent;
text-decoration:none;
height:auto;
line-height:1.5em;
width:15em;
border:none;
padding:.5em;
}
#globalnav li:hover ul li a.drop,#globalnav li a:hover ul li a.drop {
font-weight:bold;
}
#globalnav li:hover ul li ul,#globalnav li a:hover ul li a ul {
visibility:hidden;
position:absolute;
top:0;
left:9.5em;
height:0;
overflow:hidden;
}
#globalnav li:hover ul li a:hover,#globalnav li a:hover ul li a:hover {
text-decoration:none;
background:#FF00A6;
color:white;
width:14em;
}
#globalnav li:hover ul li:hover ul,#globalnav li a:hover ul li a:hover ul {
visibility:visible;
color:#000;
border:1px solid #ddd;
height:auto;
background:#fff;
width:9.5em;
}
#globalnav li:hover ul li:hover ul li a,#globalnav li a:hover ul li a:hover ul li a {
display:block;
height:auto;
}
#globalnav li:hover ul li:hover ul li:hover a,#globalnav li a:hover ul li a:hover ul li a:hover {
text-decoration:underline;
}
