1. 首頁
  2. 問答
  3. 隱藏在幻燈片背後的下拉菜單

隱藏在幻燈片背後的下拉菜單

2014-09-12 70 views
0

我有一個與精益滑塊背後的下拉菜單相關的問題。請幫我解決這個問題。我在這裏粘貼html和css代碼，看看哪裏出了問題。隱藏在幻燈片背後的下拉菜單

I have tried to change z-index, but nothing changed. 

HTML: 

    <pre><div id='cssmenu'> 
<ul> 
    <li class='has-sub'><a href='#'>About us</a> 
     <ul> 
     <li><a href="#">Submenu</a></li> 
     <li><a href="#">Submenu</a></li> 
     <li><a href="#">Submenu</a></li> 
     <li><a href="#">Submenu</a></li> 
     <li><a href="#">Submenu</a></li> 
     </ul> 
    </li> 

    <li class='has-sub'><a href='#'>Programs</a> 
     <ul> 
     <li><a href="#">Submenu</a></li> 
     <li class='has-sub'><a href='#'>Submenu</a> 
      <ul> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Submenu</a></li> 
     </ul> 
    </li> 

    <li><a href="#">News</a></li>  
    <li><a href="#">Network</a></li> 
    <li><a href="#">Press</a></li> 
    <li class='last'><a href="#">Contact us</a></li> 
</ul> 
</div><code> 




I am also pasting CSS code here. 

    <pre>#cssmenu { 
    position: relative; 
    height: auto; 
    background: #2b2f3a; 
    width: auto; 
} 
#cssmenu ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    line-height: 1; 
} 
#cssmenu > ul { 
    position: relative; 
    display: block; 
    background: #fff; 
    width: 100%; 
    z-index: 500; 
} 
#cssmenu:after, 
#cssmenu > ul:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
#cssmenu.align-right > ul > li { 
    float: right; 
} 
#cssmenu.align-center ul { 
    text-align: center; 
} 
#cssmenu.align-center ul ul { 
    text-align: left; 
} 
#cssmenu > ul > li { 
    display: inline-block; 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 
#cssmenu > ul > #menu-button { 
    display: none; 
} 
#cssmenu ul li a { 
    display: block; 
    font-family: Helvetica, sans-serif; 
    text-decoration: none; 
} 
#cssmenu > ul > li > a { 
    font-size: 12px; 
    font-weight: bold; 
    padding: 17px 12px; 
    color: #559c00; 
    text-transform: uppercase; 
    -webkit-transition: color 0.25s ease-out; 
    -moz-transition: color 0.25s ease-out; 
    -ms-transition: color 0.25s ease-out; 
    -o-transition: color 0.25s ease-out; 
    transition: color 0.25s ease-out; 
} 
#cssmenu > ul > li.has-sub > a { 
    padding-right: 32px; 
} 
#cssmenu > ul > li:hover > a { 
    color: #72cc00; 
} 
#cssmenu li.has-sub::after { 
    display: block; 
    content: ""; 
    position: absolute; 
    width: 0; 
    height: 0; 
} 
#cssmenu > ul > li.has-sub::after { 
    right: 15px; 
    top: 20px; 
    border: 5px solid transparent; 
    border-top-color: #559c00; 
} 
#cssmenu > ul > li:hover::after { 
    border-top-color: #ffffff; 
} 
#indicatorContainer { 
    position: absolute; 
    height: 12px; 
    width: 100%; 
    bottom: 0px; 
    overflow: hidden; 
    z-index: -1; 
} 
#pIndicator { 
    position: absolute; 
    height: 0; 
    width: 100%; 
    border: 12px solid transparent; 
    border-top-color: #2b2f3a; 
    z-index: -2; 
    -webkit-transition: left .25s ease; 
    -moz-transition: left .25s ease; 
    -ms-transition: left .25s ease; 
    -o-transition: left .25s ease; 
    transition: left .25s ease; 
} 
#cIndicator { 
    position: absolute; 
    height: 0; 
    width: 100%; 
    border: 12px solid transparent; 
    border-top-color: #2b2f3a; 
    top: -12px; 
    right: 100%; 
    z-index: -2; 
} 
#cssmenu ul ul { 
    position: absolute; 
    left: -9999px; 
    top: 70px; 
    opacity: 0; 
    -webkit-transition: opacity .3s ease, top .25s ease; 
    -moz-transition: opacity .3s ease, top .25s ease; 
    -ms-transition: opacity .3s ease, top .25s ease; 
    -o-transition: opacity .3s ease, top .25s ease; 
    transition: opacity .3s ease, top .25s ease; 
    z-index: 1000; 
} 
#cssmenu ul ul ul { 
    top: 37px; 
    padding-left: 5px; 
} 
#cssmenu ul ul li { 
    position: relative; 
} 
#cssmenu > ul > li:hover > ul { 
    left: auto; 
    top: 44px; 
    opacity: 1; 
} 
#cssmenu.align-right > ul > li:hover > ul { 
    left: auto; 
    right: 0; 
    opacity: 1; 
} 
#cssmenu ul ul li:hover > ul { 
    left: 210px; 
    top: 0; 
    opacity: 1; 
} 
#cssmenu.align-right ul ul li:hover > ul { 
    left: auto; 
    right: 170px; 
    top: 0; 
    opacity: 1; 
    padding-right: 5px; 
} 
#cssmenu ul ul li a { 
    width: 170px; 
    margin-right: 3px; 

    border-bottom: 1px solid #eeeeee; 
    padding: 10px 20px; 
    font-size: 12px; 
    color: #559c00; 
    font-weight:bold; 
    background: #fff; 
    -webkit-transition: all .35s ease; 
    -moz-transition: all .35s ease; 
    -ms-transition: all .35s ease; 
    -o-transition: all .35s ease; 
    transition: all .35s ease; 


    box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/ 
    -webkit-box-shadow: 1px 1px 5px #818181; 
    -moz-box-shadow: 3px 3px 8px #818181; 
} 
#cssmenu.align-right ul ul li a { 
    text-align: right; 
} 
#cssmenu ul ul li:hover > a { 
    background: #fff; 
    color: #72cc00; 
} 
#cssmenu ul ul li:last-child > a, 
#cssmenu ul ul li.last > a { 
} 
#cssmenu > ul > li > ul::after { 
    content: ''; 
    border: 6px solid transparent; 
    width: 0; 
    height: 0; 
    border-bottom-color: #559c00; 
    position: absolute; 
    top: -12px; 
    left: 30px; 
} 
#cssmenu.align-right > ul > li > ul::after { 
    left: auto; 
    right: 30px; 
} 
#cssmenu ul ul li.has-sub::after { 
    border: 5px solid transparent; 
    border-left-color: #9ea2a5; 
    right: 10px; 
    top: 12px; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease; 
} 
#cssmenu.align-right ul ul li.has-sub::after { 
    border-left-color: transparent; 
    border-right-color: #9ea2a5; 
    right: auto; 
    left: 10px; 
} 
#cssmenu ul ul li.has-sub:hover::after { 
    border-left-color: #ffffff; 
    right: -5px; 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
