Question

我正在尝试使用简单的内联菜单，当某个元素悬停时，下面的一行显示提供子菜单。不幸的是，我无法在悬停时显示子菜单。我在查询中的CSS和显示块中都没有显示，想知道CSS是否以某种方式覆盖它？

CSS

ul.main_menu  {
    list-style-type: none;
    text-align: center;
}
ul.main_menu li  {
    margin-left: 20px;
    display: inline;
}
ul.main_menu li a  {
    text-decoration: none;
    color: white;
}
.submenu  {
    height: 20px;
    width: 100%;
}
#services_menu  {
    display: none;
    margin-top: 10px;
}
#services_menu ul {
    list-style-type: none;
    text-align: center;
}
#services_menu ul li  {
    margin-left: 20px;
    display: inline;
}
#service_menu ul li a  {
    text-decoration: none;
    color: white;
}

JQUERY

$("#servicebutton").hover(
  function () {
    $('#services_menu').css("display","block");
  }, 
  function () {
    $('#services_menu').css("display","none");
  });

HTML

<ul class="main_menu">
  <li id="homebutton"> <a href="#">Home </a></li>
  <li id="servicebutton"> <a href="#" >Services </a></li>
  <li id="packagebutton"> <a href="#" >Packages </a></li>
  <li id="spabutton"> <a href="#">The spa </a></li>
  <li id="productbutton"> <a href="#">Product </a></li>
  <li id="mebutton"> <a href="#">About Me </a></li>
  <li id="contactbutton"> <a href="#">Contact </a></li>
              <div class="submenu">
              <div id="services_menu">
              <ul>
                <li>Services1</li>
                <li>Services2</li>
                <li>Services3</li>
                <li>Services4</li>
                <li>Services5</li>
              </ul>
              </div>
              </div>
</ul>

Answer 1

为什么不使用jQuery的hide()和show()函数？

$('#services_menu').hide();
$('#services_menu').show();

这些功能可以为您处理display: block和display: none，甚至可以在需要时检测display: inline。

编辑：正如@undefined在下面的评论中指出的那样，您可能也会错过文档就绪处理程序。总而言之，您的代码应如下所示：

$(document).ready(function () {
    $("#servicebutton").hover(
        function () {
            $('#services_menu').show();
        }, 
        function () {
            $('#services_menu').hide();
        }
    );
});

Answer 2

Demo

您的代码似乎可以正常工作。

尝试用ready像这样包装你的脚本

  $(document).ready(function(){
     $("#servicebutton").hover(
       function () {
        $('#services_menu').css("display","block");
       }, 
       function () {
         $('#services_menu').css("display","none");
       });
   });

jquery css显示块

2 个答案:

Demo