메가 메뉴 divs/content clipping 구성

내 웹 사이트 탐색을 위해 메가 메뉴를 만들고 있지만, ul 콘텐츠가 포함 된 div는 구성되지 않았습니다. 아래의 나의 바이올린을 확인하면 "아프리카", "아시아", "오세아니아"가 멀리 떨어져 있음을 알 수 있습니다.메가 메뉴 divs/content clipping 구성

목록은 "영국 & 아일랜드"아래에 "Mainland europe"이 있어야 다음에 "본토 유럽 계속", "북아메리카"아래 등등이되어야 함으로 목록이 구성되어야합니다. "메뉴 : https://www.greatrail.com/

다른 문제는 브라우저 크기를 줄이면 내용이 잘리는 것과 관련이 있습니다. jfiddle을 줄이면 메가 메뉴가 슬라이드 쇼 컨트롤을 오버플로한다는 것을 알 수 있습니다 (중간에 슬라이드 쇼가 있지만 이미지를 업로드 할 수는 없습니다). 여기

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; 
}

<!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>

는 바이올린입니다 :

https://jsfiddle.net/uj3gsgg4/

출처

2016-11-29 FabMon

당신이

그냥 고정 된 디자인 문제에 대한 질문에 설명 특정 디자인에 대한

배열 탐색 열 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't는 디자인 응답 디자인 작업.

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

출처

2016-11-30 00:22:07 monikapatel

라이오 네스, 답변 해 주셔서 대단히 감사합니다. 나는 네가 말한 것처럼 각 메뉴를 형성했다. 나는 여전히 메뉴를 중심으로하고 왼쪽과 오른쪽이 페이지 전체에 균등하게 늘어나는 메가 메뉴를 보여주는 문제가있다. 중심 메뉴를 중심으로하려면 .nav 요소에서 폭을 뒤집어서 페이지의 가운데에 배치 할 수 있습니다. 그런 다음 큰 div 요소에 너비 : 200 % 및 왼쪽 : -50 %를 사용하여 내용을 스트라이크합니다 그러나 그것은 좋은 코드가 아니었고 내용은 다시 한 번 페이지의 오른쪽을 잘라 냈습니다. – FabMon

다음은 업데이트 된 바이올린입니다. https://jsfiddle.net/uj3gsgg4/3/. 보시다시피 나는 메가 메뉴가 페이지를 자르지 않고 고르게 늘어나길 원합니다. – FabMon

메가 메뉴 divs/content clipping 구성

답변

관련 문제