html - 如何将下拉菜单放在 slider 前面

Question

嗨，我的索引页面上的下拉菜单有问题，下拉元素隐藏在我的图像 slider 下方，它位于我的导航栏正下方，我希望能够看到下拉菜单元素，任何帮助将不胜感激 非常感谢；

这是我的导航栏 html:

<div class="nav">
      <ul>
        <li class="home"><a href="#">Home</a></li>


        <li class=""><a href="#">sports news</a>
          <ul>
            <li><a href="#">headlines</a></li>

             <li><a href="#">when an where</a></li>
             <li><a href="">rewind</a></li>
             <li><a href="">manager of the week </a></li>
          </ul>
        </li>
        <li class="about"><a class="active" href="#">music</a></li>
        <li class="news"><a href="#">events</a>
          <ul>
            <li><a href="#">News #1</a></li>
            <li><a href="#">News #2@@@</a></li>
            <li><a href="#">News #3</a></li>
          </ul>
        </li>
        <li class="contact"><a href="#">events</a></li>
        <li class="contact"><a href="#">gallery</a></li>
        <li class="contact"><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="cleaner"></div>

这是我的 CSS:

/*
jmc
*/

body {
    margin: 0px;
    padding: 0px;
    color: #4d4638;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    line-height: 1.7em; 
    background: url(images/tooplate_body.jpg);
    background-color: #c2b8a1;
    background-repeat: repeat-x;
    background-position: top    
}

a, a:link, a:visited { color: #000; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }

.orange {
    color: #FC0;
}

.green {
    color: #CF6;
}

p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
em { color: #000; font-weight: bold; font-style: normal }

h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 20px 0; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0; }
h3 { font-size: 24px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0;  }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }

.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }

a.more { 
    clear: both; 
    display: block; 
    width: 87px; 
    height: 31px; 
    padding-right: 15px; 
    line-height: 30px; 
    text-align: center; 
    color: #000; 
    font-weight: bold; 
    background: url(images/tooplate_btn.png); 
}

a.more:hover { 
    text-decoration: none; 
    color: #960; 
}

.float_l { float: left }
.float_r { float: right }

.tooplate_margin { margin: 10px; }

.image_wrapper { 
    display: inline-block; 
    border: 1px solid #cac2b1; 
    background: #b5ac98; 
    padding: 4px; 
    margin-bottom: 5px; 
}

.image_fl { 
    float: left; 
    margin: 3px 15px 0 0; 
}

.image_fr { 
    float: right; 
    margin: 3px 0 0 15px; 
}

.tooplate_list { 
    margin: 20px 0 20px 20px; 
    padding: 0; 
    list-style: none; 
}

.tooplate_list li { 
    color:#000; 
    margin: 0 0 5px 0; 
    padding: 0 0 0 25px; 
    background: url(images/tooplate_list.png) no-repeat scroll 0 5px;  
}

.tooplate_list li a { 
    color: #000; 
    font-weight: normal; 
}

.tooplate_list li a:hover { 
    text-decoration: underline; 
}

#tooplate_header {
    width: 960px;
    padding: 10px 0;
    margin: 0 auto;
}

#site_title { 
    float: left; 
}

#site_title h1 { 
    margin: 30px 0 0 0; 
    padding: 0; 
}

#site_title h1 a { 
    display: block; 
    width: 278px; 
    height: 50px; 
    color: #fff; 
    text-indent: -10000px; 
    background: url(images/tooplate_logo.png) no-repeat; 
}

/* menu */
#tooplate_menu {
    float: right;
    width: 632px;
    height: 48px;
    margin-top: 40px;
    background: url(images/tooplate_menu.png)
}

#tooplate_menu ul {
    width: 600px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

#tooplate_menu ul li {
    float: left;
    display: block;
    padding: 0;
    margin: 0;
    display: inline;
    text-align: center;
}

#tooplate_menu ul li a {
    display: block;
    width: 116px;
    padding: 9px 4px 9px 0;
    margin: 0;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    color: #000000; 
    text-shadow: 1px 1px 1px #cec8ba;
    font-weight: normal;
    outline: none;
    border: none;
    background: url(images/tooplate_menu_divider.png) center right no-repeat
}

