Question

我有this JsFiddle的响应（好吧，有点）布局。

然而，我正在努力寻找一种方法来添加一个“子部分”（使其类似/手风琴导航菜单。

我没有最好的/（任何关于此问题）css知识，所以非常感谢任何帮助！

css的片段：

@media only screen and (max-width : 860px){ 
  .text{
    display:none;
  }

  .nav-container , a{
    width: 70px;

  }

  a:hover{
    width:200px; 
    z-index:1;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid black;
    box-shadow: 0 0 1px 1px black;
  }

  a:hover  .text {
    display:block;
    padding-left:30%;
  }
}
@media only screen and (max-width : 480px){
  .nav-container, a{ width:50px;}
  span[class ^= "icon"]{ left:8px;}
}

我正在尝试创建它，以便有一个'子菜单'，如：

+----------------+-----+
|                |     |
||Menu1          |     |
| |sub menuA     | ||| |
||Menu2          |     |
| |sub menuB     |     |
|                |     |
+----------------+-----+
                    ^
                    |
              DevExpress content splitter

我应该如何构建我的subChild课程才能实现这一目标？

到目前为止我的功能是：

$('li').click(function () {

    $(this).addClass('active')
         .siblings()
         .removeClass('active');
});

非常感谢任何建议/帮助。

Updated Fiddle这就是我的项目当前显示的方式（或者“不是”那个问题：L） - 您将不得不原谅内联样式，它主要来自于如此多的测试/等等

Answer 1

<强>解决！

我能够从@ Paulie_D关于a和li区域内高度的建议中获得答案。

this jsfiddle显示了它的实际效果！

删除高度属性如下所示：

li{
  /*height:50px; */
  position:relative;
  background: linear-gradient(#292929, #242424);
}

a {
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid black;
  text-decoration:none;
  display:block;
  /*height:100%;*/
  width:100%;
  line-height:50px;
  color:#bbb;
  text-transform: uppercase;
  font-weight: bold;
  padding-left:25%;
  border-left:5px solid transparent;
  letter-spacing:1px;
  transition: all 0.3s linear;
}

子菜单未显示在NavBar中

1 个答案: