html - How can I stop my submenu from disappearing while hovering between spaced submenu items? -


i have css menu submenu, , each submenu list item has 1px space between them. problem occurs in ie, unless move cursor quickly, submenu disappear while hovering between 2 submenu items (due 1px space). how stop happening while keeping 1px spaces?

<nav id="menu" class="sixteen columns">     <ul id="nav">         <li><a href="#">home</a>             <ul>                 <li><a href="#">drop 1</a></li>                 <li><a href="#">drop 1</a></li>                 <li><a href="#">drop 1</a></li>             </ul>         </li>         <li><a href="#">services</a></li>         <li><a href="#">contact us</a></li>      </ul> </nav>  #menu {     position: relative;     z-index: 999; } ul#nav {     margin: 0;     padding: 1px 0;     width: auto; } /* start first level nav items */ ul#nav li {     float: left;     padding: 4px;     list-style: none;     list-style-image: none; } ul#nav li {     font-size: 13px;     text-decoration: none;     display: block;     text-align: left;     padding: 3px 9px;     white-space: nowrap;     text-transform: uppercase;     color: #000;     border-radius: 5px;     -moz-border-radius: 5px;     -webkit-border-radius: 5px; } ul#nav li.current a, ul#nav li a:hover {     color: #fff;     background: black;     border-radius: 5px;     -moz-border-radius: 5px;     -webkit-border-radius: 5px; }         ul#nav li ul {     position: absolute;     width: 10em;     left: -999em;     margin:0px;     padding:0px; } ul#nav li ul li {     padding: 0;     margin: 1px 0; } ul#nav li ul li a,  ul#nav li.current ul li {     width: 200px;     background-color: #000;     line-height: 26px;     color: #fff; } ul#nav li ul li a:hover,  ul#nav li.current ul li a:hover {        background-color: #fa891c;     color: #fff; } 

get rid of 1px margin , add 1px spacer part of hover element.

ul#nav li ul li {     padding: 0;     margin: 1px 0;   /* change margin:0px;*/ } 

and...

ul#nav li.current ul li {     border-bottom: 2px solid transparent;   /*add this*/     padding: 0px;                           /*and this*/      width: 200px;     background-color: #000;     line-height: 26px;     color: #fff; } 

and add css

.submenu1 {     margin-left:10px; /* adjust needed */ } 

and wrap submenu items in div this:

<li><a href="#"><div class="submenu1">drop 1</div></a></li> 

http://jsfiddle.net/bzkfy/


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -