Question

I’m trying to implement a drop down.

The page is here:

http://breteastman.com/

The tab is Pollution Prevention.

Basically what is happening is when you roll over “Pollution Prevention” you get the “Pollution Prevention” link to drop center, 10-20 px down with the nav elements inline.

I need the “Pollution Prevention” to remain the same where it is before you roll over and the drop down to go vertical.

This is a wordpress custom site. Pleas help!

Here is all of my CSS.

@import url('sidebar.css');


html, body {margin:0;padding:0;}

/* ***************** Body Styles ****************** */
html{
    background:url("images/background.jpg");
    font-family:arial;
}
body{
    background:url("images/contentArea.jpg") repeat-y;
    background-position:center;
    height:100%;
    font-family:arial;
}
#footer{
    text-align:center;
}
#header{
    background:url("images/header.jpg") no-repeat;
    height:284px;
}

/* padding top right bottom left; */
#newsArea > .grid_3 > p {padding:0 20px 0 20px;}
#newsArea > h1,h2,h3,h4,h5,h6 {padding-left:50px;}

/* ***************** Navigation ****************** */
.main{padding-top:2 0px;text-align:center;}
#menu-main-menu{margin-left:-30px;width:1092px;}
#menu-main-menu a:hover {color:pink;}
#menu-top-menu, #menu-main-menu{
    list-style:none;
    display:inline;
}
    .main {
        margin-top:20px;
    }
    ul#menu-top-menu{
        margin-left:37px;
    }
        ul#menu-top-menu li a{
            font-size:1.1em;
        }
    #menu-top-menu li {
        display:inline;
    }
    #menu-main-menu li{
        float:left; 
    }
    #menu-top-menu li, #menu-main-menu li{
        padding-left:5px;
        padding-right:5px;
        border-right:1px #fff solid;
    }
    .main{
        padding-top:-1000px;
    }
    #menu-top-menu li{
        background:url("images/topNavBorderRight.jpg") no-repeat; 
        background-position:right top;
        border:0;
        /* padding top right bottom left; */
        padding: 23px 27px 30px 0px;
        max-width:40px;
        margin-left:-5px;
    }
    #menu-top-menu li a {padding-right:10px;}


        #menu-top-menu li a, #menu-main-menu li a{
            color:#fff;
            font-size:1.2em;
            text-decoration:none;
        }
            #navigation li a:hover{
                color:#399edb;
                text-decoration:none;
            }


/* dropdowns */ 

/* Hiding the other chlidren */ 

ul#menu-main-menu li#menu-item-64:hover ul.sub-menu {float:left;display:block;}
ul#menu-main-menu li#menu-item-64:hover ul.sub-menu li a {background-color:#000;padding:5px;color:#fff;}
/*ul#menu-main-menu li#menu-item-64:hover ul.sub-menu li {float:none;}
 ul#menu-main-menu li#menu-item-64:hover > ul.sub-menu li.menu-item > ul.sub-menu > * {display:none;} */ 



/* ***************** Slider Area ****************** */
#contentArea{
    background:url("images/sliderArea.png") no-repeat;
    height:349px;
}
/* ***************** Body Area ****************** */
#newsArea{
    background:url("images/newsArea.png") no-repeat;
    height:446px;
    padding-top:20px;
}
#newsArea h1 
{
    color:#00688f;
}
.overLayImages{
    position:absolute;left:0px;top:0px;z-index:10;
}
.homeSlider{
    position:absolute;left:10px;top:15px;z-index:1;
}
.footer{
    margin-left:-35px;
    text-align:center;
    background:url("images/footerArea.jpg") no-repeat;
    width:1132px;
    height:290px;
}

/* 
    list-style: url("images/arrowIcon.png") inside;
*/
#contentArea *{color:#fff;}
#contentArea h1{text-align:left;padding-left:10px;text-transform:uppercase;}
#contentArea p{line-height:1.6em;padding-top:10px;padding-left:10px;}
#contentArea .details ul {line-height:2em;width:300px;list-style-type:none;}
/* padding top right bottom left; */
#contentArea .details ul li{background:url("images/arrowIcon.png") left center no-repeat;padding:10px 0px 10px 40px;}
#contentArea .details ul li:first-child {border-top:2px dotted #fff;}
#contentArea .details ul li {border-bottom:2px dotted #fff;font-size:1.2em;vertical-align:center;margin-bottom:10px;}

*{
    font-family:OfficSanBoo;
}

/* Sub pages */

    /* Default background */  
    #subpageImage {background:url("images/subpagePhoto/main.jpg") no-repeat;height:326px;}
    #subpageImage * {color:#fff;}
    #subpageImage ul li {display:inline;}
    #subpageImage .subText {height:290px;}

    /* tabs */ 

    ul#tabbedNavigation {background:url("images/tabbedNav/menuBG.jpg");float:right;margin-right:20px;padding:10px 0px 3px 0px;}
    /* padding top right bottom left; */
    ul#tabbedNavigation li {padding-top:11px;}
    ul#tabbedNavigation li {padding-bottom:33px;margin:0;background:url("images/tabbedNav/bgRight.jpg") no-repeat;background-position:right top;}
    ul#tabbedNavigation li a {padding-right:30px;}

    /* body styles */ 

    #bodyContent {background:url("images/bodyBackground.jpg") repeat-x;min-height:884px;}
    #bodyContent h1,h2,h3,h4,h5,h6 {padding:0;}
    .bodyContentPadding {padding:20px;}
    #bodyContent ol {width:520px;display:block;}
    #bodyContent ol li {display:inline;width:140px;display:block;}
    #sidebar {background:url("images/sidebarBG.jpg") repeat-x;height:884px;}

The jQuery

            $('#menu-main-menu li#menu-item-64').hover(
                function () {
                    //show its submenu
                    $('ul.sub-menu', this).slideDown(100);

                },
                function () {
                    //hide its submenu
                    $('ul.sub-menu', this).slideUp(100);        
                }
            );

Answer 1

This CSS seems to do it quite well. http://www.csspivot.com/iqNMK

.sub-menu { position: absolute; display: none; }

Of course it does shift some things around but im sure you can handle that.