我正在为我的网站导航构建一个大型菜单，但我的包含 ul 内容的 div 没有组织。如果你查看我下面的 fiddle ，你会发现“非洲”、“亚洲”、“大洋洲”很远。
列表应该按照“英国和爱尔兰”下方的“欧洲大陆”进行组织，然后旁边应该是“欧洲大陆继续”，然后是“北美”下方等等……就像“目的地”一样本网站菜单:https://www.greatrail.com/
另一个问题与我减小浏览器大小时的内容剪辑有关。如果您减小 jfiddle，您会注意到大型菜单溢出了右侧的幻灯片控件(这是中间的幻灯片，但我无法上传图像)。
<!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">«</span>
<span id="next">»</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;
}
这是 fiddle :
最佳答案
为您在问题中描述的特定设计安排了导航栏 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
注意:没有像您提到的那样为小屏幕设计响应式设计工作。
关于css - 组织大型菜单 div/内容剪辑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40874174/