#cssmenu.align-right ul ul li.has-sub:hover::after { 
    border-right-color: #ffffff; 
    border-left-color: transparent; 
    left: -5px; 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { 
    #cssmenu { 
    width: auto; 
    } 
    #cssmenu.align-center ul { 
    text-align: left; 
    } 
    #cssmenu.align-right > ul > li { 
    float: none; 
    } 
    #cssmenu ul { 
    width: auto; 
    } 
    #cssmenu .submenuArrow, 
    #cssmenu #indicatorContainer { 
    display: none; 
    } 
    #cssmenu > ul { 
    height: auto; 
    display: block; 
    } 
    #cssmenu > ul > li { 
    float: none; 
    } 
    #cssmenu li, 
    #cssmenu > ul > li { 
    display: none; 
    } 
    #cssmenu ul ul, 
    #cssmenu ul ul ul, 
    #cssmenu ul > li:hover > ul, 
    #cssmenu ul ul > li:hover > ul, 
    #cssmenu.align-right ul ul, 
    #cssmenu.align-right ul ul ul, 
    #cssmenu.align-right ul > li:hover > ul, 
    #cssmenu.align-right ul ul > li:hover > ul { 
    position: relative; 
    left: auto; 
    top: auto; 
    opacity: 1; 
    padding-left: 0; 
    padding-right: 0; 
    right: auto; 
    } 
    #cssmenu ul .has-sub::after { 
    display: none; 
    } 
    #cssmenu ul li a { 
    padding: 12px 20px; 
    } 
    #cssmenu ul ul li a { 
    border: 0; 
    background: none; 
    width: auto; 
    padding: 8px 35px; 
    } 
    #cssmenu.align-right ul ul li a { 
    text-align: left; 
    } 
    #cssmenu ul ul li:hover > a { 
    background: none; 
    color: #8c9195; 
    } 
    #cssmenu ul ul ul a { 
    padding: 8px 50px; 
    } 
    #cssmenu ul ul ul ul a { 
    padding: 8px 65px; 
    } 
    #cssmenu ul ul ul ul ul a { 
    padding: 8px 80px; 
    } 
    #cssmenu ul ul ul ul ul ul a { 
    padding: 8px 95px; 
    } 
    #cssmenu > ul > #menu-button { 
    display: block; 
    cursor: pointer; 
    } 
    #cssmenu #menu-button > a { 
    padding: 14px 20px; 
    } 
    #cssmenu ul.open li, 
    #cssmenu > ul.open > li { 
    display: block; 
    } 
    #cssmenu > ul.open > li#menu-button > a { 
    color: #fff; 
    border-bottom: 1px solid rgba(150, 150, 150, 0.1); 
    } 
    #cssmenu ul ul::after { 
    display: none; 
    } 
    #cssmenu #menu-button::after { 
    display: block; 
    content: ''; 
    position: absolute; 
    height: 3px; 
    width: 22px; 
    border-top: 2px solid #559c00; 
    border-bottom: 2px solid #559c00; 
    right: 20px; 
    top: 15px; 
    } 
    #cssmenu #menu-button::before { 
    display: block; 
    content: ''; 
    position: absolute; 
    height: 3px; 
    width: 22px; 
    border-top: 2px solid #559c00; 
    right: 20px; 
    top: 25px; 
    } 
    #cssmenu ul.open #menu-button::after, 
    #cssmenu ul.open #menu-button::before { 
    border-color: #fff; 
    } 
} 
<code>

如果你能幫我解決這個問題，我會很高興。提前致謝。

來源

2014-09-12 Elvin Mammadov

+0

我在這裏粘貼網站的網址，你可以直觀地看到。 http://www.jaazerbaijan.org/ – 2014-09-12 11:38:11

+0

你能告訴我我在哪裏創建一個小提琴嗎？ – 2014-09-12 11:46:09

回答

1

您已將overflow:hidden應用於wrapper課程。出於這個原因，它隱藏了子菜單。在你的CSS中添加下面的樣式，希望它能解決這個問題。

header > div.wrapper:first-child 
{ 
    overflow:visible !important; 
}

注意：您可以嘗試沒有!important關鍵字，如果它不能正常工作，然後應用它像上面。因爲我不確定你寫的CSS的順序。

來源

2014-09-12 11:46:56

+0

現在它工作完美。非常感謝您的幫助。 – 2014-09-12 11:57:58

+0

如果此答案有助於使用刻度標記接受它，以便它可以幫助其他用戶。 – 2014-09-12 12:01:50

相關問題

 相關問題