css - WordPress sub-menu items not displaying properly on hover -


i having trouble sub-menu items @ following site. problem sub-sub-menu items, i.e. 3rd level items (i not sure these called).

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

http://polynovo.com.au/

as per screenshot (link below), in browsers, 3rd level items squished, ie not display in attractive or useful fashion on hover. not sure how fix (obviously). 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 {  	color: #002d62;      display: block;      font-size: 15px;      /* font-weight: bold; */      padding: 18px 17px 18px 16px;      text-transform: uppercase;  }    #navigation .menu-item:first-child {  	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 > {  	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 item below made sub-sub items sit out more 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 {  	padding: 0;  	font-weight: normal;   	line-height: 40px;  	text-transform: none;  }

there issue in css code, hovering action. first should use direct child selector showing sub-menu, third level remain hidden.

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

and lastly problem, add styling sub-menu starting third level. need set left property 0;

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

edited answer according code snippet

you can change selector showing sub-menu this

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

this selector show direct sub-menu, not sub-menu in 1 menu item. , don't need set margin top nor margin-left.

next need add styling third level menu, since menu positioned on left side.

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

since sub-menu absolute positioned, need set left 100%, placed third level menu sit next selected 2nd level menu


Comments

Popular posts from this blog

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -