css - 来自居中菜单栏的全宽下拉 div

Question

我试图将我的菜单栏居中并显示一个下拉 div，该 div 始终占浏览器窗口的 100%，但我找到的解决方案使内容在页面右侧打开一个很大的空白。

我尝试了很多技巧，但都无济于事。

这是我的代码:

<div id="container">
        <ul class="nav">
            <li><a href="index.php">home</a></li> 

            <li>
                <a href="#">destinations</a>
                <div>    
                <div class="nav-column">                        
                    <h3>uk & ireland</h3>

                    <ul>
                        <li> <a href="#">England</a> </li>
                        <li> <a href="#">Ireland</a> </li>
                        <li> <a href="#">Scotland</a> </li>
                        <li> <a href="#">Wales</a> </li>
                    </ul>


                    <h3>mainland europe</h3>
                    <ul>
                        <li> <a href="#">Austria</a> </li>
                        <li> <a href="#">Belgium</a> </li>
                        <li> <a href="#">Bosnia & Herzegovina</a> </li>
                        <li> <a href="#">Bulgaria</a> </li>
                        <li> <a href="#">Croatia</a> </li>
                        <li> <a href="#">Czech Republic</a> </li>
                        <li> <a href="#">Denmark</a> </li>
                        <li> <a href="#">Estonia</a> </li>
                        <li> <a href="#">Finland</a> </li>
                        <li> <a href="#">France</a> </li>
                        <li> <a href="#">Germany</a> </li>
                        <li> <a href="#">Greece</a> </li>
                        <li> <a href="#">Hungary</a> </li>
                        <li> <a href="#">Italy</a> </li>
                        <li> <a href="#">Latvia</a> </li>
                        <li> <a href="#">Lithuania</a> </li>
                        <li> <a href="#">Luxembourg</a> </li>
                    </ul>
                </div>

                <div class="nav-column">
                    <h3>mainland europe cont...</h3>
                    <ul>                                                                                                               
                        <li> <a href="#">Macedonia</a> </li>
                        <li> <a href="#">Montenegro</a> </li>
                        <li> <a href="#">Norway</a> </li>
                        <li> <a href="#">Poland</a> </li>
                        <li> <a href="#">Portugal</a> </li>
                        <li> <a href="#">Roménia</a> </li>
                        <li> <a href="#">Russia</a> </li>
                        <li> <a href="#">Serbia</a> </li>
                        <li> <a href="#">Slovakia</a> </li>
                        <li> <a href="#">Slovenia</a> </li>
                        <li> <a href="#">Spain</a> </li>
                        <li> <a href="#">Sweden</a> </li>
                        <li> <a href="#">Switzerland</a> </li>
                        <li> <a href="#">The Netherlands</a> </li>
                        <li> <a href="#">Turkey</a> </li>
                        <li> <a href="#">Ukraine</a> </li>
                    </ul>
                </div>

                     <div class="nav-column">
                    <h3>north america</h3>
                    <ul>
                        <li> <a href="#">Alaska</a> </li>
                        <li> <a href="#">Canada</a> </li>
                        <li> <a href="#">Mexico</a> </li>
                        <li> <a href="#">United States</a> </li>
                    </ul>                     

                    <h3>central america</h3>
                    <ul>
                        <li> <a href="#">Guatemala</a> </li>
                        <li> <a href="#">Costa Rica</a> </li>
                        <li> <a href="#">Cuba</a> </li>
                        <li> <a href="#">Panama</a> </li>
                        <li> <a href="#">St Kitts and Nevis</a> </li>
                    </ul>                 

                    <h3>south america</h3>
                    <ul>
                        <li> <a href="#">Argentina</a> </li>
                        <li> <a href="#">Brazil</a> </li>
                        <li> <a href="#">Bolívia</a></li>
                        <li> <a href="#">Chile</a> </li>
                        <li> <a href="#">Colombia</a></li>
                        <li> <a href="#">Ecuador</a></li>
                        <li> <a href="#">Paraguay</a></li>
                        <li> <a href="#">Peru</a></li>
                        <li> <a href="#">Uruguay</a></li>
                        <li> <a href="#">Venezuela</a></li>
                    </ul>
                </div> 

                <div class="nav-column">
                    <h3>africa</h3>
                    <ul>
                        <li> <a href="#">Egypt</a></li>
                        <li> <a href="#">Morocco</a> </li>                                                        
                        <li> <a href="#">Namibia</a></li>                            
                        <li> <a href="#">South Africa</a></li>
                        <li> <a href="#">Tunisia</a> </li>
                        <li> <a href="#">Tanzania</a></li>
                        <li> <a href="#">Zambia</a></li>
                    </ul>                        
                </div>

                  <div class="nav-column">
                     <h3>asia</h3>
                    <ul>
                        <li> <a href="#">Bangladesh</a></li>
                        <li> <a href="#">Cambodia</a></li>
                        <li> <a href="#">China</a></li>
                        <li> <a href="#">India</a> </li>
                        <li> <a href="#">Indonesia</a></li>
                        <li> <a href="#">Japan</a></li> 
                        <li> <a href="#">Laos</a></li>
                        <li> <a href="#">Myanmar</a></li>
                        <li> <a href="#">Nepal</a></li>
                        <li> <a href="#">Singapore</a></li>
                        <li> <a href="#">Thailand</a></li>
                        <li> <a href="#">Tanzania</a></li>
                        <li> <a href="#">Uzbekistan</a></li>
                        <li> <a href="#">Vietnam</a> </li>

                    </ul>                                 

                    <h3>oceania</h3>
                    <ul>
                        <li> <a href="#">Australia</a></li>
                        <li> <a href="#">New Zealand</a> </li>                                                        

                    </ul>
                </div>

                </div>   
            </li>

            <li><a href="#about">about</a></li>
            <li><a href="#contact">contact</a></li>
        </ul>         
