CSSはドロップダウンしようとしていますが、メニューはレイアウトを破損し続けます

Question

私はドロップダウンを実装しようとしています。

ページはこちらです：

http://breteastman.com/

タブが汚染防止です。

"Pollution Prevention"をロールオーバーすると、ドロップエレメントの中心に10〜20ピクセル下の "Pollution Prevention"リンクが表示されます。

転倒する前と同じ位置を維持するためには「汚染予防」が必要です。

これはWordPressのカスタムサイトです。喜んで助けてください！

ここに私のCSSがあります。私はiPhone上でそれをテストすることはできませんように、私はこれはCSSの位置の問題および/またはZインデックスと思い

@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;} 

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

このCSSはあるようですそれはかなりうまい。 http://www.csspivot.com/iqNMK

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

もちろん、いくつかのことを周りにシフトしますが、あなたはそれを処理できると確信しています。

Answer 2

は...