#tooplate_menu ul li a:hover, #tooplate_menu ul li .current { 
    color: #fff; 
    text-shadow: 1px 1px 1px #3d3728;  
}

#tooplate_menu ul .last { 
    background: none; 
}

#search_box { 
    float: right; 
    margin: 12px 0 0 0; 
    width: 170px; 
    height: 27px; 
    background: url(images/tooplate_search.png) no-repeat; 
}

#search_box form { 
    clear: both; 
    width: 170px; 
    height: 26px; 
    padding: 0; 
    margin: 0; 
} 

#searchfield { 
    float: left; 
    display: block; 
    height: 16px; 
    width: 130px; 
    padding: 5px; 
    font-size: 12px; 
    color: #ccc; 
    line-height: 0; 
    background: none; 
    border: none; 
} 

#searchbutton { 
    float: right; 
    display: block; 
    height: 26px; 
    width: 30px; 
    padding: 0; 
    margin: 0; 
    cursor: pointer;
    background: none; 
    border: none; 
}

/* end of menu */

/* slider */

#tooplate_middle { 
    clear: both;
    width: 940px;
    height: 307px;
    padding: 10px 40px;
    margin: 0 auto;
    background: url(images/tooplate_middle_home.png) no-repeat
}

#tooplate_middle_subpage { 
    clear: both;
    width: 820px;
    height: 207px;
    padding: 60px 100px;
    margin: 0 auto;
    font-family: Georgia, "Times New Roman", Times, serif;
    background: url(images/tooplate_middle_subpage.png) no-repeat;
}

#tooplate_middle_subpage h2 { 
    font-size: 48px; 
    color: #000; 
}

#tooplate_middle_subpage p { 
    font-size: 18px; 
    color: #000; 
    line-height: 30px; 
}

#tooplate_middle_subpage a { 
    color: #507921; 
    font-weight: normal; 
}

#slider {
    float: right;
    width: 940px;
    height: 300px; 
    overflow: hidden;
}

/* end of slider */

#tooplate_main {
    clear: both;
    width: 960px;
    padding: 30px 0;
    margin: 0 auto;
}

.col_w960 { width: 960px; margin-bottom: 40px }
.col_w600 { width: 600px }
.col_w450 { width: 450px }
.col_w300 { width: 300px }
.col_allw300 { width: 300px; float: left; margin-right: 30px }
.col_last { margin: 0 }
.col_w960_last { margin: 0; background: none; }
.col_last { margin: 0; }

.wwd_box { clear: both; margin-top: 20px; margin-bottom: 40px }
.wwd_box img { float: left; width: 80px; margin-right: 30px }
.wwd_box h3 { font-size: 16px; margin-bottom: 0 }
.wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
.wwd_box p { margin-bottom: 30px; }

.lp_box { float: left; width: 300px; margin-right: 30px }
.lp_box h6 { font-weight: bold; color: #507921 }
.lp_box_last { margin: 0 }
.lp_box img { border: 1px solid #CCC; padding: 4px }

#cp_contact_form { 
    margin: 10px;
    padding: 0; 
    width: 412px; 
}

#cp_contact_form form { 
    margin: 0px; 
    padding: 0px; 
}

#cp_contact_form form .input_field { 
    width: 400px; 
    padding: 10px;
    border: 1px solid #ccc;  
    background: #fff;
    color: #333;  
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    margin-top: 5px;
}

#cp_contact_form form label { 
    display: block; 
    width: 100px; 
    margin-right: 10px; 
    font-size: 14px; 
}

#cp_contact_form form textarea { 
    width: 400px; 
    height: 160px; 
    padding: 10px; 
    border: 1px solid #ccc;  
    background: #fff;
    color: #333;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    margin-top: 5px;
}

#cp_contact_form form .submit_btn { 
    margin: 5px 0px;
    padding: 5px 14px; 
    text-decoration: none; 
    border: 1px solid #ccc;  
    background: #fff;
    font-size: 14px;  
}

