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).
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
Post a Comment