jquery css显示块

我试图有一个简单的内联菜单，当某个元素悬停时，下面的一行会出现一个子菜单。不幸的是，悬停时无法显示子菜单。我在CSS中没有显示，在查询中显示块没有，我想知道CSS是否以某种方式覆盖了它

CSS

JQUERY

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

HTML

服务1
服务2
服务3
服务4
服务5

为什么不使用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();
        }
    );
});

你的代码似乎工作正常

尝试像这样在

ready

中包装脚本

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

---

您可能需要考虑将子菜单的文本的颜色设置为白色，以便在文档准备好>代码> $（函数（））{…}之后设置悬停处理程序。…它。从技术上讲，您所做的应该是可行的：确保您在文档准备中包括jQuery和hover绑定。这可能对您有用@undefined-Good call。。。我总是假设所有代码都包含在其中…：（这似乎在JSFIDLE中起作用，但在我的网站上不起作用

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

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