How to display list on button hover? - html

Question

I am trying to display the list on button hover, but what happens is, whenever I hover near the button area, text gets displayed.
.header_nav {
width: 800px;
height: 400px;
}
.header_nav ul {
list-style: none;
}
.header_nav ul ul {
display: none;
}
.header_nav ul ul #nav_button:hover>ul {
display: block;
}
.header_nav ul ul li >ul {
display: none;
}
.header_nav ul li:hover >ul {
display: block;
}
<nav class="header_nav">
<ul>
<li>
<input type="button" value="Button 1" name="nav_button" id="nav_button">
<ul>
<li>Locations</li>
<li>
Mumbai
<ul>
<li>Txt 1</li>
<li>Txt 2s</li>
<li>Txt 3</li>
</ul>
</li>
<li>Delhi</li>
<li>Banglore</li>
<li>Nagpur</li>
</ul>
</li>
</ul>
</nav>
JS FIDDLE : https://jsfiddle.net/fhv7drst/

Answer 1

It is because your li element was block element.
I changed it to inline and it started working as per your requirements
HTML:
<li class="parentElement">
<input type="button" value="Button 1" name="nav_button" id="nav_button">
CSS:
li.parentElement{
display: inline;
}
here is the working fiddle
https://jsfiddle.net/m73p8pea/

Answer 2

The reason is that your li element is a block element, which means that it will automatically try to span the entire width available. In your case, this is the 800px provided by the topmost element.
You have two solutions readily available - one is to make the list element an inline-block element (or simply an inline element, though I'd prefer inline-block here, as block is how it started) to prevent it spaning the whole width:
.header_nav ul li {
display: inline-block;
}
You could also trigger the display change on the unordered list when hovering over the button directly, not when hovering over it's parent list item:
.header_nav #nav_button:hover + ul {
display: block;
}
This is likely the better solution, as it doesn't mess with the display types more than you need to, and you more accurately describing what you want to happen - show the list when the button is hovered.

Answer 3

As pointed by #Rahul Arora indeed it is because of li as block element.
But if for some reason you still want to keep it as block element, you can keep it by making it as inline-block. I also recommend removing margin (see your given example by inspect element, it is to the write of ul) and padding which is assigned by browser as default.
Here is the code:
.header_nav
{
width:800px;
height:400px;
}
.header_nav ul
{
list-style:none;
//displaying ul & all its child as inline block until overriden by other rules
display:inline-block;
//removing default margin and padding
margin:0;
padding:0;
}
.header_nav ul ul
{
display:none;
}
.header_nav ul ul #nav_button:hover>ul
{
display:block;
}
.header_nav ul ul li >ul
{
display:none;
}
.header_nav ul li:hover >ul
{
display:block;
}
<nav class="header_nav">
<ul>
<li>
<input type="button" value="Button 1" name="nav_button" id="nav_button">
<ul>
<li>Locations</li>
<li>
Mumbai
<ul>
<li>Txt 1</li>
<li>Txt 2s</li>
<li>Txt 3</li>
</ul>
</li>
<li>Delhi</li>
<li>Banglore</li>
<li>Nagpur</li>
</ul>
</li>
</ul>
</nav>