CODEWITHSUNDEEP
htmlcss
tarasikgoga
tarasikgoga

Reputation: 45

Sub menu align horizontally

Made here is the menu, but when you move to the main punkt1 sub menu appears , it starts at and ends at punkt1 punkt4 . By clicking on the punkt2 or 3 sub menu moves to the right . How to do so that would be a sub menu was always fixed under the main menu and did not move ?

I know that I can wrap .mainnav li: hover ul in the div or add ul class, but can I fix this bug without having to insert a div or add class?

There is my sub menu code

.mainnav li ul{
    display: none;
}

.mainnav li:hover ul{
        display: block;
    position: absolute;
    width: 1000px;
    margin: 0 auto;
}

.mainnav li:hover ul li{
    display: inline-block;
    vertical-align: top;
    width: 210px;
    margin: 10px 10px 10px 10px;
    height: 60px;

}

.mainnav li:hover ul li a{

   display: inline-block;

  color: #000;
  padding: 15px 0px 18px 0px;

  border: 1px solid rgba(0,0,0,.1);
  border-radius: 2px;
  background: rgb(245,245,245) linear-gradient(#e1e1e1, #dadada);
  vertical-align: middle;
}

Upvotes: 0

Views: 50

Answers (1)

pavel
pavel

Reputation: 27092

Use absolute position

.mainnav {position: relative;}
.mainnav > li > ul {position: absolute; top: 50px; left: 0;}

http://jsfiddle.net/pmng54gb/12/

For the third level it will be similar.

Upvotes: 2

Related Questions