Menu items change their positions in html/css menu when expanding submenu - html

Question

I have a simple menu made in html/css and the problem I encountered is that if I put my mouse pointer over menu item (test2) to expand submenu then other items from menu section (test1) change their positions: https://jsfiddle.net/dsb87pxz/
<nav>
<ul>
<li>test1</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
</ul>
</nav>
nav > ul > li {
display: inline-block;
}
nav > ul > li > ul {
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav > ul > li > ul > li {
display: block;
}
Can you suggest a solution for this problem?

Answer 1

With vertical-align: top
nav>ul>li {
display: inline-block;
vertical-align: top;
}
nav>ul>li>ul {
display: none;
}
nav>ul>li:hover>ul {
display: block;
}
nav>ul>li>ul>li {
display: block;
}
<nav>
<ul>
<li>test1</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
</ul>
</nav>
When you hover over a list item in the first level, it affects the list item on the right, because of display: inline-block.
Therefore one can use float: left and display: relative for <li> in the first level and display: absolute for the <ul> inside of the <li>.
Example
ul {
list-style: none;
padding: 0;
}
li {
padding: 2px 5px;
}
nav>ul>li {
float: left;
position: relative;
}
nav>ul>li>ul {
position: absolute;
left: 0;
display: none;
}
nav>ul>li:hover>ul {
display: block;
}
<nav>
<ul>
<li>test1</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
</ul>
</nav>

Answer 2

You could add position:absolute to your hover element like so
nav > ul > li:hover > ul {
display: block;
position: absolute;
}

Answer 3

You could add position:absolute to your hover element like so
nav > ul > li:hover > ul {
display: block;
position: absolute;
}

Answer 4

That's true you just need to add vertical-align as top to your inline-block elements which are li tags here.
display:inline-block by default aligns their block text to the baseline and that's why when user hover in above codes it aligns the text to the baseline i.e. vertical-align:baseline so change that to vertical-align:top.
nav > ul > li{
display: inline-block;
vertical-align:top; /*Just add this as already suggested*/
}