JesseMcCao JesseMcCao - 28 days ago 6
CSS Question

Work with dropdown menu



.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
}

<li style="padding-left:10px;padding-top:10px" class="level1 nav-2-<?php echo $demmn; ?> first dropdown" >
<a href="#" style="color:#fff">
<span>TEST</span>
</a>
<ul class="dropdown-menu" id="menu1" style="background:#000;">
<li style="width:50%"><a href="#" style="color:#fff">TEST</a></li>
<li style="width:50%"><a href="#" style="color:#fff">TEST</a></li>
<li><a href="#" style="color:#fff">TEST</a></li>
<li><a href="#" style="color:#fff">TEST</a></li>
</ul>
</li>





I want it show in horizontal like this

enter image description here

Please help me, thank you!

Answer

I think this is what you are looking for

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
}

.menu{
   max-width: 400px;
}

.menu>li{
  background-color: #111;
}

.dropdown-menu li {
    width: 30%;
    display: inline-block;
    background-color: #111;
}
<ul class="menu">

<li  style="padding-left:10px;padding-top:10px" class="level1 nav-2-<?php echo $demmn; ?> first dropdown" >
                  <a href="#" style="color:#fff">
                      <span>TEST</span>
                  </a>
                <ul class="dropdown-menu" id="menu1" style="background:#111;">
                  <li><a href="#" style="color:#fff">TEST</a></li>
                  <li><a href="#" style="color:#fff">TEST</a></li>
                  <li><a href="#" style="color:#fff">TEST</a></li>
                  <li><a href="#" style="color:#fff">TEST</a></li>
                </ul>
              </li>
  
  </ul>

Comments