Question

我有这个代码，我曾经在标题

中创建手机菜单

<?php if ($categories) { ?>
<div class="container visible-phone">

  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    // and other tags that creating the menu successfully
  </nav>

</div>
<?php } ?>

与此一起我想创建垂直菜单，仅用于桌面和小型设备，我用隐藏的x隐藏它，我通过

创建

<div class="container" id="left-menu">
    <nav id="menu" class="navbar-nav">
    <ul class="nav sidebar">


    <?php foreach ($categories as $category) { ?>
        <?php if($category['children']){?>
        <li class="dropdown-submenu">
        <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
        <div class="dropdown-menu">

          // other tags that creating the menus successfully

        </li>
        <?php }?>
    <?php } ?>

    </ul>
    </nav>
</div>

问题是当我不使用可见电话时，在第一个水平菜单中，两者都显示正常。但是当我在第一个菜单中使用可见电话时，第二个菜单后续菜单的左边距属性变为-196.xxx。

请记住，一旦删除可见电话类，两个菜单都会在桌面上正确显示。因为我是bootstrap和jquery的新用户，所以你的指导对我来说非常重要。

提前谢谢你。

还为子菜单共享css

.dropdown-submenu {
    position: relative;


}


.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

引导响应实用程序

0 个答案: