我进行下拉菜单。我的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之间选择选项...到虚拟现实
您需要在嵌套的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>