下拉菜单打开，但是当鼠标悬停在下拉项目上时，下拉菜单关闭

Question

我制作下拉菜单。 我的 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

.dropbtn
{
    display: none;
}
#list:hover ~ .dropbtn
{
    display:block;
}

下拉菜单正常工作，但是当鼠标悬停在下拉项目上时，例如 iPhone 应用程序开发选项，列表隐藏相同的问题所有下拉列表为什么如何在 IPHONE... 到虚拟现实之间选择选项

Answer 1

您需要在嵌套的ul 上包装子菜单

.dropbtn
{
    display: none;
}
#list:hover  ul#tset .dropbtn
{    display:block;
}
 

<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> 
      <!--dropdown menu start-->
        <ul id="tset">
				<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>
		</ul>
	</li>
<!--//dropmenu end-->

		<li><a href="#testimonial">Client's Reviews</a></li>
		<li><a href="#contact">Contact us</a></li>
  </ul>