带有ul的WordPress菜单：防止从溢出的菜单容器中删除

Question

也许你们其中一个人知道解决方案。我想设置我的WordPress菜单样式，以便只显示顶级菜单条目并隐藏子菜单。在悬停时，我想显示子菜单。

到目前为止，我得到了下拉部分工作，但如果容器末端有一个菜单项，则下拉菜单会扩大视线范围，导致整个页面比应该更宽（特别是在移动设备上）

以下是移动设备上的下拉列表。黄色背景表示整页的宽度：

这是手机上的菜单。如您所见，它超出了页面的末尾。

嗯，实际上，它使整个页面应该更宽。

所以最大的问题是：我可以以某种方式使子菜单（ul）永远不会比网站进一步扩展。下图显示了我希望能够以某种方式实现的目标：

我使用的html是由WordPress生成的，如下所示：

＆＃13;

＆＃13;

/* Display first level as one row */
.et_pb_jt_flexible_menu_nav {
background-color: grey;
}

 .et_pb_jt_flexible_menu_nav > ul {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   position: relative;
   padding: 28px 0 0!important;
   line-height: 1.7em;
 }


/* Hide second level and below and make visible on hover */
.et_pb_jt_flexible_menu_nav > ul > li > ul {
  position: absolute;
  visibility: hidden;
  top: 100%;
  z-index: 9999;
  width: 240px;
  padding: 20px;
  background-color: yellow;
}

.et_pb_jt_flexible_menu_nav li:hover>ul {
  visibility: visible;
}



/*Style first level of menu*/
.et_pb_jt_flexible_menu_nav > ul > li {
  line-height: 1em;
  position: relative;
  padding: 10px;
}


/* Remove padding from submenus bottom */
.et_pb_jt_flexible_menu_nav > ul > li > ul .sub-menu {
  padding-bottom: 0px;
}



/* Remove dots from all menu entries */
.et_pb_jt_flexible_menu_nav ul {
  list-style-type: none !important;
}


/* Add drop down arrow to first level menu with children */
.et_pb_jt_flexible_menu_nav > ul > li.menu-item-has-children>a:first-child:after {
  position: absolute;
  right: 0;
  font-family: ETmodules;
  font-size: 16px;
  font-weight: 800;
  content: "3";
}

.et_pb_jt_flexible_menu_nav > ul > .menu-item-has-children > a {
  padding-right: 8px;
}



/* Make all links use padding to be better touchable and clickable */
.et_pb_jt_flexible_menu_nav li li {
  line-height: 2em;
}

.et_pb_jt_flexible_menu_nav li li a {
  padding: 6px 20px;
  display: block;
}

＆＃13;

<nav class="et_pb_jt_flexible_menu_nav"><ul id="menu-menu" class=""><li class="et_pb_menu_page_id-home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-40 current_page_item menu-item-230"><a href="http://localhost/wordpress/">Home</a></li>
<li class="et_pb_menu_page_id-231 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-231"><a>Post (Categories)</a>
<ul class="sub-menu">
	<li class="et_pb_menu_page_id-6 menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-227"><a href="http://localhost/wordpress/category/cat1/">Category 1</a>
	<ul class="sub-menu">
		<li class="et_pb_menu_page_id-8 menu-item menu-item-type-taxonomy menu-item-object-category menu-item-229"><a href="http://localhost/wordpress/category/cat1/subcat1/">Subcategory 1</a></li>
		<li class="et_pb_menu_page_id-7 menu-item menu-item-type-taxonomy menu-item-object-category menu-item-228"><a href="http://localhost/wordpress/category/cat1/subcat2/">Subcategory 2</a></li>
	</ul>
</li>
	<li class="et_pb_menu_page_id-9 menu-item menu-item-type-taxonomy menu-item-object-category menu-item-225"><a href="http://localhost/wordpress/category/cat2/">Category 2</a></li>
	<li class="et_pb_menu_page_id-1 menu-item menu-item-type-taxonomy menu-item-object-category menu-item-226"><a href="http://localhost/wordpress/category/cat3/">Category 3</a></li>
</ul>
</li>
<li class="et_pb_menu_page_id-232 menu-item menu-item-type-custom menu-item-object-custom menu-item-232"><a>Post (Länder)</a></li>
<li class="et_pb_menu_page_id-235 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-235"><a href="http://localhost/wordpress/project/">Projects</a>
<ul class="sub-menu">
	<li class="et_pb_menu_page_id-236 menu-item menu-item-type-custom menu-item-object-custom menu-item-236"><a href="http://localhost/wordpress/project_category/category-1/">Category 1</a></li>
	<li class="et_pb_menu_page_id-237 menu-item menu-item-type-custom menu-item-object-custom menu-item-237"><a href="http://localhost/wordpress/project_category/category-2/">Category 2</a></li>
</ul>
</li>
<li class="et_pb_menu_page_id-235 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-235"><a href="http://localhost/wordpress/project/">Projects</a>
<ul class="sub-menu">
	<li class="et_pb_menu_page_id-236 menu-item menu-item-type-custom menu-item-object-custom menu-item-236"><a href="http://localhost/wordpress/project_category/category-1/">Category 1</a></li>
	<li class="et_pb_menu_page_id-237 menu-item menu-item-type-custom menu-item-object-custom menu-item-237"><a href="http://localhost/wordpress/project_category/category-2/">Category 2</a></li>
</ul>
</li>
<li class="et_pb_menu_page_id-235 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-235"><a href="http://localhost/wordpress/project/">Projects</a>
<ul class="sub-menu">
	<li class="et_pb_menu_page_id-236 menu-item menu-item-type-custom menu-item-object-custom menu-item-236"><a href="http://localhost/wordpress/project_category/category-1/">Category 1</a></li>
	<li class="et_pb_menu_page_id-237 menu-item menu-item-type-custom menu-item-object-custom menu-item-237"><a href="http://localhost/wordpress/project_category/category-2/">Category 2</a></li>
</ul>
</li>
</ul></nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我看到你问题的两个部分：

<强> 1。右对齐最后一个菜单项的子菜单

使用CSS只需使用以下内容即可轻松实现：

.et_pb_jt_flexible_menu_nav > ul > li:last-child > ul.sub-menu {
    left: auto;
    right: 0;
}

<强> 2。只有在溢出菜单容器

时才这样做

仅使用CSS实现此目的的唯一方法是使用媒体查询并设置特定子菜单应该右对齐的断点。

您需要根据菜单的实际宽度和溢出点确定断点。例如如果子菜单开始以460px溢出但在600px处有足够的空间：

@media only screen and (min-width: 460px) and (max-width: 600px){
    .et_pb_jt_flexible_menu_nav > ul > li:last-child > ul.sub-menu {
        left: auto;
        right: 0;
    }
}