html - DropDown 菜单错误和 SlideShow

Question

这是下拉菜单和幻灯片的 HTML 代码:

<div class="bg">
        <div class="main">
            <header>
                <div class="row-2">
                    <nav>
                     <a href="./index.php"><img class="logo" src="http://aavirtual.net/images/aanewlogo1.png"></a>
                        <ul class="nav">
                          <li><a href="index.php">Home Page</a></li>
                          <li><a href="./index_public.php?page=about_us">Sobre nosotros</a>
                            <ul>
                            <li><a href="#nuevos">Nuevos</a></li>
                        <li><a href="#reacondicionados">Reacondicionados</a></li>
                        <li><a href="#cilindrados">Cilindrados a medida</a></li>
                        <li><a href="#compra">Compra de Tanques</a></li>
                        </ul>     </li>   
                        <li><a href="./index_public.php?page=pilots_public">Pilotos</a></li>
                          <li><a href="./index_public.php?page=fleet_public">Flota</a></li>
                          <li><a href="./index_public.php?page=contacts_form">Contacta</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="row-3">
                    <div class="slider-wrapper">
                        <div class="slider">
                          <ul class="items">
                            <li><img src="images/slider-img1.jpg" alt="">
                                <strong class="banner">
                                    <strong class="b1">Pasión por Volar</strong>
                                    <strong class="b2">Realismo</strong>
                                    <strong class="b3"></strong>
                                </strong>
                            </li>
                            <li><img src="images/slider-img2.jpg" alt="">
                                <strong class="banner">
                                    <strong class="b1">Pasión por Volar</strong>
                                    <strong class="b2">Realismo</strong>
                                    <strong class="b3"></strong>
                                </strong>
                            </li>
                            <li><img src="images/slider-img3.jpg" alt="">
                                <strong class="banner">
                                    <strong class="b1"></strong>
                                    <strong class="b2">Simulación</strong>
                                    <strong class="b3"></strong>
                                </strong>
                            </li>
                            <li><img src="images/slider-img4.jpg" alt="">
                                <strong class="banner">
                                    <strong class="b1"></strong>
                                    <strong class="b2">Operaciones realistas</strong>
                                    <strong class="b3"></strong>
                                </strong>
                            </li>
                          </ul>
                          <a class="prev" href="#">prev</a>
                          <a class="next" href="#">prev</a>
                        </div>
                    </div>
                </div>

            </header>

这是我所有的 CSS 代码:

