jquery - My css dropdown menu shows in the wrong place on internet explorer and firefox -
everything works great on chrome , safari when tried check using ie , ff submenu menu shows in left side of main navigation. website cedumilam.php.cs.dixie.edu. css code:
#nav { margin: auto; z-index: 10; display: inline; text-transform: uppercase; text-align: center; } #nav ul { width:570; margin:0px auto 2px auto; text-align:center;} #nav ul li{display: inline; position:relative; z-index:99; } #nav li:hover { position: relative } #nav li:hover > { color: #845343; text-decoration:underline; } #nav li.sub:hover > { border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; } #nav li { color: black; font-weight: bold; text-decoration: none; padding: 15px; display: inline; } #nav li ul { background: #fff; margin-top: 5px; display: none; } #nav li:hover ul { display:block; position:absolute; } #nav li ul { background: white; padding: 2px; } #nav li ul li a, #nav li ul li a:hover { background: transparent; color: #000; width: 250px; font-size: 0.95em; font-weight: normal; } #nav li ul li a:hover { color: #845343; text-decoration: underline; }
to make work in firefox, add this:
#nav li:hover ul { left: 0; }
i think firefox (and possibly internet explorer) interpret position: absolute;
differently.
sorry -- don't have internet explorer set currently, can't test there...
here's fiddle: http://jsfiddle.net/niffler/aq39n/
Comments
Post a Comment