Z- 색인이 작동하지 않습니다. div 뒤에있는 이미지

Question

CSS에 메뉴를 추가하려고하지만 작업중인 이미지가 div에서 떨어지고 있습니다. 나는 어떤 CSS 문제, 많은 노력했지만, 심지어 Z- 인덱스 효과가 없다고 생각, 나는 또한 이미지를 첨부하려고했지만 명성 문제, 이미지가 많이 설명합니다. 어쨌든, 문제는 M이

CSS를

ul.gelbuttonmenu{ 
    position:relative; 
    padding: 0; 
    margin: 0; 
    margin-bottom:1em; 
    text-align: center; /*set value to "left", "center", or "right"*/ 
    } 

ul.gelbuttonmenu li{ 
    display: inline; 
    z-index:10; 
    } 

ul.gelbuttonmenu li a{ 
    color: black; 
    font-weight:bold; 
    padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/ 
    margin-right: 20px; /*spacing between each menu link*/ 
    text-decoration: none; 
    z-index:10; 
    } 

ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/ 
    position:absolute; 
    width:0; 
    background:lightblue; 
    z-index:10; 
    background:url(gelbuttonleft.gif) top left no-repeat, url(gelbuttonright.gif) top right no-repeat, url(gelbuttoncenter.gif) top center repeat-x; 
    } 
body{} 
      .head{height:50px} 
      .foot{height:90px} 

      .wrap{width:80%;margin-left: 10%;background-color: #74e0ea; 
      text-align: center; 
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px; 
      -webkit-box-shadow: #666 0px 2px 50px; 
      -moz-box-shadow: #666 0px 2px 50px; 
      box-shadow: #666 0px 2px 50px; 
      background: #74E0EA; 
      background: -webkit-gradient(linear, 0 0, 0 bottom, from(#74E0EA), to(#CCF1F5)); 
      background: -webkit-linear-gradient(#74E0EA, #CCF1F5); 
      background: -moz-linear-gradient(#74E0EA, #CCF1F5); 
      background: -ms-linear-gradient(#74E0EA, #CCF1F5); 
      background: -o-linear-gradient(#74E0EA, #CCF1F5); 
      background: linear-gradient(#74E0EA, #CCF1F5); 
      } 

를 파이어 폭스 (19)를 사용하여, 간단한 들릴 수도 있지만 작동하지 않는 이유를 알고하지 않습니다

html로

</div> 
<div id="wrapper" class="wrap"> 
<div id="menu"> 
    <ul id="gooeymenu1" class="gelbuttonmenu"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">CSS Codes</a></li> 
    <li><a href="#">Forums</a></li> 
    <li><a href="#">Tools</a></li> 
    <li><a href="#">JavaScript</a></li> 
    <li><a href="#">CSS Gallery</a></li> 
    </ul> 
</div> 
</div> 
<div id="footer" class="foot"> 

</div> 

감사와 관련

Answer 1

당신은 아래의 코드로 간단한 CSS 메뉴를 사용할 수 있습니다 : 둘 다없는 요소

ul {list-style: none;padding: 0px;margin: 0px;} 
 
    ul li {display: block;position: relative;float: left;border:1px solid #000} 
 
    li ul {display: none;} 
 
    ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none; 
 
      white-space: nowrap;color: #fff;} 
 
    ul li a:hover {background: #f00;} 
 
    li:hover ul {display: block; position: absolute;} 
 
    li:hover li {float: none;} 
 
    li:hover a {background: #f00;} 
 
    li:hover li a:hover {background: #000;} 
 
    #drop-nav li ul li {border-top: 0px;}

<ul id="drop-nav"> 
 
    <li><a href="#">Support</a></li> 
 
    <li><a href="#">Web Design</a> 
 
    <ul> 
 
     <li><a href="#">HTML</a></li> 
 
     <li><a href="#">CSS</a></li> 
 
     <li><a href="#">JavaScript</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Content Management</a> 
 
    <ul> 
 
     <li><a href="#">Joomla</a></li> 
 
     <li><a href="#">Drupal</a></li> 
 
     <li><a href="#">WordPress</a></li> 
 
     <li><a href="#">Concrete 5</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    <ul> 
 
     <li><a href="#">General Inquiries</a></li> 
 
     <li><a href="#">Ask me a Question</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

분명히