This really is pretty specific, but I am wishing someone could have a look.

I've got a Video theme (from Press75) and added a pleasant drop lower menu underneath the logo design area.

I replicated the appropriate code and CSS (with a few tweaks) towards the theme, and delay pills work great in FF, Chrome, IE9. It doesn't operate in IE8 or 7.

Edit: Sorry for insufficient explanation. By not work, it simply shows recption menus like a unstyled list, heading down the page and pushing aside below content. Things I want is really a horizontal, styled menu because it seems in Twenty Eleven theme. It really works fine in everything but IE 7 and 8.

If there's anybody with a few CSS understanding who could take a look, I'd be way appreciative. I am stumped and been focusing on it for hrs. Can't get the aid of Press75 without pricey custom remaking.

Thanks.

Here's the URL: http://www.psychetruth.net

Here's the CSS code presently being used for that menu:

/************ MENU **************/

#access {
    background: #ececec; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#ececec, #cccccc);
    background: -o-linear-gradient(#ececec, #cccccc);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ececec), to(#cccccc)); /* older webkit syntax */
    background: -webkit-linear-gradient(#ececec, #cccccc);

    clear: both;
    display: block;
    float: left;
    margin: 0 auto 0;
    width: 100%;
}

#access ul {
        font: 14px/16px Times New Roman,Georgia,serif;
        letter-spacing: 0.5px;
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

#access li {
    float: left;
    position: relative;
    }

#access a {
    color: #333;
    display: block;
    line-height: 3em;
    padding: 0 1.2125em;
    text-decoration: none;
    border-right: 1px solid #BBBBBB;
}

#access ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3em;
    left: 0;
    width: 188px;
    z-index: 99999;
}

#access ul ul ul {
    left: 100%;
    top: 0;
}

#access ul ul a {
    background: #E6E6E6;
    border-bottom: 1px dotted #ddd;
    color: #444;
    font-size: 13px;
    font-weight: normal;
    height: auto;
    line-height: 1.4em;
    padding: 10px 10px;
    width: 168px;
}


#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
    background: #f9f9f9; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    color: #373737;
}

#access ul li:hover > ul {
    display: block;
}

#access .current_page_item > a,
#access .current_page_ancestor > a {
    font-weight: bold;
}

WordPress Twenty Eleven is definitely an HTML5 theme, and uses the HTML5 <nav> element because of its menu. This won't be recognised as a styleable element by older versions of IE, which explains why your styling is not working. Ie versions below IE9 just will not "see" it.

WordPress Twenty Eleven features a Javascript file known as html5.js, that is Remy Sharp's HTML5-enabling "shiv" to repair this up.

For your site to operate correctly, you will need to do 1 of 2 things:

  1. (My recommendation) Educate yourself on HTML5 which "shiv", improve your DOCTYPE towards the HTML5 doctype (necessary if you are likely to be correctly suitable for the brand new elements like <nav>), and add the shiv script, or:
  2. (Simpler, but you'll learn less) Alter the <nav> element to some <div> making any necessary fixes towards the CSS to complement. Through the looks from it, all you will need to do is change <nav id="access" role="navigation"> to <div id="access" role="navigation"> (and also the closing tag to complement, obviously!) because the CSS targets by ID instead of element title.

You might find other areas from the Twenty Eleven code you've snapped up incompatible together with your current DOCTYPE anything you do, it can't hurt to validate your HTML later on.