如何使滑塊下拉菜單infront

Question

嗨，我有我的索引頁上的下拉菜單provlems下拉項目隱藏在我的圖像滑塊下面我的導航欄正下方，我想成爲能夠看到下拉菜單項，任何幫助將不勝感激 非常感謝你;

這裏是我的導航欄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; 
} 

無論其我不能看到DIV ID =「導航「在你的HTML！如果你剛剛不是在你的代碼段包括它，那很好，但如果這也是一個錯誤，你的意思是說CSS分配給DIV CLASS =「導航」，然後嘗試改變這種整體塊：

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

最後要記住的一點是，將z-index分配給還有位置集的元素（無論是相對還是絕對等） - 就我所知，z-index不起作用，除非塊具有位置屬性也設置爲它。

希望這對你有用。