将子菜单从右滑动固定到向下滑动

Question

我有一个可以在网站上滑动的菜单。我找不到导致这种情况发生的任何css代码，所以我认为它是在javascript代码中。我对Javascript代码不太熟悉，不确定在哪里修复它。我需要一些建议。我们希望菜单向下移动，就像在顶部主菜单中一样。有问题的网站是：http://www.wvexecutive.com/

在我看过的HTML和CSS代码中，我注意到如果禁用了.sf-js类，则禁用子菜单，但它不起作用。这是我发现的唯一影响这个动画的东西。

我找不到此代码的样式表：

class="secondnav-menu sf-js-enabled sf-menu".  

但这是HTML：

<div id="categories_container">

<div id="categories">
<ul id="menu-main-menu"class="secondnav-menu sf-js-enabled sf-menu"><li id="menu-item-1004" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home current-menu-ancestor current-menu-parent menu-item-has-children menu-item-1004"><a href="http://www.wvexecutive.com/">Home</a>
<ul class="sub-menu" style="display: none; visibility: hidden;">
<li id="menu-item-25711" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-89 current_page_item menu-item-25711"><a href="http://www.wvexecutive.com/resources/" aria-current="page">Resources</a></li>
</ul>
</div><!-- #categories -->

</div>

这是css。

ul, menu, dir {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

/* Categories */

#categories_shadow{
float:left;
background:url(images/categories_menu_shadow.png) no-repeat bottom     left;
height:61px;
}

#categories_container{
float:left;
width:100%;
}

#categories{
width:960px;
height:48px;
background: url(images/categories-bg.jpg) 0 0 repeat-x #601111;
/*border:1px solid #e1e1e1;*/
position:relative;
margin:0 auto;
}

#categories .home_first_line{
border-left:1px solid #e1e1e1;
}

#categories .home_second_line{
border-left:1px solid #fff;
}

#categories ul{
float:left;
}

#categories ul li{
float:left;
list-style:none;
font-size:14px;
/*line-height:51px;*/
/*border-right:1px solid #560f0f;*/
}

#categories ul li ul li, #categories ul li ul li a {
border-right:none;
}

#categories ul li ul li a{
line-height:35px !important;
}

#categories ul li a{
text-decoration:none;
color:#fff;
display:block;
line-height:48px;
padding:0px 16px;
float:left;
/*border-right:1px solid #701414;*/
font-family: 'Antic Slab',Tahoma,serif;
}

#categories ul li a:hover{
background:#731414;
}

#categories .current-cat a, #categories .current-menu-item a, #categories     .current-menu-parent a, #categories .current_page_item a {
background:#731414;
}

#categories ul li ul li a:hover{
background:none;
color:#747474 !important;
}

同样，我希望此菜单向下扩展，而不是向右侧扩展。我没有建立这个网站，我在另一个开发人员后面试图导航他们的代码。我自己通常不会使用javascript。我用CSS。

Answer 1

#categories ul li{
    position:relative
}
#categories ul.sub-menu {
    position: absolute;
    top: 48px;
    z-index: 1;
}