0

在计算机/笔记本电脑屏幕以及平板电脑/iPad 上查看时，侧边栏菜单看起来完全正常，但由于某种原因，它没有在移动视图中显示菜单的子项。

在这里查看链接

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

不要以为任何人都可以借另一双眼睛看看我是否遗漏了什么？我真的很感激！

以下是移动视图的当前 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 {}

谢谢！

4

2 回答 2

0

我已经解决了这个问题。移动部分下有两个 .sub-menu，我什至没有意识到。编辑一个而没有发生的事情是原因，因为另一个类仍在应用中！

于 2013-02-26T19:33:35.290 回答
0

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

诸如“touchstart”之类的触摸事件的简单 JavaScript 侦听器应该可以解决问题。

于 2013-02-26T14:01:33.057 回答