根据this plugin,以下是我的尝试:
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"> <a data-toggle="dropdown" href="#">Explore the Monkeys</a>
<ul class="dropdown-menu" role="menu">
<li data-submenu-id="submenu-1"> <a href="#">Department1</a>
<div id="submenu-1" class="popover">
<!--<h3 class="popover-title">Category1</h3> -->
<div class="popover-content">
<ul>
<li>cate1</li>
<li>cate2</li>
<li>cate3</li>
<li>cate4</li>
<li>cate5</li>
<li>cate6</li>
<li>cate7</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-4"><a href="#">Department4</a></li>
<li data-submenu-id="submenu-5"><a href="#">Department5</a></li>
</ul>
</li>
</ul>
</div>
</div>
这是CSS:
.popover {
width: 400px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
overflow: hidden;
}
.popover-content {
text-align: center;
}
.dropdown-menu {
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
问题:Department1
的子菜单仅显示cate1,2,3,4
和cate5,6,7
。
任何人都知道,如何在cate5,6,7
的右侧显示cate1,2,3,4
,如亚马逊导航菜单。
答案 0 :(得分:0)
提供小提琴会有很大帮助!
至于如何通过添加以下内容来解决此问题:
.popover-content {
text-align: center;
height: 100%
}
答案 1 :(得分:0)
最好的解决方案是为每x个孩子添加一个新的ul。 因此:
<ul class="main">
<li>
<ul>
<li>cate 1</li>
<li>cate 2</li>
<li>cate 3</li>
<li>cate 4</li>
</ul>
</li>
<li>
<ul>
<li>cate 5</li>
<li>cate 6</li>
<li>cate 7</li>
<li>cate 8</li>
</ul>
</li>
</ul>
当然,CSS很简单:
ul.main > li{
float: left;
}
使用一个列表中断的css是可能的,但是非常hacky。