How to display sub menu horizontally?

Question

I have a drop-down menu which appears vertically. How can I change it to appear horizontally?

My css code:

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

My html code:

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

Thank you for any help.

Answer 1

One option is to remove width: 100%; and add display: inline-block; to .srt-menu ul li.

EDIT

The new code you have provided requires an additional change. Remove width: 12em from .srt-menu ul this will stop the child lis wrapping onto a new line.

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

Answer 2

Update this css and demo here 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%;
 }

Answer 3

Just add to the css for li elements these two properties:

float:left;
margin-right:30px;

Answer 4

Answer:


I think this will help.

nav  ul li ul li {
    float:  right;
     }