Mehul Chachada Mehul Chachada - 4 months ago 33
CSS Question

How to display list on button hover?

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

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/