Вертикальные под горизонтальные подменю - PullRequest
Новая
       49

Вертикальные под горизонтальные подменю

0 голосов
/ 17 мая 2018

На моем сайте twoguysplayingzelda.com мои подменю (вид рабочего стола) в настоящее время отображаются вертикально, и я хотел бы изменить его на горизонтальное. Когда пользователь наводит курсор на вкладку «ИГРЫ», я бы хотел, чтобы подменю растягивалось горизонтально почти как вторая строка меню со всеми играми. Мой код CSS меню, как показано ниже. Спасибо за любую помощь! 

div.navigation.section.no-padding.bg-dark { 
    background: #616161;
}

.main-menu {        
    font-family: 'Arial', sans-serif;   
    font-size: 1.0em;   
    text-align: center;
}       

.main-menu li { position: relative; }       

.main-menu > li { float: left; }        

.main-menu > li:before {        
    content: none;  
    display: block; 
    position: absolute; 
    right: 0;   
    top: 50%;   
    margin-top: -18px;  
    margin-right: -13px;    
}       

.main-menu > li:last-child:before { content: none; }        

.main-menu > li > a {       
    display: block; 
    padding-top: 12px;  
    padding-bottom: 12px;   
    padding-left: 12px; 
    padding-right: 12px;    
    font-size: 1.0em;   
    color: #FFFFFF; 
    text-transform: uppercase;  
    letter-spacing: 1px;    
    font-weight: 400;
}       

.main-menu > li:first-child > a { margin-left: 0; }     

.main-menu > .has-children > a,     
.main-menu > .page_item_has_children > a { padding-right: 12px; position: 
relative; }     

.main-menu > .has-children > a::after,      
.main-menu > .page_item_has_children > a::after {       
    content: "";    
    display: none;
    border: 5px solid transparent;      
    border-top-color: #999; 
    position: absolute; 
    z-index: 1001;  
    right: 29px;    
    top: 50%;   
    margin-top: -2px;   
}       

.main-menu li:hover > a { 
    cursor: pointer;
    background: #01B3D9;  
    color: #FFFFFF; }       

.main-menu > .has-children:hover > a::after,        
.main-menu > .page_item_has_children:hover > a::after { border-top-color: 
#fff; }

/ * Подменю --------------------------------------- * / 

.main-menu li ul {      
    position: absolute; 
    z-index: 10000; 
    display: block; 
    left: -9999px;  
    top: 10px;  
    -webkit-opacity: 0; 
    -moz-opacity: 0;    
    opacity: 0; 
    z-index: 999;   
    -webkit-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out; 
    -moz-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;    
    -ms-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out; 
    -o-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;  
    transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out; 
}       

.is_mobile .main-menu li ul {       
    -webkit-opacity: 1; 
    -moz-opacity: 1;    
    opacity: 1; 
    display: none;  
}       

.main-menu > li > ul { padding-top: 20px; }     

.main-menu ul li {      
    float: none;        
    display: block;
    border-top: 1px solid rgba(255,255,255,0.075);              
}       

.main-menu ul li:first-child { border-top: none; }      

.main-menu ul > .has-children::after,       
.main-menu ul > .page_item_has_children::after {        
    content: "";
    color: #FFFFFF; 
    display: block; 
    border: 6px solid transparent;  
    border-left-color: rgba(255,255,255,0.4);   
    position: absolute; 
    z-index: 1001;  
    right: 10px;    
    top: 50%;   
    margin-top: -5px;   
}       

.main-menu ul > .has-children:hover::after,
.main-menu ul > .page_item_has_children:hover::after { border-left-color: 
#fff; }             

.main-menu ul li {      
    display: block; 
    width: 240px;   
    background: #616161;    
}       

.main-menu ul a {
    width: 100%;
    font-size: 1.0em;
    background: #616161;    
    display: block; 
    text-align: left;   
    font-weight: 400;   
    padding: 3px;   
    padding-left: 12px; 
    line-height: 130%;  
    color: #FFFFFF; 
}       

.main-menu ul a:hover {         
    background: #01B3D9;
    color: #FFFFFF; 
}       

.main-menu li:hover > ul {      
    -webkit-opacity: 1; 
    -moz-opacity: 1;    
    opacity: 1; 
    left: 138.25%;  
    margin-left: -120px;    
    top: 20.44px;   
}       

.is_mobile .main-menu li:hover ul { display: block; }       


/* Deep down --------------------------------------- */     


.main-menu ul li ul { 
    top: 5px; 
}       

.main-menu ul li:hover > ul {       
    top: 0; 
    left: 240px;    
    margin-left: 0; 
}       

.main-menu ul ul li { background: #3d3d3d; }        
.main-menu ul ul ul li { background: #4d4d4d; }     
.main-menu ul ul ul ul li { background: #4d4d4d; }

1 Ответ

0 голосов
/ 17 мая 2018

К вашему сведению, ваше подменю игр будет слишком большим, чтобы отображать его горизонтально.

Вот как вы можете это сделать.

Удалите это: 

.main-menu li {
    position: relative;
}

И добавьтеэто 

.main-menu li ul.sub-menu {
    display: flex; 
    position: absolute;
    left: 0;
    right: 0;
    overflow-x: auto;
    margin: 0;
}

должно выглядеть следующим образом:

enter image description here

Вы также можете добавить 

.main-menu li ul.sub-menu {
    flex-wrap: wrap;
}

Что будетдать вам это:

enter image description here

...