メガメニューのdiv /コンテンツのクリッピングを整理する

私のウェブサイトのナビゲーションでメガメニューを作成していますが、ulのコンテンツを含むdivは整理されていません。下の自分のフィドルをチェックすれば、「アフリカ」、「アジア」、「オセアニア」は遠く離れていることがわかります。メガメニューのdiv /コンテンツのクリッピングを整理する

リストは、「UK &アイルランド」の下に「Mainland europe」と表示され、次に「本土ヨーロッパ」、「北米」のように表示されるように整理する必要があります。 "メニュー：https://www.greatrail.com/

もう1つの問題は、ブラウザのサイズを小さくするとコンテンツのクリッピングが発生することです。 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">&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/

出典

2016-11-29 FabMon

アレンジのnav-列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

注：あなたが言及した例として、小さな画面のためにやりなさいデザイン応答デザインワーク。

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

出典

2016-11-30 00:22:07 monikapatel

ライオネス、本当にありがとうございます。私はあなたが言ったように各メニューを形作った。私はまだメニューを中心にして、左右に均等に伸びるメガメニューを表示する問題があります。メインメニューを中央に配置するには、.nav要素の幅をページの中央に配置できるように幅を変更してから、大div要素に幅：200％と左：-50％を使用してコンテンツをストレッチしますそれは良いコードではなく、コンテンツはページの右側をクリップします。 – FabMon

更新されたfiddle https://jsfiddle.net/uj3gsgg4/3/です。あなたが見ることができるように私はメガメニューがページをクリッピングせずに均等に伸びたいと思う。 – FabMon

メガメニューのdiv /コンテンツのクリッピングを整理する

答えて

関連する問題