Question

我正在尝试向css添加菜单，但其工作图像正在退回div。我觉得有些css问题，尝试了很多但是没有工作，甚至z-index都没有效果，我也尝试附加图片但声誉问题，图片说明了很多。无论如何，问题可能听起来很简单，但不知道为什么它不起作用，M使用firefox 19。

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

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>

z-index不工作，div后面的图像

1 个答案: