带有 ul 的 WordPress 菜单：防止下拉菜单容器溢出

Question

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

到目前为止，我已经让下拉部分正常工作，但如果容器末尾有一个菜单项，则下拉菜单会扩展而看不见，并导致整个页面比应有的更宽（尤其是在移动设备上） .

这是下拉菜单在移动设备上的外观。黄色背景表示整个页面的宽度：

这是移动设备上的菜单。如您所见，它超出了页面的末尾。

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

所以最大的问题是：我能否以某种方式使子菜单 (ul) 永远不会扩展到站点之外。下图显示了我希望能够以某种方式实现的目标：

我使用的 html 是 WordPress 生成的，看起来是这样的：

/* 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;
}

<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>

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;
    }
}