on hover display div out of the menu bar - html

Question

I have a menu bar on a hover it should display a submenu. I am displaying the sub menu but it moving entire main menu to side. I want the submenu out of the main menu, next to the main menu.
my HTML code
<div class="MenuBar">
<ul>
<li><img src="#"><br>text1</li>
<div id="submenu">
this is a test div
</div>
<li><img src="#"><br>text2</li>
<li><img src="#"><br>text3</li>
</ul>
CSS
#submenu {
display: none;
}
.MenuBar ul li a:hover #submenu {
display: block;
position: relative;
top: 20px;
}

Answer 1

I think this is what you are after. I have added classes to the lists, changed your id submenu to class and added submenu items to all lists.
.MenuBar ul li .submenu {
display: none;
}
.MenuBar ul li.men1:hover .submenu {
display: inline-block;
position: relative;
top: 20px;
}
.MenuBar ul li.men2:hover .submenu {
display: inline-block;
position: relative;
top: 20px;
}
.MenuBar ul li.men3:hover .submenu {
display: inline-block;
position: relative;
top: 20px;
}
<div class="MenuBar">
<ul>
<li class="men1">text1
<div class="submenu">
hovered 1st
</div></li>
<li class="men2">text2
<div class="submenu">
hovered 2nd
</div></li>
<li class="men3">text3<div class="submenu">
hovered 3rd
</div></li>
</ul>
Let me know if this was what you were after.

Answer 2

you can use following CSS for this:
if you want to show submenu in bottom of parent menu
.MenuBar ul li {
position: relative;
}
.MenuBar ul li:hover #submenu {
display: block;
position: absolute;
top: 100%;
left: 0px;
}
or if you want to show submenu in right of parent menu
.MenuBar ul li {
position: relative;
}
.MenuBar ul li:hover #submenu {
display: block;
position: absolute;
top: 0;
left: 100%;
}

Answer 3

Place the submenu div outside your lists. If you throw that inside a bunch of list item and play with display property, it will affect the list structure. Place that div outside the list item, position the submenu div with css so it always alignment to the respective menu item and them add your hover effect.

Answer 4

Change Html Like this:
<li>
<img src="#"><br>text1
<div id="submenu"><-----------------submenu must be child li
this is a test div
</div>
</li>
And Css Like This :
.MenuBar ul li a:hover + #submenu {<--------------use + selector
display: block;
position: relative;<-----Remove This
top: 20px;<------Remove This
margin-top: 20px;<----------Add This
margin-bottom: 10px;<-------Add This
}
Full Code:
#submenu {
display: none;
}
img {
width: 20px;
}
ul {
list-style: none;
}
.MenuBar ul li a:hover + #submenu {
display: block;
margin-top: 20px;
margin-bottom: 10px;
}
<div class="MenuBar">
<ul>
<li>
<a href="#">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text1
</a>
<div id="submenu">
this is a test div
</div>
</li>
<li>
<a href="#">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text2
</a>
</li>
<li>
<a href="#">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text3
</a>
</li>
</ul>
</div>