html - 带有 ul : prevent drop down from overflowing menu container 的 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;
    }
}