CODEWITHSUNDEEP
htmlcss
KesaVan
KesaVan

Reputation: 1031

Trying to get the Menu and Sub menu in Horizontal

I want menu and sub menu both in horizontal.This is the code i tried main menu in horizontal.When i hover the mainmenu i want submenu also in horizontal.

Any body know how to solve this

FIDDLE

Any help is appreciated.

Upvotes: 2

Views: 108

Answers (3)

rjomir
rjomir

Reputation: 304

Try this solution:

**HTML:**

<ul id="level-1">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Products</a>
<ul id="level-2">
<li><a href="#">Laptops</a></li>
<li><a href="#">Monitors</a></li>
<li><a href="#">Printers</a></li>
</ul>
</li>
</ul>

**CSS:**


 ul{
    padding: 0;
    list-style: none;
}
ul#level-1 > li{
    float: left;
    width: 100px;
    text-align: center;
}
ul li a{
    display: block;
    padding: 5px 10px;
    color: #333;
    background: #f2f2f2;
    text-decoration: none;
}
ul li a:hover{
    color: #fff;
    background: #939393;
}
ul li ul{
    display: none;
}
ul li:hover ul{
    display: inline-flex;
    width: auto;/* display the dropdown */
}

ul li:hover ul#level-2 li{
    float: left;
    display: inline-block;
}

Upvotes: 3

JRulle
JRulle

Reputation: 7568

Try this: JSFIDDLE Basically, you need to use absolute positioning to take the secondary menu and position it directly below the main menu.

ul li ul li{
  display: inline-block;
  width: 100px;
  text-align: center;
}
ul li ul li a{
  display: block;
  padding: 5px 10px;
  color: white;
  background: blue;
  text-decoration: none;
}
ul li ul{
  display: none;
  width: 300px;
  position: absolute;
  left: 0;
  margin-left: 8px;
}

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

Add position:absolute:

css

ul li ul{
    display: none;
    position: absolute; /*Add this */
}

fiddle

Also add left:8px if you want left align like this:

ul li ul{
    display: none;
    position: absolute;
    left:8px; /* Add this too for left align*/
}

fiddle

Upvotes: 5

Related Questions