我做下拉菜单。 我的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 App Development选项,列表隐藏相同问题所有下拉列表为何如何选择IPHONE ...到虚拟现实之间的选项
答案 0 :(得分:0)
您需要在嵌套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>