html - Sub-Menu Hover Only Partionaly Working -

html - Sub-Menu Hover Only Partionaly Working -

here is:

http://gyazo.com/e94edf3c9b10bc33c2d9be8ed049583e

as can see, submenu works, , when hover on on submenu, creates gray background. problem is, 1 time under "sports edition", hover cancels , closes submenu. stops right bluish line begins.

here code: html:

<div id="toprightunder"> <ul> <li> <a href="#">content options</a> <ul> <li><a href="#">default homepage</a></li> <li><a href="#">news edition </a>li> <li><a href="#">entertainment edition</a></li> <li><a href="#">sports edition</a></li> <li><a href="#">latino edition</a></li> </ul> </li> </ul> </div>

css: (there lot because testing lot)

#toprightunder { margin-top:18px; height:15px; position:absolute; width:200px; right:0; } #toprightunder { text-decoration:none; color:rgb(100, 100, 100); margin-left:0; padding-bottom:3px; } #toprightunder ul { list-style:none; margin:0 auto; /*text-align:right;*/ position:relative; display:inline-table; margin-left:0; padding-left:0; } #toprightunder ul li { display:inline; color:rgb(100, 100, 100); font-family:"arial", times, sans-serif; font-size:10px; margin-top:13px; text-decoration:none; margin-left:0; padding-left:0; } #toprightunder ul ul { display:none; } #toprightunder ul li:hover > ul { display:block; } #toprightunder ul ul { position: absolute; top: 100%; padding-top:2px; padding-bottom:7px; margin-right:0; right:0px; background: white; border: 1px solid #000; overflow:hidden; height:auto; margin:auto; } #toprightunder ul ul li { position:relative; color:rgb(100, 100, 100); font-size:13px; display:block; /*margin-bottom:10px; padding-left:25px; padding-right:4px;*/ white-space:nowrap; height:auto; margin:auto; } #toprightunder ul ul li { color:#fff; text-align:left; float:left; margin-right:0; position:relative; } #toprightunder a:hover { background-color:transparent; color:rgb(100, 100, 100); } #toprightunder ul li:hover > li { background-color:transparent; } #toprightunder ul ul li:hover > { color:rgb(50, 50, 50); background:rgb(240, 240, 240); } #toprightunder ul ul li > { color:rgb(100, 100, 100); padding-bottom:7px; padding-top:2px; padding-left:25px; width:100%; } #headbar { text-decoration:none; color:white; padding-bottom:2px; padding-top:4px; padding-left:8px; padding-right:8px; } #headbar ul ul { display:none; } #headbar ul li:hover > ul { display:block; color:green; } #headbar ul { text-decoration:none; list-style:none; margin-top:1px; padding:0; position:relative; } #headbar ul li { display:inline; color: white; padding-bottom:2px; padding-top:3px; font-family:"arial", times, sans-serif; font-size:12px; } #headbar ul ul { border-radius: 0px; position: absolute; top: 100%; padding-top:6px; } #headbar ul ul li { float:none; position:relative; color:rgb(100,100,100); font-size:16px; } #headbar ul ul li { color:#fff; } #headbar ul ul li a:hover { } /*#headbar ul:after { content: ""; clear:both; display:block;*/ #headbar a:hover { background-color:rgb(255,255,255); color:rgb(100,100,100); } #headbar ul li:hover > a{ color:rgb(50,50,50); background-color:transparent; padding-top:8px; } #headbar ul ul li > { color:rgb(100,100,100); padding-top:8px; } #headbar { width: 100%; height: 20px; background-color: rgb(30,144,255); text-decoration:none; padding-top:129px; text-align: left; /*position:relative;*/ }

add z-index: 2; #toprightunder selector , should resolve problem.

#toprightunder { margin-top:18px; height:15px; position:absolute; width:200px; right:0; z-index: 2; }

html css drop-down-menu hover onhover