Site icon Hip-Hop Website Design and Development

Methods to buid wordpress menu with auto width sub-menu gadgets in dropdown menu with none gadgets sharing one line

How do I buid wordpress menu with auto width sub-menu gadgets in dropdown menu with none sub-menu gadgets sharing one line (showing facet by facet).however with an computerized width for dropdown gadgets that’s with out setting a pre outlined width. I attempted This Code

<html>
    <header>
<ul> 
  <li><a href="#">Dwelling</a></li> 
  <li><a href="#">About</a> 
      <ul> 
      <li><a href="#">Historical past</a></li> 
      <li><a href="#">Group</a></li> 
      <li><a href="#">Workplaces</a></li> 
      </ul> 
    </li> 
  <li><a href="#">Companies</a> 
      <ul> 
      <li><a href="#">Internet Design</a></li> 
      <li><a href="#">Web 
            Advertising and marketing</a></li> 
      <li><a href="#">Internet hosting</a></li> 
      <li><a href="#">Area Names</a></li> 
      <li><a href="#">Broadband</a></li> 
      </ul> 
    </li>
  <li><a href="#">Contact Us</a> 
      <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li>
        <li><a href="#">longwordtestsubjecT</a></li>  
      </ul> 
    </li> 
  </ul>
    </header>
  <fashion>
      
      li{
    show: inline-block !essential;
    padding-top: 5px;
    float: proper;
    font-size: 17px;
    line-height: 26px;
    font-weight: 500;
    margin: 0 38px 0 0;
    place: relative;
    text-transform: uppercase;
    text-decoration: none;
      }
      
 ul li {
     float:left; 
     place:relative; 
     text-transform:uppercase; 
     list-style:none
      }
 ul li a {
     show:block;  
     shade:#000; 
     padding:5px 15px; 
     font-size:14px;
     shade: #808080;
     text-decoration: none;
      }

/* Second Stage */
 ul li ul 
      {
     show:none;
      }
 ul li ul li a 
      {
       width:auto;
       show:block;
      }
 ul li:hover ul {
     show:block; 
     place:absolute; 
     prime:26px;
      }

/* Third Stage */
 ul li ul li ul li
      {
     list-style:inside sq.
      }
 ul li ul li ul li a 
      {font-size:11px; 
      shade:#ddd}
</fashion>
  </html> 

And that is what i get ! Sub-menu Merchandise Showing facet by facet as an alternative of on their very own line…

I would really like it to appear to be this however nonetheless keep the automated width