-1

我试图有一个简单的内联菜单，当某个元素悬停时，下面的一行会出现提供子菜单。不幸的是，我无法在悬停时显示子菜单。我在查询中的 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;
}

查询

$("#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>
4

2 回答 2

1

为什么不使用 jQueryhide()和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();
        }
    );
});
于 2013-04-01T22:51:00.867 回答
0

演示

您的代码似乎工作正常。

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

  $(document).ready(function(){
     $("#servicebutton").hover(
       function () {
        $('#services_menu').css("display","block");
       }, 
       function () {
         $('#services_menu').css("display","none");
       });
   });
于 2013-04-01T22:59:20.700 回答