如何将下拉项目列表保持在最顶层

Question

我有一个下拉菜单，如下所示：

<div class="container">             
<section class="main" >
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Location</span>
<ul class="dropdown">
<li><a href="http://www.google.com" rel="nofollow"><i class="icon-envelope icon-large"></i>Dubai</a></li>
<li><a href="#"><i class="icon-truck icon-large"></i>Sharjah</a></li>
<li><a href="#"><i class="icon-plane icon-large"></i>Ras Al Khema</a></li>
</ul>                        
</div> 
</div>  
</section>
</div>

这是我用来设置它的样式：

body {
font-family: 'Lato', 'Arial', sans-serif;
background: #ddd url(../images/bg.jpg);
font-weight: 300;
font-size: 15px;
color: #333;
-webkit-font-smoothing: antialiased;
overflow-y: scroll;
overflow-x: hidden;
}

a {
color: #555;
text-decoration: none;
}

.container {
width: 100%;
position: relative;
}

.clr {
clear: both;
padding: 0;
height: 0;
margin: 0;
}

.main {
width: 90%;
margin: 0 auto;
position: relative;
height:400px;
}

.container > header {
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: center;
}

.container > header h1 {
font-size: 30px;
line-height: 38px;
margin: 0;
position: relative;
font-weight: 300;
color: #666;
text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}

.container > header h2 {
font-size: 14px;
font-weight: 300;
margin: 0;
padding: 15px 0 5px 0;
color: #888;
font-family: Cambria, Georgia, serif;
font-style: italic;
text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
}
@import url('demo.css');
@import url('font-awesome.css');

/* GLOBALS */

*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}

::selection {
background: transparent; 
}

::-moz-selection {
background: transparent; 
}

.wrapper-demo {
margin: 60px 0 0 0;
*zoom: 1;
font-weight: 400;
}

.wrapper-demo:after {
clear: both;
content: "";
display: table;
}

.wrapper-dropdown-3 {
/* Size and position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px;

/* Styles */
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0,0,0,0.15);
box-shadow: 0 1px 1px rgba(50,50,50,0.1);
cursor: pointer;
outline: none;

/* Font settings */
font-weight: bold;
color: #8AA8BD;
}

.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 15px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}

.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 140%;
left: 0;
right: 0;

/* Styles */
background: white;
border-radius: inherit;
border: 1px solid rgba(0,0,0,0.17);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
list-style: none;

/* Hiding */
opacity: 0;
pointer-events: none;
}

.wrapper-dropdown-3 .dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;    
} 

.wrapper-dropdown-3 .dropdown:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0,0,0,0.1) transparent;    
}

.wrapper-dropdown-3 .dropdown li a {
display: block;
padding: 10px;
text-decoration: none;
color: #8aa8bd;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.wrapper-dropdown-3 .dropdown li i {
float: right;
color: inherit;
}

.wrapper-dropdown-3 .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}

.wrapper-dropdown-3 .dropdown li:last-of-type a {
border: none;
border-radius: 0 0 7px 7px;
}

/* Hover state */

.wrapper-dropdown-3 .dropdown li:hover a {
background: #f3f8f8;
}

/* Active state */

.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}

/* No CSS3 support */

.no-opacity       .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
display: block;
}

以下是解决此问题的图片。

Answer 1

您需要使用z-index将活动项目“推送”到“前端”。 您可以在“非活动”菜单项上设置较低的z-index，在菜单项的“活动”状态下设置较高的z-index。类似的东西：

.wrapper-dropdown-3 .dropdown {
 z-index: 1;
}    

/* Active state */

    .wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    }

这是一篇关于z-index的非常有用的文章： http://philipwalton.com/articles/what-no-one-told-you-about-z-index/