CSS試圖讓下拉，但菜單不斷破壞佈局

的頁面是在這裏：

的標籤是污染防治。

基本上發生了什麼事情是當您翻閱「污染預防」時，您將獲得「污染預防」鏈接，將導航欄中的內容向下放置10-20像素。

我需要「污染預防」保持不變，然後再翻轉，然後垂直下降。

這是一個WordPress的自定義網站。請幫忙！

這是我所有的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;}

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

來源

2011-07-22 Snow_Mac

這個CSS似乎做它很好。 http://www.csspivot.com/iqNMK

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

當然它遊移一些事情但是我相信你可以搞定。

來源

2011-07-22 06:21:17 Joonas

如何讓每一個人在一個新行上>？ –

http://www.csspivot.com/2uCe6我認爲這個（或類似的東西）是唯一合適的解決方案，就像你想要的一樣，你可以在保持當前位置的同時強制子菜單在一行中，但是會在右側創建額外的滾動。 – Joonas

閱讀不是我的東西..以爲你說「在一條線」..好吧..繼承人在每一個新的一線李http://www.csspivot.com/46Hlb – Joonas

正如我無法測試它在iPhone上，我認爲這是一個css位置的問題和/或z指數...

來源

2011-07-22 06:15:47 ChristopheCVB

CSS試圖讓下拉，但菜單不斷破壞佈局

回答

相關問題