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

时间:2019-03-28 20:03:08

标签: javascript html css wordpress

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

在浏览的HTML和CSS代码中,我注意到.sf-js-enabled类(如果被禁用)将禁用子菜单,并且该菜单不起作用。这是我发现的唯一会影响此动画的内容。

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

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。

1 个答案:

答案 0 :(得分:0)

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