</div>

还有 CSS:

#container {

display: inline-block;
text-align: center;
position: relative;
width: 100%;
}



.nav {

cursor: default;
display: inline-block; 
height: 150px;

margin: 0 auto;
left: 50%;
position: relative;
top: 50px;  
z-index: 500;
width: 100%;

-ms-flex-pack: center;
-ms-display: -ms-flexbox;
}

.nav,
.nav a,
.nav ul,
.nav li,
.nav div {
border: none;
padding: 0;
margin: 0;
outline: none;
}

.nav a {
text-decoration: none;
}

.nav li {
list-style: none;
}

.nav > li {

display: block;
float: left;
}

.nav > li > a {
border-right: 1px solid #d1a559;
display: block;
color: #d1a559;
font-family: Orator Std, IrisUPC, sans-serif;
font-size: 1.2em;
font-weight: 500;
height: 30px;
padding: 0 20px;
position: relative;
z-index: 510;

-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition:  all .3s ease;
}

.nav li:hover a {
background: #d1a559;
color: white;

} 

.nav > li > div {
border: 1px solid #d1a559;
display: inline-block;
color: black;
position: absolute;
top: 30px;
left: -50%;
width: 100%;
opacity: 0;
visibility: hidden;
overflow: hidden;
background: white;

-webkit-transition: all .3s ease .5s;
-moz-transition: all .3s ease .5s;
-o-transition: all .3s ease .5s;
-ms-transition: all .3s ease .5s;
transition: all .3s ease .5s;
}

.nav li:hover > div {
opacity: .7;
visibility: visible;
overflow: hidden;
}

.nav .nav-column {
background-color: white;
float: left;
text-align: left;
top: -30px;
padding: 2.5%;
position: relative;
width: 15%;
}

.nav .nav-column h3 {
color: #d1a559;
font-family: Orator Std, IrisUPC, sans-serif;
font-weight: 900;
margin: 20px 0 10px 0;
text-decoration: underline ;
}

.nav .nav-column li {
padding-left: 0;    
font-family: Palatino linotype, Rockwell;
}

.nav .nav-column li a {
background: white;
color: black;
display: block;

}

.nav .nav-column li a:hover {
background: #d1a559;
color: white;

-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-o-transition: all .1s ease;
-ms-transition: all .1s ease;
transition:  all .1s ease;
}

@media (max-width:1420px) {


.Thumbnails {
    float: none;
}
}

@media (max-width: 950px) {
.nav li:hover > div {
background-color: white;
opacity: 1;
}

.nav .nav-column {
position: relative;
width: 20%;
}

.nav .nav-column li {
list-style: none;
}
}

@media (max-width: 700px) {
.nav li:hover > div {
background-color: white;
left: 0;
opacity: 1;
width: 100%;
}

.nav .nav-column {
float: none;
}     
}

.colAbout {
  display: block;
  float: none;
}

.span_1_of_3 {
  width: 70%;
}

@media (max-width: 530px) {
.nav {
    display: none;
    text-align: left;
    height: 150px;
    top: 0;
    padding: 0;
    margin: 0;
    position: relative;
}    

.nav li {
float: none;
left: 0;
}

.nav li:hover > div {
opacity: 1;
top: 113px;
}    

.nav > li > a {
border-right: none;
display: block;
left: 0;    
}    

/*Div contendo responsive button*/     
#menu {
border: 1px solid #d1a559;
color: #d1a559;
cursor: pointer;
display: block;
font-size: 1.3em;
left: 0;
margin: 5%;
position: relative;
text-align: center;
z-index: 540;
width: 1.4em;
}

#container {
left: 0;
display: block;    
padding: 0;
position: relative;
width: 100%;
}

ul {
width: 100%;
list-style: none;
}
}

@media (min-width: 530px) {
#menu {
display: none;
}    
}

还有一个使用 jFiddle 的例子:

example Menu

Answer 1

把你的 .nav 改成这样:

.nav {
cursor: default;
display: inline-block; 
height: 150px;
margin:  auto;
-ms-flex-pack: center;
-ms-display: -ms-flexbox; }

位置属性给你带来了问题。使用“position: relative”时，元素相对于其正常位置定位。