Как отображать подменю по горизонтали?

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

Мой код CSS:

.menu-toggle{ 
    display:block; 
    padding:10px; 
    margin:20px 0 0; 
    background:#666; 
    color:#fff; 
    cursor:pointer; 
    text-transform:uppercase; 
    font-size:20px; 
} 
.menu-toggle.toggled-on{ 
    background:#0099ff; 
} 
.srt-menu{ 
    display:none; 
} 
.srt-menu.toggled-on{ 
    display:block; 
    position:relative; 
    z-index:10; 
} 
.srt-menu{ 
    clear:both; 
    margin-bottom:60px; 
} 
.srt-menu li a { 
    background:#dadada; 
    display:block; 
    margin:1px 0; 
    padding:10px; 
    text-decoration:none; 
} 
.srt-menu li a:hover{ 
    background:#0099ff; 
    color:#fff; 
} 
.srt-menu li li a { 
    background:#e8e8e8; 
    padding-left:40px; 
} 
.srt-menu li li li a { 
    background:#efefef; 
    padding-left:80px; 
} 
.menu-toggle{display:none;} 
#menu-main-navigation{display:block;} 

.srt-menu, .srt-menu * { 
margin:   0; 
padding:  0; 
list-style:  none; 
} 
.srt-menu ul { 
position:  absolute; 
display:none; 
width:   12em; 
} 
.srt-menu ul li { 
width:   100%; 
} 
.srt-menu li:hover { 
visibility:  inherit; 
} 
.srt-menu li { 
position:  relative; 
margin-left:1px; 
} 
.srt-menu li li { 
margin-left:0px; 
} 
.srt-menu a { 
display:  block; 
position:  relative; 
} 
.srt-menu li:hover ul, 
.srt-menu li.sfHover ul { 
display:block; 
left:   0; 
top:   45px; /* match top ul list item height */ 
z-index:  99; 
-webkit-box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3); 
} 
ul.srt-menu li:hover li ul, 
ul.srt-menu li.sfHover li ul { 
top:   -999em; 
} 
ul.srt-menu li li:hover ul, 
ul.srt-menu li li.sfHover ul { 
left:   12em; 
top:   0; 
} 
ul.srt-menu li li:hover li ul, 
ul.srt-menu li li.sfHover li ul { 
top:   -999em; 
} 
ul.srt-menu li li li:hover ul, 
ul.srt-menu li li li.sfHover ul { 
left:   10em; /* match ul width */ 
    top:   0; 
}

Мой HTML-код:

<nav id="topnav" role="navigation"> 
    <div class="menu-toggle">Menu</div> 
    <ul class="srt-menu" id="menu-main-navigation"> 
     <li> 
      <a>Contact</a> 
      <ul> 
       <li><a href="#">Advertise with Us</a></li> 
       <li><a href="#">Contact Us</a></li>    
      </ul> 
      </li> 
     </ul>  
    </nav>

Спасибо за любую помощь.

источник

2015-03-26 zaha

Одним из вариантов является удаление width: 100%; и добавить display: inline-block; в .srt-menu ul li.

EDIT

Новый код вы предоставили требует дополнительных изменений. Удалить width: 12em от .srt-menu ul это остановит ребенка li s обертывание на новую строку.

.menu-toggle{ 
 
    display:block; 
 
    padding:10px; 
 
    margin:20px 0 0; 
 
    background:#666; 
 
    color:#fff; 
 
    cursor:pointer; 
 
    text-transform:uppercase; 
 
    font-size:20px; 
 
} 
 
.menu-toggle.toggled-on{ 
 
    background:#0099ff; 
 
} 
 
.srt-menu{ 
 
    display:none; 
 
    background-color: #dadada; 
 
} 
 
.srt-menu.toggled-on{ 
 
    display:block; 
 
    position:relative; 
 
    z-index:10; 
 
} 
 
.srt-menu{ 
 
    clear:both; 
 
    margin-bottom:60px; 
 
} 
 
.srt-menu li a { 
 
    background:#dadada; 
 
    display:block; 
 
    margin:1px 0; 
 
    padding:10px; 
 
    text-decoration:none; 
 
} 
 
.srt-menu li a:hover { 
 
    background:#0099ff; 
 
    color:#fff; 
 
} 
 
.srt-menu li li a { 
 
    background:#e8e8e8; 
 
    /*padding-left:40px; Removed to tidy up output*/ 
 
} 
 
.srt-menu li li li a { 
 
    background:#efefef; 
 
    padding-left:80px; 
 
} 
 
.menu-toggle { 
 
    display:none; 
 
} 
 
#menu-main-navigation { 
 
    display:block; 
 
} 
 
.srt-menu, .srt-menu * { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.srt-menu ul { 
 
    left: 0; 
 
    position: absolute; 
 
    display: none; 
 
    white-space: nowrap; /*Add this to stop the li from wrapping onto new lines*/ 
 
/*width: 12em; Remove this to stop the list items from wrapping*/ 
 
} 
 
.srt-menu ul li { 
 
    display: inline-block; 
 
/*width: 100%;*/ 
 
} 
 
.srt-menu li:hover { 
 
    visibility: inherit; 
 
} 
 
.srt-menu li { 
 
    display: inline-block; /*Add this to make parent li display inline*/ 
 
    position: relative; 
 
} 
 
.srt-menu li li { 
 
    margin-left:0px; 
 
} 
 
.srt-menu a { 
 
    display: block; 
 
    position: relative; 
 
} 
 
.srt-menu li:hover ul, 
 
.srt-menu li.sfHover ul { 
 
    display: block; 
 
    left: 0; 
 
/*top: 45px; removed to stop menu from disappearing when moving mouse to it*/ 
 
z-index: 99; 
 
-webkit-box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3); 
 
} 
 
ul.srt-menu li:hover li ul, ul.srt-menu li.sfHover li ul { 
 
    top: -999em; 
 
} 
 
ul.srt-menu li li:hover ul, ul.srt-menu li li.sfHover ul { 
 
    left: 12em; 
 
    top: 0; 
 
} 
 
ul.srt-menu li li:hover li ul, ul.srt-menu li li.sfHover li ul { 
 
    top: -999em; 
 
} 
 
ul.srt-menu li li li:hover ul, ul.srt-menu li li li.sfHover ul { 
 
    left: 10em; /* match ul width */ 
 
    top: 0; 
 
}

<nav id="topnav" role="navigation"> 
 
    <div class="menu-toggle">Menu</div> 
 
    <ul class="srt-menu" id="menu-main-navigation"> 
 
    <li> 
 
     <a href="#">Contact</a> 
 
     <ul> 
 
     <li><a href="#">Advertise with Us</a></li> 
 
     <li><a href="#">Contact Us</a></li>    
 
     </ul> 
 
    </li> 
 
    <li><a href="#">More</a></li> 
 
    </ul>  
 
</nav>

источник

2015-03-26 08:18:14

К сожалению, это не сработает. Любое другое предложение? – zaha

Меню по-прежнему находится в вертикальной форме. – zaha

Фрагмент кода показывает, что подменю выводится вертикально, так что либо я не понял, к чему вы стремитесь достичь, либо б) вы по какой-то причине видите другой результат. В любом случае вам нужно подробно остановиться. Что вы ожидаете увидеть и что видите? –

Ответ:

Я думаю, что это поможет.

nav ul li ul li { 
    float: right; 
    }

источник

2015-03-26 08:14:08 rohankvashisht

К сожалению, это не работает. Любое другое предложение? – zaha

Просто добавьте в CSS для Li элементов эти два свойства:

float:left; 
margin-right:30px;

источник

2015-03-26 08:14:20

Извините, но это не сработает. Любое другое предложение? – zaha

Update это CSS и демо здесь https://jsfiddle.net/hzorn1m5/1/

.menu-toggle{display:none;} 
 
#menu-main-navigation{display:block;} 
 

 
.srt-menu, .srt-menu * { 
 
margin:   0; 
 
padding:  0; 
 
list-style:  none; 
 
} 
 
.srt-menu ul { 
 
position:  absolute; 
 
display:none; 
 
width:   12em; 
 
} 
 
.srt-menu ul li { 
 
width:   100%; 
 
} 
 
.srt-menu li:hover { 
 
visibility:  inherit; 
 
} 
 
.srt-menu li { 
 
position:  relative; 
 
margin-left:1px; 
 
} 
 
.srt-menu li li { 
 
margin-left:0px; 
 
} 
 
.srt-menu a { 
 
display:  block; 
 
position:  relative; 
 
} 
 
.srt-menu li:hover ul, 
 
.srt-menu li.sfHover ul { 
 
display:block; 
 
left:   0; 
 
top:   45px; /* match top ul list item height */ 
 
z-index:  99; 
 
-webkit-box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3); 
 
} 
 
ul.srt-menu li:hover li ul, 
 
ul.srt-menu li.sfHover li ul { 
 
top:   -999em; 
 
} 
 
ul.srt-menu li li:hover ul, 
 
ul.srt-menu li li.sfHover ul { 
 
left:   12em; 
 
top:   0; 
 
} 
 
ul.srt-menu li li:hover li ul, 
 
ul.srt-menu li li.sfHover li ul { 
 
top:   -999em; 
 
} 
 
ul.srt-menu li li li:hover ul, 
 
ul.srt-menu li li li.sfHover ul { 
 
left:   10em; /* match ul width */ 
 
    top:   0; 
 
} 
 
ul.srt-menu li:hover ul{ 
 
    width: 600px; 
 
} 
 
ul.srt-menu li ul li{ 
 
    display: inline-block !important; 
 
    width: 48%; 
 
}

источник

2015-03-30 10:01:55 Kumar

Как отображать подменю по горизонтали?

ответ

Смежные вопросы