CODEWITHSUNDEEP
csswordpress
Seamus
Seamus

Reputation: 35

WordPress sub-menu items not displaying properly on hover

I am having trouble with the sub-menu items at the following site. Actually the problem is with the sub-sub-menu items, i.e. the 3rd level items (I am not sure what these are actually called).

You may need front-end password to view "calzada321" (no quote marks).

http://polynovo.com.au/

As per screenshot (link below), in most browsers, the 3rd level items are squished, ie they do not display in an attractive or useful fashion on hover. I am not sure how to fix (obviously). Any help appreciated.

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

Upvotes: 0

Views: 4856

Answers (1)

Ariona Rian
Ariona Rian

Reputation: 9457

There is some issue in your css code, like hovering action. first you should use direct child selector for showing the sub-menu, so the third level will remain hidden.

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

And lastly is for your problem, add styling for sub-menu starting from the third level. You just need to set the left property to 0;

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

EDITED ANSWER ACCORDING TO THE CODE SNIPPET

you can change this selector which is for showing sub-menu to this

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

this selector will show only direct sub-menu, not all sub-menu in one menu item. and you don't need to set margin top nor margin-left.

Next you need to add styling for third level menu, since this menu positioned on the left side.

#navigation .sub-menu .sub-menu{ left: 100%; top : 0; }

Since the sub-menu is absolute positioned, you just need to set the left to 100%, this will placed the third level menu sit next to the selected 2nd level menu

Upvotes: 0

Related Questions