Currently in the process of developing a dropdown menu to house a search engine form within a static menu bar. The desired functionality is for the search form to appear upon hovering over the "search icon." However, it seems that the submenu fails to display when hovered over, leading me to believe that the "hover" events are not registering properly.
This is the desired outcome:
Despite implementing a hover effect to set visibility to visible, the issue persists:
Below is the HTML code snippet:
<div class="searchBar">
<li>
<img src="templateFiles/search.png">
<ul>
<li>
<form action="search.php" method="get" >
<input type="text" name="search" placeholder="Search Site" id="writeBox">
<input name="searchSubmit" type="submit" value="Search" id="button">
</form>
</li>
</ul>
</li>
</div>
And here is the corresponding CSS:
/*******Search Bar******/
.searchBar {
margin-top:30px;
float:right;
}
.searchBar li, .searchBar img {
width:30px;
height:30px;
}
.searchBar li ul {
position:absolute;
visibility:hidden;
}
.searchBar li:hover .searchBar li ul {
visibility:visible;
}