#map {
    margin: 10px;
}

#map img { 
    width: 300px; 
    height: 200px; 
    border: 1px solid #d9d3c5; 
    background: #b5ac98; 
    padding: 7px; 
    margin-bottom: 10px; 
}

.news_box { 
    clear: both; 
    margin-bottom: 30px; 
    padding-bottom: 30px; 
    border-bottom: 1px dashed #333; 
}

.news_box h2 { 
    font-size: 20px; 
    margin-bottom: 0; 
}

.news_box p.date { 
    color: #000; 
}

.news_box img { 
    float: left; 
    padding: 4px; 
    border: 1px solid #000; 
    margin-right: 30px; 
}

.news_box a.more { 
    clear:none; 
    float: right; 
}

.sb_lp_box { 
    clear: both; 
    margin-bottom: 20px; 
}

.sb_lp_box img { 
    border: 1px solid #cac2b1; 
    background: #b5ac98; 
    padding: 8px; 
    margin-bottom: 10px; 
}

.post_box { 
    clear: both; 
    margin-bottom: 30px; 
}

.post_box h2 { 
    font-size: 20px; 
    margin-bottom: 10px; 
}

.post_box p.post_meta { 
    margin-bottom: 0; 
}

.post_box p span.cat a { 
    color: #507921; 
    font-weight: 400; 
}

.post_box img { 
    width: 550px; 
    height: 160px; 
    border: 1px solid #cac2b1; 
    background: #b5ac98; 
    padding: 8px; 
    margin-bottom: 10px; 
}

.post_box a.more { 
    float: left; 
}

.lbe_box { 
    clear: both; 
    margin-bottom: 20px; 
}

.lbe_box h3 { 
    font-size: 16px; 
    margin-bottom: 0; 
}

.lbe_box h3 a { 
    color: #507921; 
    font-size: 16px; 
    font-weight: normal; 
}

.lbe_box h3 a span { 
    font-size: 12px; 
    color: #507921; 
}

.lbe_box p { 
    margin-bottom: 0; 
}

.lbe_box p.date { 
    font-size: 10px; 
    font-weight: 700; 
    color: #507921; 
}

#gallery { 
    margin: 0; 
    padding: 0; 
}

#gallery ul { 
    margin: 0; 
    padding: 0;
}

#gallery ul li { 
    display: block; 
    float: left; 
    width: 281px; 
    margin: 0 30px 30px 0; 
    padding: 8px; 
    border: 1px solid #d0c9b8; 
    background: #b6ac97; 
}

#gallery ul .third { 
    margin: 0 0 30px 0; 
}

#gallery ul li a img { 
    border: 1px solid #ccc; 
    margin-bottom: 5px; 
}

#tooplate_footer_wrapper {
    clear: both;
    width: 100%;
    background: #a19882;
    border-top: 10px solid #d0c8b4;
}

#tooplate_footer {
    width: 960px;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
    color: #000;
    background:  url(images/tooplate_footer.jpg) top center no-repeat
}

#tooplate_cr a { 
    color: #5fa008; 
    font-weight: normal;


}

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}

.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

/* Sub Menus */
.nav li li {
  font-size: .8em;
}

/*******************************************
   Style menu for larger screens

   Using 650px (130px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 650px) {
  .nav li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
    }


    #nav ul {
    z-index: 9999;
}

再次感谢；

Answer 1

从我提供的代码片段中可以看出，我最好的猜测是添加:

position:relative;

给你的:

#nav ul{
    z-index:9999;
}

但是 我在您的 html 中看不到 div id="nav"!如果您只是没有将它包含在您的代码片段中，那很好，但是如果这也是一个错误并且您打算将该 css 分配给 div class="nav"，那么请尝试将整个 block 更改为:

.nav ul{
    position:relative;
    z-index:9999;
}

最后要记住的一点是，将 z-index 分配给还设置了位置(相对或绝对等)的元素 - 据我所知，z-index 不起作用，除非该 block 具有position 属性也设置为它。

希望这对你有用。