Grow your CSS skills. Land your dream job.

Dropdown Menu Not Working

  • # July 22, 2010 at 4:06 pm

    Hey everybody I’m new to the forum. Basically I need help with a theme for wordpress, I have followed Chris’s tutorial on how to make a custom wordpress theme "http://css-tricks.com/video-screencasts/25-designing-for-wordpress-part-one/". I followed the tutorial and ended up with what I think to be a quite decent template. I am now trying to extend the theme by making a dropdown menu for it. Currently the CSS I have is :

    Code:
    MENU
    */
    #menu-bar { padding-top: 11px; padding-bottom: 20px;}
    ul#main-nav { float: left; margin: 10px 0 0 0; }
    ul#extra-nav { float: right; text-align: right; margin: 10px 0 0 0; }
    ul#main-nav li, ul#extra-nav li { display: inline; }
    ul#main-nav li a, ul#extra-nav li a { text-transform: uppercase; color: white; font-size: 1.2em; padding: 3px 8px;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; }
    ul#main-nav li a:hover,
    ul#extra-nav li a:hover,
    body#default ul#main-nav li.home a,
    body#about ul#main-nav li.about a,
    body#contact ul#main-nav li.contact a,
    body#tutorials ul#main-nav li.tutorials a,
    body#downloads ul#main-nav li.downloads a,
    body#blog ul#extra-nav li.blog a{ background: white; color: #9CB138; }

    #menu-bar ul#main-nav li ul {
    display: none }

    #menu-bar ul#main-nav li:hover ul {
    display: block;
    position: absolute; }
    #menu-bar ul#main-nav li:hover ul li a {
    display:block;
    background:#12aeef;
    color:#ffffff;
    width: 110px;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
    border-right: none; }
    #menu-bar ul#main-nav li:hover ul li a:hover {
    background:#6dc7ec;
    color:#fff; }

    I honestly cannot find where I have gone wrong ! (I’m an amateur ;) )

    Thanks in advance (:

    # July 22, 2010 at 9:28 pm

    That is a LOT of navigation stuff going on. It’s much easier to find the problem if there’s a link to the site.

    # July 23, 2010 at 6:24 am
    "noahgelman" wrote:
    It’s much easier to find the problem if there’s a link to the site.

    Ok thanks noahgelman, the site is currently hosted at http://newblog.eu5.org while in testing. If you need anything else just post it here (:

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".