Question

我正在我的网站导航上构建一个大型菜单，但我的包含ul内容的div没有组织。如果你查看下面的小提琴，你可以看到“非洲”，“亚洲”，“大洋洲”都很遥远。

这些名单应该通过在“英国和爱尔兰”之下设置“大陆欧洲”来组织，然后它应该是“大陆欧洲大陆”然后低于“北美”等等......就像“目的地”一样“此网站上的菜单：https://www.greatrail.com/

当我减小浏览器的大小时，另一个问题与内容剪辑有关。如果你减少了jfiddle，你会注意到mega菜单溢出了幻灯片控件（中间是幻灯片，但我不会上传图像）。

<!DOCTYPE html>
<!--
 To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <title>Great Train Journeys</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-  scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script src="js/imgCarrousel.js" type="text/javascript"></script>
   </head>
   <body>

    <div id="container">
        <ul class="nav">
            <li><a href="#">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>
                </div>

                    <div class="nav-column" id="europe1">
                    <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>
                </div> 

                    <div class="nav-column">
                    <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>
                </div> 

                 <div class="nav-column">
                    <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" id="africa">
                    <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>
                        <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="#">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>oceania</h3>
                    <ul>
                        <li> <a href="#">Australia</a></li>
                        <li> <a href="#">New Zealand</a> </li>                                                        

                    </ul>
                </div>

                </div>   
            </li>

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


    <section id="galeria">
        <img class="slider fade" src="images/Flam Railway_small.jpg" alt=""/>
        <img class="slider fade" src="images/rocky-mountaineer.jpg" alt="" title="Rocky Mountaineer"/>
        <img class="slider fade" src="images/Hogwarts train.png" alt=""/>
        <img class="slider fade" src="images/amtrak-starlight_small.jpg" alt=""/>
        <img class="slider fade" src="images/hiram_bingham_720.jpg" alt=""/>
        <img class="slider fade" src="images/rovos rail.jpg" alt=""/>
        <img class="slider fade" src="images/Venice Simplon.jpg" alt=""/>
        <img class="slider fade" src="images/the ghan.jpg" alt=""/>

        <span id="prev">&laquo;</span>
        <span id="next">&raquo;</span>
    </section>      



</body>

body,html {
background-color: #F7F7F7;
display: block;
margin: 0;
padding: 0; 

width: 100%;
}

/* Estilos do slideshow de imagens */
#galeria {
display: block;
position:  relative;
z-index: 0;
width: 100%;
}

#galeria img {
display: none;
position: absolute;
width:  100%; 
height: auto;

}

/* Controlos do slideshow */
#next, #prev{

color: #fff;
position: absolute;
background: rgba(8,41,46, .8);
display: block;
top: 25%;
font-size: 1.5em;
opacity: .7;
margin-top: 20%;
}

@media  (max-width: 750px) {
#next,#prev {
  margin-top: 15%;  
}
}

#next:hover, #prev:hover{
cursor: pointer;
opacity: 1;
}

#next{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}

#prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1s;
    -moz-animation-name: fade;
    -moz-animation-duration: 1s;
    -ms-animation-name: fade;
    -ms-animation-duration: 1s;
    animation-name: fade;
    animation-duration: 1s;
    }

@-webkit-keyframes fade {
from {opacity: 0.4}
to   {opacity: 1}
    }

@-moz-keyframes fade {
from {opacity: 0.4}
to   {opacity: 1}
    }      

@keyframes fade {
from {opacity: 0.4}
to   {opacity: 1} 
    }

keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
    }


/* Estilos da navegação principal`*/  

#container {
align-items: center;
justify-content: center;
display: flex;    
padding: 0;
position: relative;
width: 100%;
}

.nav {
border: none;
cursor: default;
display: inline-block;    
height: 150px;
margin: 0 auto;
padding: 0;
position: relative;
top: 50px;  
z-index: 500;
}

.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 #08292E;
display: block;
color: #08292E;
font-family: Orator Std, IrisUPC, sans-serif;
font-size: 1.2em;
line-height: 30px;
padding: 0 20px;
position: relative;
opacity: .7;

-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: #08292E;
color: white;

} 

.nav > li > div {

display: table-cell;
color: white;
font-family: Orator Std, IrisUPC, sans-serif;
position: absolute;
top: 30px;
left: -100%;
width: 1344px;

opacity: 0;
visibility: hidden;
overflow: hidden;

background: #08292E;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius:  10px;
border-bottom-right-radius: 10px;

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

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

.nav .nav-column {
float: left;
margin: 0;
padding: 2.5%;
position: relative;
width: 10%;
}

.nav .nav-column h3 {
margin: 20px 0 10px 0;
}

.nav .nav-column li {
padding-left: 0;
}

.nav .nav-column li a {
display: block;
}

.nav .nav-column li a:hover {
color: aquamarine;
}

这是小提琴：

https://jsfiddle.net/uj3gsgg4/

Answer 1

为您在问题中描述的特定设计安排nav-column div

刚刚修复了亚洲，非洲和大洋洲div没有格式化的设计问题。

   .nav {
        cursor: default;
        display: inline-block;
        /*
        margin: 0 auto;
        padding: 0;*/
        position: relative;
        top: 30px;
        z-index: 500;
        width: 70%;
    }

演示：http://codepen.io/UserIsMonica/pen/ENbPLL

注意：如上所述，havn设计小屏幕的响应式设计工作。

PC：https://designmodo.com/create-css3-mega-menu/

组织超级菜单div /内容剪辑

1 个答案: