1. 홈
  2. 질의 응답
  3. 슬라이드 쇼 뒤에 숨어있는 드롭 다운 메뉴

슬라이드 쇼 뒤에 숨어있는 드롭 다운 메뉴

2014-09-12 2 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

사이트 URL을 붙여서 시각적으로 볼 수 있습니다. http://www.jaazerbaijan.org/ –

+0

바이올린을 만들어야하는 곳을 알려주시겠습니까? –

답변

1

을 wrapper 클래스에 적용했습니다. 그런 이유로 그것은 부 메뉴를 숨기고 있습니다. CSS에 다음 스타일을 추가하십시오. 문제가 해결 될 것입니다.

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

참고 : 다음 위와 같이 적용 작동하지 않는 경우는, !important 키워드없이 시도 할 수 있습니다. 왜냐하면 나는 당신의 CSS 서면의 순서에 대해 확신하지 못하기 때문이다.

출처

2014-09-12 11:46:56

+0

이제 완벽하게 작동합니다. 도와 주셔서 대단히 감사합니다. –

+0

이 답을 사용하면 다른 사용자에게 도움이 될 수 있도록 눈금을 사용하여 친절하게 답변하는 데 도움이됩니다. –

관련 문제

 관련 문제