当相对于可用的浏览器窗口没有水平空间时，以相反的方向打开CSS子菜单
Open CSS sub menus in the opposite direction, when there is no horizontal space relative to the browser window available
我已经创建了一个CSS菜单，看起来像这样。
$(document).ready(function() {
$("a:only-child").addClass("only-child");
});#main_nav {
padding: 0;
margin: 0;
display:inline-block;
width: 100%;
background: #888;
z-index: 300 !important;
}
#main_nav ul {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
background: #888;
z-index: 300 !important;
min-width: 150px;
white-space: nowrap;
}
#main_nav a:hover {
color: #FFFAF0;
-webkit-transform: translateY(-1px);
-ms-transform: translateY(-1px);
transform: translateY(-1px);
}
#main_nav ul a {
display:block;
text-decoration:none;
font-size:12px;
line-height:32px;
padding:3px 15px;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
}
#main_nav ul li {
position:relative;
float:left;
margin:0;
padding:0;
}
#main_nav ul li.current-menu-item {
background:#ddd;
}
#main_nav ul li:hover {
background: #777;
}
#main_nav ul ul {
display:none;
position:absolute;
top:100%;
left:0;
background:#888;
padding:0;
}
#main_nav ul ul li {
float:none;
white-space: nowrap;
width: 100%;
}
#main_nav ul ul a {
line-height:120%;
padding:10px 15px;
}
#main_nav ul ul ul {
top:0;
left:100%;
}
#main_nav ul li:hover > ul {
display:block;
}
#main_nav > ul > li {
display: inline-block;
float: none;
margin: 0 -3px 0 0;
}
.menu li:last-of-type { border-right: none; }
.menu li > a:after {position: absolute; right: 5px; content: ''25BA'; }
.menu > li > a:after {position: absolute; right: 0px; content: ''25BC'; }
.menu li > a.only-child:after { margin-left: 0; content: ''; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_nav">
<ul class="menu">
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a>
<ul>
<li><a href="#">Deep Menu 1</a>
<ul>
<li><a href="#">Deep Menu 3</a>
<ul>
<li><a href="#">Deep Menu 5</a>
<ul>
<li><a href="#">Deep Menu 7</a>
<ul>
<li><a href="#">Deep Menu 9</a>
<ul>
<li><a href="#">Deep Menu 11</a>
<ul>
<li><a href="#">Deep Menu 13</a>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 14</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 12</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 10</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 8</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 6</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 4</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>在其中一个子菜单中，许多子菜单一个接一个地打开，导致水平溢出，当许多子菜单顺序打开后没有足够的空间容纳子菜单时。
是否有可能打开一个子菜单在相反的方向，当没有足够的水平空间相对于浏览器窗口左，以容纳最后的子菜单打开使用任何可以使它成为可能-纯CSS, JavaScript/jQuery?
我明白你的问题，但如果你浮动子菜单的左边，它会重叠前一个子菜单。你试过吗?试着这样做:
#main_nav ul ul ul ....
直到需要左浮动的位置，然后添加左浮动。这是我唯一知道的。您还可以做的是让menu1垂直折叠(子菜单的to)。
你也可以让大菜单垂直折叠而不是水平折叠
使用媒体查询，你将达到预期的结果:如果viewport的宽度等于或大于500px，菜单将浮动到右边，否则将浮动到左边。你可以根据需要调整宽度
.menu {
display: flex;
}
.menu li {
list-style: none;
position: relative;
background-color: yellow;
}
.menu li:hover > ul {
display: block;
}
.sub-menu li {
background-color: red;
}
.menu ul {
display: none;
position: absolute;
top: 100%;
min-width: 150px;
background-color: red;
right: 0;
}
@media (min-width: 500px) {
.menu ul {
left: 0;
}
}
.menu a {
display: block;
padding: 10px 20px;
text-decoration: none;
}<ul class="menu">
<li><a href="#">Menu item 1</a>
<ul class="sub-menu">
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 2</a></li>
<li><a href="#">Submenu item 3</a></li>
</ul>
</li>
<li><a href="#">Menu item 2</a>
<ul class="sub-menu">
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 2</a></li>
<li><a href="#">Submenu item 3</a></li>
</ul>
</li>
<li><a href="#">Menu item 3</a></li>
</ul>相关文章：
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- ng映射方向备选方案
- Jquery菜单操作不稳定，定位不正确，存在一般错误
- angular的下拉菜单
- 使用JQuery的动态上下文菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- RubyonRails——构建交互式接口应该朝哪个方向发展
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- Div根据<选择>菜单
- I'我设计了一个下拉菜单，onclick会出现，而on blur会消失
- 硒IDE下拉菜单
- 将JavaScript弹出菜单转换为警报框
- 调整屏幕大小后不显示子菜单
- 固定位置菜单时滚动，直到它击中一个相对容器的底部
- 我的下拉菜单中的链接不起作用
- 如何反转吸盘鱼菜单的方向(下拉菜单）
- 当相对于可用的浏览器窗口没有水平空间时，以相反的方向打开CSS子菜单
- 改变菜单方向
