CSS边栏菜单未在“移动”视图中显示子项

Question

在计算机/笔记本电脑屏幕以及平板电脑/ iPad上查看时，补充工具栏菜单看起来完全正常，但出于某种原因，它没有在移动<中显示菜单的儿童项目/ strong>查看。

View Link Here

我已经尝试将菜单中的内容添加到theme.css下的CSS Mobile版本中，但它仍然没有显示Child项目。我不知道为什么它不起作用？这令我困惑！

不要以为任何人都可以借出另一双眼睛，看看我有没有错过的东西？我真的很感激！

以下是移动视图的当前CSS：

#widget_nav_menu li {
    clear: both;
    float: left;
    list-style: none; 
    text-align: center;
    width: 313px;
    /* padding: 5px;
     margin: 5px;*/
    background: #f4f8fa;
    border-bottom: 1px solid #c3ced5;
    height: 34px;
    text-indent: none;
    color: #174267;
}

#widget_nav_menu a {
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #174267;
    text-decoration: none;
    display: block;
    padding: 11px 0 15px 7px;
}

#widget_nav_menu a.active,
#widget_nav_menu a:hover {
    background-image: url(images/hover_bg.png);
    background-position: right -5px;
    /*position: absolute;*/
    /*z-index: 10;*/
    color: #fff;
    /*margin-right: -17px;*/
}

#widget_nav_menu li.current_page_item a {
    background-image: url("images/hover_bg_small.png");
    background-position: right -5px;
    color: #FFFFFF;
    display: block;
    margin: 0 auto;
    padding: 11px 0;
    width: 318px;
}

#widget_nav_menu li a:hover {
    background-image: url("images/hover_bg_small.png");
    background-position: right -5px;
    color: #FFFFFF;
    display: block;
    margin: 0 auto;
    padding: 11px 0;
    width: 318px; 
}

#widget_nav_menu a:hover li {
}

#widget_nav_menu .sub-menu {
    /* margin-left:10px; */
}

        #widget_nav_menu li ul {
            position: absolute;
            width: 318px
            left: -999em;
        }
        #widget_nav_menu li:hover ul {
            left: auto;
        }

        #widget_nav_menu li:hover ul, #widget_nav_menu li.sfhover ul {
            left: auto;
        }

            /*** Multi Level ***/
            #widget_nav_menu li ul ul {
                margin: -1em 0 0 10em;
            }

            #widget_nav_menu li:hover ul ul, #widget_nav_menu li.sfhover ul ul {
                left: -999em;
            }

        #widget_nav_menu li ul li.current_page_item a:hover {
            width: 318px;
            background-image: url("images/hover_bg_small.png");
            background-position: right -5px;
            color: #fff;
            margin-right: -17px;
        }

.menu-sectors-container li {
    clear: both;
    float: left;
    list-style: none;
    width: 318px;
    background: #f4f8fa;
    border-bottom: 1px solid #c3ced5;
    height: 34px;
    text-indent: none;
    color: #174267;
}
.menu-sectors-container li a {
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #174267;
    text-decoration: none;
    display: block;
    padding: 7px 0px 7px 7px;
}
.menu-sectors-container li a:active,
.menu-sectors-container li a:hover {
    width: 318px;
    background-image: url(images/hover_bg.png);
    background-position: right -5px;
    position: absolute;
    z-index: 1005;
    color: #fff;
    margin-right: -17px;
    padding:11px 0 13px 10px;
}
.menu-sectors-container li a:hover li {}

谢谢！

Answer 1

在触摸设备上没有鼠标光标，因此悬浮状态不存在，导致不知道显示子空间列表。 有些设备将快速点击视为悬停，但AFAIK不是标准行为。

像“touchstart”这样的触摸事件的简单JavaScript侦听器应该可以解决问题。

Answer 2

我已经解决了这个问题。 Mobile部分下有两个.sub-menu，我甚至都没有意识到。编辑一个和未发生的事情就是为什么，因为另一个类仍在应用！