css位置下拉菜单问题

时间:2013-03-13 12:50:43

标签: html css position

我有一个出现在横幅后面的菜单。我需要在横幅上展示它。

删除:

.ei-slider-large li{
  position: absolute;
}

它解决了这个问题,但横幅却无效。

以下是我的实施细节:

菜单:

<div id='cssmenu'>
    <ul>
        <li class='active'><a href='index.php'><span>Home</span></a></li>
        <li class='has-sub'><a href='#'><span>About Us</span></a>
            <ul>
                <li><a href="our_story.php"><span>Our Story</span></a></li>
                <li><a href="our_team.php"><span>Our Leadership Team</span></a></li>
                <li><a href="testimonials.php"><span>Testimonials</span></a></li>
            </ul>
        </li>
        <li class='has-sub '><a href='#'><span>Our Services</span></a>
            <ul>
                <li><a href='geopolitical.php'><span>Geo-Political Risk Management</span></a></li>
                <li><a href='security.php'><span>Security & Business Continuity</span></a></li>
                <li><a href='business.php'><span>Business Resiliency</span></a></li>
                <li><a href='integrity.php'><span>Integrity & Assurance</span></a></li>
            </ul>
        </li>
        <li class='has-sub '><a href='#'><span>Insights</span></a>
            <ul>
                <li><a href='alerts_ads.php'><span>Alerts & Advisories</span></a></li>
                <li><a href='research.php'><span>Research</span></a></li>
                <li><a href='news_events.php'><span>News & Events</span></a></li>
            </ul>
        </li>
        <li><a href='csr.php'><span>CSR</span></a></li>
        <li class='has-sub '><a href='#'><span>Contact Us</span></a>
            <ul>
                <li><a href='our_office.php'><span>Our Offices</span></a></li>
            </ul>
        </li>
    </ul>
</div>

菜单css:

        #cssmenu:after,
    #cssmenu ul:after {
      display: block;
      clear: both;
    }

    #cssmenu a {
      color: #333;
      display: inline-block;
      font-size: 15px;
      font-weight:bold;
      padding: 0 20px;
      margin-left:10px;
      margin-right:10px;
      text-decoration: none;
    border:1px solid #FFF;

     }
    #cssmenu a:hover {
      position: relative;
      top: 0;
    }
    #cssmenu ul {
      list-style: none;
    }
    #cssmenu > ul {

      width: 100%;
    }
    #cssmenu > ul > li {
      float: left;
      padding: 0 10px;
      position: relative;
    }
    #cssmenu > ul > li.active a {
      background: #FFF;
      border-radius: 4px 4px 0 0;
      -moz-border-radius: 4px 4px 0 0;
      -webkit-border-radius: 4px 4px 0 0;
      position: relative;
      color:#569C17;
      border:1px solid #CCC;
    }
    #cssmenu > ul > li.active a:hover {
      background: #FFF;
      border-radius: 4px 4px 0 0;
      -moz-border-radius: 4px 4px 0 0;
      -webkit-border-radius: 4px 4px 0 0;
      position: relative;
      color:#569C17;

    }
    #cssmenu > ul > li.has-sub-active > a {
    background: #FFF;
      border-radius: 4px 4px 0 0;
      -moz-border-radius: 4px 4px 0 0;
      -webkit-border-radius: 4px 4px 0 0;
      position: relative;
       display: block;
      color:#569C17;
      border:1px solid #CCC;
    }

    #cssmenu .has-sub-active:hover ul {
      display: block;
    }
    #cssmenu .has-sub-active a {
      display: block;
      position: relative;
    }
    #cssmenu .has-sub-active a:after {

    }
    #cssmenu .has-sub-active ul {
      background: #FFF;
      display: none;
      padding: 10px 0;
      position: absolute;
      left: 50%;
      top: 41px;
      margin-left: -70px;
      width: 200px;
      z-index: 1;
      border-bottom:1px solid #CCC;
      border-left:1px solid #CCC;
      border-right:1px solid #CCC;
    }
    #cssmenu .has-sub-active ul li:hover > a {
      background: #dddddd;
      color: #569C17;
      font-size:12px;
    }
    #cssmenu .has-sub-active ul a {
      line-height: 100%;
      padding: 8px 0;
      font-size:12px;
      color:#333;
    }

    #cssmenu > ul > li:hover > a {
      background: #FFF;
      border-radius: 4px 4px 0 0;
      -moz-border-radius: 4px 4px 0 0;
      -webkit-border-radius: 4px 4px 0 0;
      position: relative;
      color:#569C17;
      border-top:1px solid #CCC;
      border-left:1px solid #CCC;
      border-right:1px solid #CCC;

    }
    #cssmenu > ul > li a {
      line-height: 39px;
    }
    #cssmenu > ul > li a:hover {
    }
    #cssmenu .has-sub:hover ul {
      display: block;
    }
    #cssmenu .has-sub a {
      display: block;
      position: relative;
    }
    #cssmenu .has-sub a:after {

    }
    #cssmenu .has-sub ul {
      background: #FFF;
      display: none;
      padding: 10px 0;
      position: absolute;
      left: 50%;
      top: 41px;
      margin-left: -70px;
      width: 200px;
      z-index: 1;
      border-bottom:1px solid #CCC;
      border-left:1px solid #CCC;
      border-right:1px solid #CCC;
    }
    #cssmenu .has-sub ul li:hover > a {
      background: #dddddd;
      color: #569C17;
      font-size:12px;
    }
    #cssmenu .has-sub ul a {
      line-height: 100%;
      padding: 8px 0;
      font-size:12px;
      color:#333;
    }

