Need help? Check out our Support site, then


Yay!!! Drop Down Menus Are Possible

  1. 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;
    }
  2. I went to your website, and half of it is cut off for me. But thats cool.

  3. probably IE issue, I might decide to fix that

  4. Well, its defintiely not an issue I'm experiencing in IE7 so you must have some other browser.

  5. I just gave the code a glance, and after seeing the end result, I have to say this: Nicely done! *thumbs up*

  6. Ooh, I might have to be stealing this! Thank you for posting it.

  7. Thanks. It came to me while I was listening Beyonce's song Diva and while I was drunk on mountain dew...I do weird things when I'm drink mountain dew LOL.

  8. masterclasslady
    Member

    Can this be applied to other themes or only to Sandbox? Great work, by the way!

  9. thanks, I tried it on the contempt theme and it didn't work so I'm assuming this can only be applied to sandbox, though I'm no expert on CSS so maybe there's another way to do this that I wouldn't know about. I will be working my blogs CSS today so maybe I will get bored and keep trying to figure out how to do this for other blogs.

  10. Hi, I am curious. There are a lot of WordPress blogs with dropdown menu's, are you talking about pure CSS menus?

    Mike.

  11. I'm talking about those of us who have wordpress.COM blogs and use the sandbox theme to do CSS. Your blog is from wordpress.ORG self-hosted blog. Unfortunately wordpress.COM blogs don't get the drop down menu option.

Topic Closed

This topic has been closed to new replies.

About this Topic