Creating a drop-down menu using HTML:
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#features">Services</a></li>
<li><a href="#gallery">Projects</a></li>
<li id="list"><a>Our Services</a></li> //on hover dropdown menu open
//dropdown menu start
<li class="dropbtn"><a href="iphone_app_development.html">IPhone App Development</a></li>
<li class="dropbtn"><a href="andriod_app_development.html">Android App Development</a></li>
<li class="dropbtn"><a href="website_development.html">Website Development</a></li>
<li class="dropbtn"><a href="graphics_designing.html">Graphics Designing
</a></li>
<li class="dropbtn"><a href="game_development.html">Game Development </a>
</li>
<li class="dropbtn"><a href="it_security.html">IT Security</a></li>
<li class="dropbtn"><a href="virtual_reality.html">Virtual Reality</a></li>
//dropmenu end
<li><a href="#testimonial">Client's Reviews</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
CSS code for the drop-down menu:
.dropbtn
{
display: none;
}
#list:hover ~ .dropbtn
{
display:block;
}
Although the drop-down menu is functioning correctly, an issue arises when hovering over the items in the dropdown menu. All items hide upon hover. How can I select a specific option between IPHONE to Virtual Reality without this issue?