/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {display:inline}
/* Global properties */
html {width:100%}
body {font-family:Myriad Web Pro, Arial;font-size:100%;color:#9d9d9d;min-width:936px;background:#FFF}
.ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
a {color:#00a9ff;outline:none}
a:hover {text-decoration:none}
.col-1, .col-2, .col-3, .col-4  {float:left}
.wrapper {width:100%;overflow:hidden;}
.wrapper2 {width:100%;overflow:hidden; margin-left:10%;}
.extra-wrap {overflow:hidden}
.bg {width:100%;}
.main {width:100%;padding:0;margin:0 auto;font-size:0.875em;line-height:1.285em}
p {margin-bottom:18px}
.p0 {margin-bottom:0px}
.p1 {margin-bottom:6px}
.p2 {margin-bottom:15px}
.p3 {margin-bottom:30px}
.p4 {margin-bottom:45px}
.p5 {margin-bottom:50px}
.reg {text-transform:uppercase}
.fleft {float:left}
.fright {float:right}
.alignright {text-align:right}
.aligncenter {text-align:center}
.title {margin-bottom:18px}
.it {font-style:italic}
.letter {letter-spacing:-1px}
.color-1 {color:#00a9ff}
.color-2 {color:#a2c902}
.color-3 {color:#fabb0c}
.color-4 {color:#0f0f0f}
/* boxes */
.margin-bot {margin-bottom:35px}
.spacing {margin-right:35px}
.indent {padding:0 0 0px 32px}
.indent2 {padding-top:10px}
.indent3 {padding-top:38px}
.indent4 {padding:26px 0 0px 32px}
.indent5 {padding-top:22px}
.indent-bot {margin-bottom:22px}
.indent-bot2 {margin-bottom:19px}
.indent-bot3 {margin-bottom:45px}
.img-indent-bot {margin-bottom:25px}
.img-indent {float:left;margin:0 10px 0px 0}
.img-indent2 {float:left;margin:0 15px 0px 0}
.img-indent3 {float:left;margin:0 20px 0px 0}
.img-indent4 {float:left;margin:0 28px 0px 0}
.img-indent-r {float:right;margin:4px 0px 0px 15px}
.prev-indent-bot {margin-bottom:10px}
.buttons a:hover {cursor:pointer}
.menu li a, .list-1 li a, .button-2, .logo {text-decoration:none}
/* header */
header {width:100%;margin-bottom:-16px;position:relative;z-index:1}
.row-1 {width:100%;height:113px;overflow:hidden;padding-top:24px}
.row-2 {width:100%;min-height:85px;position:relative;z-index:1}
.row-3 {width:100%;min-height:417px;position:relative;z-index:2}
h1 {font-family:calibri;padding:0px 0 0 40px;position:relative;float:left}
.logo {width:311px; display:block;text-indent:-5000px;margin:2px 0 30px 10%}
nav .logo {float: left;}
.slog {display:block;font-size:14px;line-height:1.2em;color:#8a8a8a;text-transform:uppercase;letter-spacing:-1px}
/* search-form */
#search-form {width:244px;min-height:39px;padding:20px;margin-right:19px;background:#000;border-radius:18px;-moz-border-radius:18px;-webkit-border-radius:18px;float:right}
.search-form {background:#fefefe;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;width:100%;overflow:hidden}
#search-form input {font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.214em;width:170px;padding:10px 18px 11px;margin:0;color:#9d9d9d;border:none;background:none;float:left}
#search-form a {display:block;width:38px;height:38px;text-indent:-5000px;background:url(../images/search-button.png) 9px 8px no-repeat #00a9ff;border-radius:0 8px 8px 0;-moz-border-radius:0 8px 8px 0;-webkit-border-radius:0 8px 8px 0;float:right}
#search-form a:hover {background-color:#aaa}
/* main menu */
.nav li a {background-color:#000; color:#fff;text-decoration:none;padding:10px 15px;display:block;}
.nav > li {float:left; }
.nav li a:hover {background-color:#4db4fa;}
.nav li ul {display:none; position:absolute; min-width:140px;z-index:99999;}
.nav li:hover > ul {display:block;}
.nav li ul li {position:relative;}
.nav li ul li ul {right:-140px;top:0px;}
.menu {width:100%}
.menu li {float:left; margin-right:1px}
.menu2 li {float:left;position:left;margin-left:2%; margin-right:1px}
.menu li.last-item {margin:0}
.menu li a {display:inline-block;width:100%;font-size:20px;padding:1px 15px 4px;margin-top:40px;color:#0078D2;background:#FFF;text-align:center;}
.menu li a.active, .menu li a:hover {color:#4db4fa;background:#FFF;padding:1px 15px 4px;margin-top:40px}
/* slider */
.slider-wrapper {overflow:hidden;width:1100px;position:absolute;top:-16px;left:5%;background:#fff;border-radius:0 18px 0 0;-moz-border-radius:0 18px 0 0;-webkit-border-radius:0 18px 0 0}
.slider {height:403px;width:90%;margin:10px auto}
.items {display:none}
.pagination {position:absolute;top:0;z-index:999}
.banner {width:400px;height:205px;position:absolute;top:92px;left:98px}
.prev {display:block;width:22px;height:37px;text-indent:-5000px;position:absolute;left:25px;top:183px;z-index:99;background:url(../images/slider-control.png) left top no-repeat}
.prev:hover {background-position:left bottom}
.next {display:block;width:22px;height:37px;text-indent:-5000px;position:absolute;right:22px;top:183px;z-index:99;background:url(../images/slider-control.png) right top no-repeat}
.next:hover {background-position:right bottom}
.b1 {font-family:calibri;color:#0f0f0f;font-size:50px;line-height:1.2em;display:block;letter-spacing:-3px}
.b2 {font-family:calibri;color:#00a9ff;font-size:80px;line-height:1.2em;display:block;text-transform:uppercase;letter-spacing:-4px;margin:-12px 0 13px -5px}
*+html .b2 {margin:-12px 0 5px -5px}
.b3 {font-family:calibri;color:#0f0f0f;font-size:17px;line-height:1.2em;display:block}
/* content */
#content {width:100%;padding:10px 0 40px;background:#fff;border-radius:18px 18px 0 0;-moz-border-radius:18px 18px 0 0;-webkit-border-radius:18px 18px 0 0;position:relative;z-index:2}
#content .padding {padding:24px 12px 0}
.spacer-1 {width:100%;background:url(../images/pic-1.gif) 217px 0 repeat-y}
h2 {font-family:calibri;font-size:39px;line-height:1.9em;color:#0f0f0f;margin-bottom:5px;letter-spacing:-2px}
h3 {font-family:calibri;font-size:30px;line-height:1.3em;margin-top:-5px;letter-spacing:-2px}
h3 strong {font-family:calibri;display:block;color:#fefefe;margin-bottom:-11px}
h4 {font-family:calibri;font-size:23px;line-height:1.2em;color:#fefefe;letter-spacing:-1px;margin-bottom:20px}
h5 {font-family:calibri;color:#0f0f0f;text-decoration:underline;font-weight:normal}
h6 {font-family:calibri;color:#0f0f0f;font-weight:normal;margin-bottom:5px}


.border_vam-bot {width:100%;padding-bottom:20px;background:url(../images/pic-1.gif) 0 bottom repeat-x}
.box_vam-bg {padding:33px;background:#e4e4e4}
.box_vam {width:100%;height:190px;background:url(../images/box.png) center 0 no-repeat #101010;}
.box_vam h3 {margin-top:-3px;margin-bottom:2px}
.box_vam .pad {padding:28px 35px}
.box_vam.first .button {background:url(../images/button1.png) left top no-repeat}
.box_vam.first .button:hover {background-position:left bottom}
.box_vam.second .button {background:url(../images/button2.png) left top no-repeat}
.box_vam.second .button:hover {background-position:left bottom}
.box_vam.third .button {background:url(../images/button3.png) left top no-repeat}
.box_vam.third .button:hover {background-position:left bottom}






.border-bot {width:100%;padding-bottom:20px;background:url(../images/pic-1.gif) 0 bottom repeat-x}
.box-bg {padding:33px;background:#FFF}
.box {width:100%;background:url(../images/box.png) center 0 no-repeat #101010;border-radius:19px;-moz-border-radius:19px;-webkit-border-radius:19px}
.box h3 {margin-top:-8px}
.box .pad {padding:28px 35px}
.box.first .button {background:url(../images/button1.png) left top no-repeat}
.box.first .button:hover {background-position:left bottom}
.box.first .numb {background:url(../images/numb-1.gif) 0 0 repeat-x #00a9ff}
.box.second .button {background:url(../images/button2.png) left top no-repeat}
.box.second .button:hover {background-position:left bottom}
.box.second .numb {background:url(../images/numb-2.gif) 0 0 repeat-x #a2c902}
.box.third .button {background:url(../images/button3.png) left top no-repeat}
.box.third .button:hover {background-position:left bottom}
.box.third .numb {background:url(../images/numb-3.gif) 0 0 repeat-x #fabb0c}
.numb {display:inline-block;padding:3px 7px 6px;font-size:40px;line-height:1.2em;letter-spacing:-2px;color:#fefefe;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px}
*+html .numb {padding:6px 7px 4px}
.block-news {padding:27px 33px 30px;border:1px solid #eaeaea;background:url(../images/block-news-tail.gif) 0 0 repeat-x #f9f9f9;}
.button {display:block;width:43px;height:43px;text-indent:-5000px}
.button-2 {display:inline-block;font-size:19px;line-height:1.21em;letter-spacing:-1px;color:#fefefe;padding:9px 20px 11px;background:url(../images/button-tail.gif) 0 0 repeat-x #3c3c3c;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px}
.button-2:hover {background:#3c3c3c}
.list-1 li {line-height:24px;padding-left:10px;background:url(../images/marker.gif) 0 10px no-repeat}
.list-1 li a {display:inline-block;color:#9d9d9d}
.list-1 li a:hover {text-decoration:underline}
.list-2 li {line-height:24px}
.link {color:#9d9d9d}
.link:hover {text-decoration:none} 
.link-1 {display:inline-block;font-size:14px;padding-right:8px;background:url(../images/marker-3.gif) right 8px no-repeat}
.link-1:hover {color:#fff} 
.text-1 {line-height:20px;margin:0} 
dl.address {line-height:24px;color:#9d9d9d}
dl.address span {float:left;width:74px;color:#fefefe}
dl.contact {line-height:20px;color:#9d9d9d}
dl.contact span {display:block;color:#0f0f0f}
dl.contact dt, dl.contact dd {margin-bottom:5px}
.tdate-1 {font-size:20px;line-height:1.2em;color:#0f0f0f;text-align:center;letter-spacing:-2px;margin:-8px 16px 0 0}
.tdate-1 strong {display:block;font-size:49px;line-height:1.2em;color:#00a9ff;margin-bottom:-10px}
.tdate-2 {float:left;color:#0f0f0f}
.news {padding-left:25px;background:url(../images/pic-1.gif) 0 0 no-repeat}
#contact-form {display:block}
#contact-form  label {display:block;height:30px;overflow:hidden}
#contact-form  input {float:left;width:526px;font-size:13px;line-height:1.23em;color:#0f0f0f;padding:4px 10px;margin:0;font-family:Arial, Helvetica, sans-serif;border:1px solid #ebebeb;background:none}
#contact-form textarea {height:262px;overflow:auto;float:left;width:526px;font-size:13px;line-height:1.23em;color:#0f0f0f;padding:4px 10px;margin:0;font-family:Arial, Helvetica, sans-serif;border:1px solid #ebebeb;background:none}
.text-form {float:left;display:block;font-size:14px;width:73px;line-height:1.78em;color:#0f0f0f}
.buttons {padding-top:16px;text-align:right}
.buttons a {margin-left:6px;padding:9px 25px 11px}
/* footer */
#header {font-size:12pt;color: #0078d2;font-family: Myriad Web Pro, Arial;display: block;width:100%;margin-bottom:15px;margin-top:10px;}
a.footer:hover {color: #4db4fa;}
a.footer  {color: #36495a;}
a {color: #0078d2;text-decoration: none;}
footer {width:100%;}
.row-top {width:100%;padding:33px 0 42px;background:#D0DAE0}
.row-padding {padding:0 62px}
.row-bot {width:100%;padding:35px 0;font-size:12px;line-height:20px}
.list-services li {line-height:24px;padding-left:28px}
.list-services li a {color:#9d9d9d;text-decoration:none}
.list-services li a:hover {text-decoration:underline}
.list-services li.item-1 {background:url(../images/facebook.png) 0 3px no-repeat}
.list-services li.item-2 {background:url(../images/twitter.png) 0 3px no-repeat}
.list-services li.item-3 {background:url(../images/linkedin.png) 0 3px no-repeat}
.footer-logo {display:block;color:#9d9d9d;font-size:60px;line-height:1.2em;text-transform:uppercase;letter-spacing:-3px;font-weight:400;margin-bottom:5px}
.footer-logo strong {color:#00a9ff;text-transform:none;display:inline-block}
.phone {display:inline-block;font-size:20px;line-height:1.2em;color:#9d9d9d;letter-spacing:-1px;padding-left:5px}
.phone strong {color:#fff}

* {
    font-family: calibri;
    font-size: 14px;
}
fieldset {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
ul {
    list-style: none;
}
li {
    position: relative;
}
textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -webkit-appearance: none;
  background-color: white;
  border: 1px solid;
  border-color: #d0dae0;
  color: #6e8999;
  display: inline-block;
  outline: 0;
  margin: 0;
  padding: 5px 9px 6px;
  text-align: left;
  font-size: 13px;
  width: 100%;
  font-family: Arial, sans-serif;
  vertical-align: middle;
}
.btn {
  background-color: #0078d2;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF4DB4FA', endColorstr='#FF0078D2');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4db4fa), color-stop(100%, #0078d2));
  background: -webkit-linear-gradient(#4db4fa, #0078d2);
  background: -moz-linear-gradient(#4db4fa, #0078d2);
  background: -o-linear-gradient(#4db4fa, #0078d2);
  background: -ms-linear-gradient(#4db4fa, #0078d2);
  background: linear-gradient(#4db4fa, #0078d2);
  border: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  color: white;
  display: inline-block;
  font-family: "AmericanSansMedium", Calibri, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-size: 1.083rem;
  height: 28px;
  margin: 4px 0;
  min-width: 13.2em;
  outline: 0;
  padding: 2px 6px 3px;
  text-align: center;
  text-shadow: 0 1px 0 #00467f;
  vertical-align: middle;
  -webkit-box-align: center;
}
}
[type=check], [type=radio], [type=submit] {
    cursor: pointer;
}
label {
    display: block;
}
[type=check] + label, [type=radio] + label {
    display: inline-block;
    cursor: pointer;
}
.validation-failed {
    border-color: #ff0000;
    background-color: #ffdddd;
}
.validation-advice {
    padding-bottom: 5px;
    font-weight: bold;
    color: #ff0000;
}
#myResult {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #0000ff;
    background-color: #ddddff;
}
#myResult:empty {
    border-width: 0;
    padding: 0;
}
.spinner {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #f0f0f0;
}
.overTxtLabel {
    color: #888888;
}

这是一个下拉菜单，但在它下面有一个幻灯片。下拉菜单没有出现在幻灯片中，所以我看不到所有下拉菜单。

我怎样才能看到所有的下拉菜单？？？我需要幻灯片和下拉菜单。我尝试使用 z-index，但我不知道为什么它不起作用。

Answer 1

您的 z-index 增加可能无效的原因可能是 CSS specificity .基本上是因为你严重依赖类，所以可能有其他选择器优先于类，因为它们更具体。即，它们是单元素引用。

例如，如果您创建一个 <div> ID mydiv并给它一类 myclass ，并且在 CSS 中，您为每个应用不同的背景颜色，最具体的选择器将由浏览器选择并应用其规则；在本例中是 ID(因为 ID 对于元素是唯一的，类不是)。

在您的情况下，您可以尝试使用 !important规则以增加特异性，但我 do not recommend doing this .尝试调整您的 CSS 规则，使它们更具体，例如:

li{z-index: 999;}

试试这个:

.some-class #some-id ul li{z-index: 999;}