横幅:

<div id="ei-slider" class="ei-slider">
    <ul class="ei-slider-large">
        <li> <img src="images/large/1.jpg" alt="image01" />
            <div class="ei-title">
                <h3>Geo-Political Risk Management</h3>
            </div>
        </li>
        <li> <a href="news_events.php"><img src="images/large/2.jpg" alt="image02" /></a>
            <div class="ei-title">
                <h3>Security & Business Continuity</h3>
            </div>
        </li>
        <li> <img src="images/large/3.jpg" alt="image03"/>
            <div class="ei-title">
                <h3>Business Resiliency</h3>
            </div>
        </li>
        <li> <img src="images/large/4.jpg" alt="image04"/>
            <div class="ei-title">
                <h3>Integrity & Assurance</h3>
            </div>
        </li>
    </ul><!-- ei-slider-large -->
    <ul class="ei-slider-thumbs">
        <li class="ei-slider-element">Current</li>
        <li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>
        <li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>
        <li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>
        <li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li>
    </ul>
    <!-- ei-slider-thumbs --> 
</div><!-- ei-slider -->

banner css:

        .ei-slider{
        position: relative;
        width: 100%;
        max-width: 1920px;
        height: 400px;
        margin: 0 auto;
    }
    .ei-slider-loading{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index:999;
        color: #fff;
        text-align: center;
        line-height: 400px;
    }
    .ei-slider-large{
        height: 100%;
        width: 100%;
        position:relative;
        overflow: hidden;
    }
    .ei-slider-large li{
        position: absolute;
        top: 0px;
        left: 0px;
        overflow: hidden;
        height: 100%;
        width: 100%;
    }
    .ei-slider-large li img{
        width: 100%;
    }
    .ei-title{
        position: absolute;
        right: 50%;
        margin-right: 13%;
        top: 30%;
    }
    .ei-title h2, .ei-title h3{
        text-align: right;
    }
    .ei-title h2{
        font-size: 40px;
        line-height: 50px;
        font-family: 'Playfair Display', serif;
        font-style: italic;
        color: #b5b5b5;
    }
    .ei-title h3{
        font-size: 30px;
        line-height: 70px;
        font-family: 'Open Sans Condensed', sans-serif;
        text-transform: uppercase;
        color: #000;
    }
    .ei-slider-thumbs{
        height: 13px;
        margin: 0 auto;
        position: relative;
    }
    .ei-slider-thumbs li{
        position: relative;
        float: left;
        height: 100%;
    }
    .ei-slider-thumbs li.ei-slider-element{
        top: 0px;
        left: 0px;
        position: absolute;
        height: 100%;
        z-index: 10;
        text-indent: -9000px;
        background: #000;
        background: rgba(0,0,0,0.9);
    }
    .ei-slider-thumbs li a{
        display: block;
        text-indent: -9000px;
        background: #666 ;
        width: 100%;
        height: 100%;
        cursor: pointer;
        -webkit-box-shadow: 
            0px 1px 1px 0px rgba(0,0,0,0.3), 
            0px 1px 0px 1px rgba(255,255,255,0.5);
        -moz-box-shadow: 
            0px 1px 1px 0px rgba(0,0,0,0.3), 
            0px 1px 0px 1px rgba(255,255,255,0.5);
        box-shadow: 
            0px 1px 1px 0px rgba(0,0,0,0.3), 
            0px 1px 0px 1px rgba(255,255,255,0.5);
        -webkit-transition: background 0.2s ease;
        -moz-transition: background 0.2s ease;
        -o-transition: background 0.2s ease;
        -ms-transition: background 0.2s ease;
        transition: background 0.2s ease;
    }
    .ei-slider-thumbs li a:hover{
        background-color: #f0f0f0;
    }
    .ei-slider-thumbs li img{
        position: absolute;
        bottom: 50px;
        opacity: 0;
        z-index: 999;
        max-width: 100%;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        -ms-transition: all 0.4s ease;
        transition: all 0.4s ease;
        -webkit-box-reflect: 
            below 0px -webkit-gradient(
                linear, 
                left top, 
                left bottom, 
                from(transparent), 
                color-stop(50%, transparent), 
                to(rgba(255,255,255,0.3))
                );
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    .ei-slider-thumbs li:hover img{
        opacity: 1;
        bottom: 13px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

1 个答案:

答案 0 :(得分:0)

问题在于你的z-index。

如您所见,您已经提供了#cssmenu .has-sub ul { z-index:1; }

您的.ei-slider-thumbs li img { z-index:999; }

尝试将菜单的z-index设置为9999或降低/删除滑块的z-index。