Question

我在以下网站上的子菜单项遇到问题。实际上问题在于子子菜单项，即第3级项（我不确定这些是实际调用的）。

您可能需要使用前端密码才能查看“calzada321”（无引号）。

http://polynovo.com.au/

根据屏幕截图（下面的链接），在大多数浏览器中，第3级项目被压缩，即它们在悬停时不会以有吸引力或有用的方式显示。我不知道如何解决（显然）。任何帮助赞赏。

http://polynovo.com.au/wp-content/uploads/2014/11/Untitled-1.jpg

/* 2.3 Navigation
------------------------------------------------------------------------------*/

#navigation {
	margin-bottom: 7px;
	position: relative;
	z-index: 2;
}

#navigation .menu-item {
	float: left;
	background: url(../images/common/bg_nav-separator.png) no-repeat 0 center;
	position: relative;
}

#navigation .menu-item:first-child {
	background: none;
}

#navigation .menu-item.has-sub-menu:hover {
	background-color: #e5eaef;
}

#navigation .menu-item a {
	color: #002d62;
    display: block;
    font-size: 15px;
    /* font-weight: bold; */
    padding: 18px 17px 18px 16px;
    text-transform: uppercase;
}

#navigation .menu-item:first-child a {
	padding-left: 3px;
}

#navigation .current-menu-item > a,
#navigation .current-page-ancestor > a,
#navigation .menu-item a:hover {
	color: #c72932;
	text-decoration: none;
}

#navigation .has-sub-menu .current-page-ancestor > a {
	color: #002e62;
}

#navigation .has-sub-menu .current-page-ancestor > a:hover {
	color: #fcb040;
	text-decoration: none;
}

/* Sub-navigation */
#navigation .sub-menu {
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	padding: 17px 22px 18px;
	width: 155px;
	background: #e5eaef;
}

#navigation .menu-item.has-sub-menu:hover .sub-menu {
	display: block;
}

/* ---I added this item below made sub-sub items sit out more but still not good---*/
#navigation .menu-item.has-sub-menu:hover .sub-menu .sub-menu {
	margin-left:200px; 
	margin-top:-35px; 
	display:block;
}

#navigation .sub-menu .menu-item {
	float: none;
	padding-left: 12px;
	margin-bottom: 5px;
	background: transparent url(../images/common/sprite_icons.png) no-repeat 1px -229px;
}

#navigation .sub-menu .menu-item a {
	padding: 0;
	font-weight: normal; 
	line-height: 40px;
	text-transform: none;
}

Answer 1

您的css代码中存在一些问题，例如悬停操作。首先，您应该使用直接子选择器来显示子菜单，因此第三级将保持隐藏状态。

.menu-item:hover > .sub-menu{ display: block }

最后是针对您的问题，从第三级开始为子菜单添加样式。您只需将left属性设置为0;

.sub-menu .sub-menu{ left: 0 }

根据代码SNIPP编辑的回复

你可以改变这个用于显示子菜单的选择器

#navigation .menu-item:hover > .sub-menu { display: block }

此选择器仅显示直接子菜单，而不是一个菜单项中的所有子菜单。并且您不需要设置上边距或左边距。

接下来，您需要为第三级菜单添加样式，因为此菜单位于左侧。

#navigation .sub-menu .sub-menu { 左：100％; 顶部：0; }

由于子菜单是绝对定位的，您只需将左侧设置为100％，这将使第三级菜单位于所选的第二级菜单旁边

WordPress子菜单项在悬停时无法正常显示

1 个答案: