I have a css dropdown code which is working fine in all browsers except IE8 quirks mode.
badly stuck with my code please help.i think hover is not working in IE8 quirks mode.
I have little idea about css please guide.
Here is html
<UL id=navmenu-h>
<LI>Home</LI>
<LI>Paper Rolls
<UL>
<LI>ATM Rolls </LI>
</UL>
</LI>
</UL>
Here is css
UL#navmenu-h {
Z-INDEX: 1; POSITION: relative; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; BACKGROUND: #54b948; PADDING-TOP: 0px
}
UL#navmenu-h UL {
Z-INDEX: 1; POSITION: absolute; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 200px; PADDING-RIGHT: 0px; DISPLAY: none; TOP: 100%; PADDING-TOP: 0px; LEFT: 0px
}
UL#navmenu-h UL UL {
Z-INDEX: 1; TOP: 0px; LEFT: 100%
}
UL#navmenu-h UL UL UL {
Z-INDEX: 1; TOP: 0px; LEFT: 100%
}
UL#navmenu-h LI {
Z-INDEX: 1; POSITION: relative; DISPLAY: inline; FLOAT: left; COLOR: #54b948
}
UL#navmenu-h UL LI {
Z-INDEX: 1; WIDTH: 100%
}
UL#navmenu-h A {
Z-INDEX: 1; PADDING-BOTTOM: 6px; PADDING-LEFT: 6px; WIDTH: auto; PADDING-RIGHT: 6px; DISPLAY: block; FONT: bold 13px Arial, sans-serif; BACKGROUND: #54b948; FLOAT: left; COLOR: #fff; BORDER-RIGHT: #fff 0px solid; TEXT-DECORATION: none; PADDING-TOP: 6px
}
UL#navmenu-h A:hover {
Z-INDEX: 1; BORDER-BOTTOM-COLOR: #f0f0f0; BORDER-TOP-COLOR: #f0f0f0; BACKGROUND: #54b948; COLOR: #fff; BORDER-RIGHT-COLOR: #f0f0f0; BORDER-LEFT-COLOR: #f0f0f0
}
UL#navmenu-h LI:hover A {
Z-INDEX: 1; BORDER-BOTTOM-COLOR: #f0f0f0; BORDER-TOP-COLOR: #f0f0f0; BACKGROUND: #54b948; COLOR: #fff; BORDER-RIGHT-COLOR: #f0f0f0; BORDER-LEFT-COLOR: #f0f0f0
}
UL#navmenu-h LI:hover LI:hover LI A:hover {
BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI:hover A {
BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover UL UL {
DISPLAY: none
}
UL#navmenu-h LI:hover UL UL UL {
DISPLAY: none
}
UL#navmenu-h LI:hover UL UL UL UL {
DISPLAY: none
}
UL#navmenu-h LI:hover UL UL UL UL UL {
DISPLAY: none
}
UL#navmenu-h LI:hover UL {
DISPLAY: block
}
UL#navmenu-h UL LI:hover UL {
Z-INDEX: 1; DISPLAY: block
}
UL#navmenu-h UL UL LI:hover UL {
Z-INDEX: 1; DISPLAY: block
}
UL#navmenu-h UL UL UL LI:hover UL {
Z-INDEX: 1; DISPLAY: block
}
UL#navmenu-h UL UL UL UL LI:hover UL {
Z-INDEX: 1; DISPLAY: block
}
UL#navmenu-h LI:hover LI A {
Z-INDEX: 1; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; FONT: bold 11px Arial, sans-serif; BACKGROUND: #fff; FLOAT: none; COLOR: #656565; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid
}
UL#navmenu-h LI:hover LI:hover LI A {
Z-INDEX: 1; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; FONT: bold 11px Arial, sans-serif; BACKGROUND: #fff; FLOAT: none; COLOR: #656565; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid
}
UL#navmenu-h LI:hover LI:hover LI:hover LI A {
Z-INDEX: 1; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; FONT: bold 11px Arial, sans-serif; BACKGROUND: #fff; FLOAT: none; COLOR: #656565; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid
}
UL#navmenu-h LI:hover LI:hover LI:hover LI:hover LI A {
Z-INDEX: 1; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; FONT: bold 11px Arial, sans-serif; BACKGROUND: #fff; FLOAT: none; COLOR: #656565; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid
}
UL#navmenu-h LI:hover LI A:hover {
Z-INDEX: 1; BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover A {
Z-INDEX: 1; BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI:hover LI A:hover {
Z-INDEX: 1; BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI:hover LI:hover A {
Z-INDEX: 1; BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI:hover LI:hover LI A:hover {
Z-INDEX: 1; BACKGROUND: #54b948; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI:hover LI:hover LI:hover A {
Z-INDEX: 1; BACKGROUND: #54b948; COLOR: #fff
}
.menuColor {
BACKGROUND-COLOR: #54b948
}
I ran into the exact same issue. It turned out I was missing .
Entering the following at the top of my HTML page solved my problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
add position:relative on the div under your menu
Related
I'm newbie with HTML Lists, I am trying to disable "Hover flyout effect" and list all sub items vertically below the main item and they should remain visible , Please help me to understand what are those properties in this particular CSS which will disable this effect
Here is the fiddle
https://jsfiddle.net/qbg6jw9p/
CSS
#prod_nav {
position: relative;
z-index: 300;
border-left: 1px solid #d7d7d7;
border-right: 1px solid #d7d7d7;
border-bottom: 2px solid #d7d7d7;
}
#prod_nav li.top {
display: block;
float: left;
width: 170px;
border-top: 1px solid #d7d7d7;
border-bottom: 1px solid #fbfbfb;
height: 31px;
}
#prod_nav li a.top_link {
font-size: 11px;
display: block;
width: 159px;
padding-left: 11px;
line-height: 31px;
color: #252525;
text-decoration: none;
font-weight: bold;
cursor:pointer;
background: #f0f0f0;
}
#prod_nav li a.top_link span, #prod_nav li a.top_link span.down {
display: block;
padding-right: 20px;
background: url(../images/productmenu-arrow.gif) no-repeat right center;
}
#prod_nav li:hover a.top_link {
color:#0072bc;
background: #fff;
}
#prod_nav li:hover a.top_link span, #prod_nav li:hover a.top_link span.down { background: url(../images/productmenu-arrow-hover.gif) no-repeat right center; }
/* Default list styling */
#prod_nav li:hover {
position:relative;
z-index:200;
}
#prod_nav li:hover ul.sub {
left: 170px;
top: -1px;
background: #fff url(../images/productmenu-leftborder.gif) no-repeat left top;
border: 1px solid #e2e2e2;
border-left: 0;
white-space: nowrap;
width: 384px;
height: auto;
z-index: 300;
}
#prod_nav li:hover ul.sub li {
display: block;
position: relative;
float: left;
width: 364px;
font-weight: normal;
background: url(../images/productmenu-section-bg.png) no-repeat right bottom;
padding: 10px 0 10px 20px;
}
#prod_nav ul, #prod_nav li:hover ul {
position:absolute;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}
/* Overwrite the above settings */
#prod_nav li:hover ul.sub ul {
position: relative;
left: auto;
top: auto;
width: auto;
height: auto;
float: left;
width: 152px;
padding-right: 20px;
background: none;
}
#prod_nav li:hover ul.sub ul li {
background: none;
padding: 8px 0;
margin-right: 20px;
width: 132px;
}
#prod_nav li:hover ul.sub ul li a {
color: #363636;
text-decoration: none;
white-space: normal;
}
#prod_nav li:hover ul.sub li a:hover {
color: #0072bc;
text-decoration: underline;
}
#prod_nav li:hover li:hover a.fly, #prod_nav li:hover li:hover li:hover a.fly, #prod_nav li:hover li:hover li:hover li:hover a.fly, #prod_nav li:hover li:hover li:hover li:hover li:hover a.fly {
background: none;
}
Change the left and top positioning on ul.sub. Currently the item dropdown ul.sub is being told to move 170px from the left, and -1px (up 1 pixel) from the top when the menu is hovered over.
#prod_nav li:hover ul.sub {
left: 0;
top: 31px;
background: #fff url(../images/productmenu-leftborder.gif) no-repeat left top;
border: 1px solid #e2e2e2;
border-left: 0;
white-space: nowrap;
width: 384px;
height: auto;
z-index: 300;
}
Updated Fiddle
In this site I have a problem with the submenu that appears in the main navigation, there's a space before the list with the links I don't know why it changed but it appeared fine before, I really don't have an idea of what happened
#navigation {
float: right;
}
#navigation li {
float: left;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
display: block;
}
#navigation li strong {
font-weight: 400;
border-right: #e8e8e8 1px solid;
display: block;
padding: 10px 20px;
}
#navigation li a {
padding: 20px 0;
color: #1c1c1c;
text-decoration: none;
display: block;
}
#navigation li:last-child strong {
border-right: none;
}
#navigation li span {
display: block;
color: #a09d9d;
text-transform: lowercase;
letter-spacing: 0.01em;
margin: 5px 0 0 0;
}
#navigation li a:hover span,
#navigation li:hover span,
#navigation li.current-menu-item a span {
color: #1c1c1c;
}
#navigation li li.current-menu-item,
#navigation li li.current_page_item,
#navigation li li:hover {
border-bottom: none;
}
#navigation li li,
#navigation li li:hover {
text-transform: none;
letter-spacing: 0;
border-bottom: #e8e8e8 1px solid;
}
#navigation li li a.sf-with-ul:after {
background: url(../images/arrows2.png) no-repeat;
width: 8px;
height: 8px;
content: '';
position: absolute;
top: 36%;
right: 1em;
}
#navigation li li a {
padding: 15px 20px;
background: #fff;
font-size: 13px;
}
#navigation li li a:hover {
background: #fafafa;
}
#navigation .current-menu-item,
#navigation .current_page_item,
#navigation li:hover {
border-bottom: 4px solid;
}
#navigation li ul {
box-shadow: 0 0 4px rgba(136, 136, 136, 0.6);
}
Seems like the top attribute value is just to high, change it to 93px
#navigation li:hover ul, #navigation li.sfHover ul {
left: 0.01em;
top: 93px;
z-index: 99;
}
Here is an another possible option from Bart:
#navigation li:hover ul, #navigation li.sfHover ul {
left: 0.01em;
top: 100%;
z-index: 99;
}
This seems to work too.
#navigation ul {
position: absolute;
width: 19em;
top: -999em;
margin-top: -39px;
}
In situations like this, i suggest you to use Firebug or Developer Tools integrated on your browser. A very little check using the Inspector tool (found in all developer tools and on Firebug) could have shown you how to resolve this problem very easily.
Or.......
Just remove:
top: -999em;
from:
#navigation ul {
position: absolute;
/* top: -999em; */
width: 19em;
}
i already did a drop down menu in my wordpress site. its a common drop down menu. but now i need to make it as a multi column drop down submenu.
i went through so many sites and tried different css. nothing creates anything like in that reference site. please help me with customizing the existing css style to attain multicolumn submenu structure.
my current menu css:-
.menu{
width:941px;
max-width:100%;
height:47px;
margin-left:30px;
float:left;
background:url(../images/other.gif) repeat-x;
}
.menu ul{padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.menu li:first-child{
margin:0px 0px 0px 0px;
padding:16px 0px 0px 40px;
list-style:none;
background-image:url(../images/hom.gif);
background-repeat:repeat-x;
float:left;
height:47px;
}
.menu li{
margin:0px 0px 0px 0px;
padding:16px 0px 10px 30px;
list-style:none;
background-image:url(../images/nav_img.png);
background-repeat:no-repeat;
float:left;
height:47px;
}
.menu a{
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
font-weight:bold;
color:#000;
letter-spacing:2px;
padding-right:10px;
text-transform: uppercase;
text-decoration:none;
transition: text-shadow 1s;
-moz-transition: text-shadow 1s; /* Firefox 4 */
-webkit-transition: text-shadow 1s; /* Safari and Chrome */
-o-transition: text-shadow 1s; /* Opera */
}
.menu a:hover{
text-shadow: 0 0 5px #006994;
color:#ccffff;
}
.menu .current-menu-item{
text-shadow: 0 0 5px #fff;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 64%; left: 0; z-index: 598; width:auto;}
#cssmenu ul ul li {float: none;background:#3891C9!important;border-bottom:1px solid #00569c;height:auto;}
#cssmenu ul ul ul {top:0; left: auto; right: -99.5%; width:100%;}
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;border-left:1px solid #00569c;}
#cssmenu ul ul a { display:block; line-height:1em; text-align:left; letter-spacing:0.5px;font-size:12px;}
#cssmenu ul ul li a:hover{ color:#ccffff; }
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
the menu structure is :
<div id="cssmenu" class="menu">
<ul class="menu">
<li>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
</ul>
</li>
</ul>
</div>
currently my menu like this http://jsfiddle.net/2wxje/
My CSS:
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 480px;
margin: 10px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #FF0064;
background-image: linear-gradient(#FF0064, #FF0010);
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #FF0064;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #FF0064;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
#menu li:hover > .no-transition {
display: block;
}
Javascript Code:
<script>
var $=jQuery;
$(document).ready(function(){
var location=window.location.pathname;
$("#menu a").each(function(){
if(location.lastIndexOf($(this).attr("href"))!=-1){
$(this).css({color:"white"});
}
});
});
</script>
PHP Code:
<?php wp_nav_menu(
array(
'title_li' => '',
'menu_id' => 'menu',
'menu_class' => '',
'theme_location' => 'primary-menu',
)
); ?>
I am having a hard time positioning my drop down menus within my Wordpress Theme Navigation. They are showing up no where near the nav bar and are near the top left corner of the screen when I hover over a ul li >.
My CSS Is Below:
#main-navigation {
clear: both;
float: left;
font-size: 17px;
margin-top: 30px;
width: 938px;
}
#main-navigation > ul { width: 105%; margin-left:auto; margin-right:auto; }
#main-navigation > ul > li {}
#main-navigation > ul > li:hover { transparent; }
#main-navigation > ul > li:first-child { border: medium none; }
#main-navigation > ul > li > a {
margin-right:20px;
border-bottom: 2px solid #6a6a65;
color: #181818;
display: block;
font-weight: bold;
height: 48px;
line-height: 48px;
padding: 0 29px;
// text-shadow: 0 1px 0 #AD581D;\
text-transform:uppercase;
}
#main-navigation > ul > li:first-child > a {
background: url("./assets/img/home.png") no-repeat scroll center 10px transparent;
// border: medium none;
color:#6a6a65;
border-bottom: 2px solid #6a6a65;
overflow: hidden;
padding: 0 25px;
text-indent: -999px;
width: 31px;
}
#main-navigation > ul > li:first-child > a:hover {
border-bottom: 2px solid #fa7d4c;
}
#main-navigation a:hover { text-decoration: none; border-bottom: 2px solid #fa7d4c;}
#main-navigation ul li:hover ul { display: block; }
#main-navigation ul ul {
border-bottom: 1px solid #333333;
display: none;
left: 0;
padding-top: 20px;
position: absolute;
top: 148px;
white-space: nowrap;
z-index: 1000;
background: url("./assets/img/dd-arrow.png") 33px 10px no-repeat;
}
#main-navigation ul ul li {
background: none repeat scroll 0 0 #3C3C3D;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
border-top: 1px solid #2C2C2C;
box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3), 0 1px 0 #444445 inset;
float: none;
font-size: 16px;
}
#main-navigation ul ul li:first-child {
border-top: medium none;
box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3);
}
#main-navigation ul ul a {
color: #FFF;
display: block;
height: 48px;
line-height: 48px;
padding: 0 29px;
text-shadow: 0 1px 0 #2D2D2E;
}
#main-navigation ul ul a:hover { color: #ccc; }
Any help would be greatly appreciated as I have spent a long time looking for the error its starting to frustrate me.
Thanks a bunch guys!
You need to tell childs to absolute position from main-navigation and not screen by defaut, Iguess since HTML code is missing :)
#main-navigation {
position:relative; /* tells absolute child to take coordonates from here */
clear: both;
float: left;
font-size: 17px;
margin-top: 30px;
width: 938px;
}
In this site I have a drop-down menu that disappears when I try to hover over the subcategories. I found a fix - to change the 'top:_' information so that it overlaps. That works great, but it looks pretty ugly. I currently have it with a gap (which I want), if I hover quick enough I can get it to say, but that isn't particularly user friendly. I read somewhere that the border might be giving it the problems?
CSS code
#navigation {
height: 37px;
background-image: url(../images/background/navbar.jpg);
background-repeat: repeat-x;
background-position: left top;
padding-bottom: 8px;
padding-top: 8px;
}
.nav-container {
}
#nav {
float: left;
height: 37px;
font-size: 13px;
z-index: 998;
}
/* ALL Levels */ /* Style consistent throughout all nav levels */
#nav li {
position: relative;
text-align: left;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
margin-left: 10px;
height: 21px;
left: -1px;
}
#nav a,
#nav a:hover {
display: block;
line-height: 1.3em;
text-decoration: none;
}
#nav span {
display: block;
cursor: pointer;
white-space: nowrap;
}
#nav li ul span {
white-space: normal;
}
/* 0 Level */
#nav li {
float: left;
margin: 0;
}
#nav a {
float: left;
color: #fff;
line-height: 21px;
padding-top: 0px;
padding-right: 12px;
padding-bottom: 0px;
padding-left: 12px;
margin-bottom: 8px;
}
#nav li.over a,
#nav a:hover, #nav li a:hover {
/*color:#444; text-shadow: 0px 1px #fff;*/;
}
#nav a:hover {
line-height: 21px;
}
#nav li:hover a {
/*color: #444 !important; text-shadow: 0px 1px #fff; */;
}
#nav li.over, #nav li:hover {
/*color: #444 !important;*/;
}
#nav li.active {
}
#nav li.active a {
/*color: #444 !important;text-shadow: 0px 1px #fff !important; */;
}
#nav li.home {
background: none;
padding-right: 0;
}
#nav li.home a {
padding-left: 10px;
}
/* 1st Level */
#nav ul li,
#nav ul li.active,
#nav ul li.over {
float: none;
border: none;
background: none;
margin: 0;
padding: 0;
text-transform: none;
height: 20px;
}
#nav ul li.parent {
background: url(../images/bkg_nav_parent.gif) no-repeat 100% 50%;
}
#nav ul li.last {
padding-bottom: 0;
}
#nav ul li.active {
margin: 0;
border: 0;
background: none;
}
#nav ul a,
#nav ul a:hover {
float: none;
padding: 0;
background: none;
line-height: normal;
}
#nav ul li a {
font-weight: normal !important;
}
/* 2nd Level */
#nav ul {
position: absolute;
width: 15em;
top: 30px;
left: -10000px;
-moz-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);
background-color: #FFF;
margin-right: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
border: medium solid #087d74;
margin-bottom: 10px;
z-index: 10;
}
/* Show menu */
#nav li.over > ul {
left: 0px;
}
#nav li.over > ul li.over > ul {
left: 100px;
}
#nav li.over ul ul {
left: -10000px;
}
#nav li:hover > ul li:hover {
background-image: none !important;
}
#nav li.parent > ul li a {
background-image: none;
text-shadow: 0px 1px #fff !important;
}
#nav li.parent > ul li a:hover {
background-image: none;
text-shadow: 0px 1px #fff !important;
}
#nav ul li a {
color: #333 !important;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
margin-bottom: 20px;
padding-top: 10px;
height: 20px;
margin-top: 10px;
margin-right: 12px;
margin-left: 12px;
font-size: 12px;
}
#nav ul li.last a {
border-bottom: 0px;
}
#nav ul li a:hover {
color: #087d74 !important;
text-shadow: none !important;
margin-bottom: 15px;
padding-top: 10px;
}
/* 3rd+ Level */
#nav ul ul {
top: 0px;
border: 1px solid #bdbdbd;
}
#nav ul ul li a {
border-width: 1px 0px;
}
a.bord {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
}
HTML code
<div class="nav-container">
<ul id="nav">
<li class="level0 nav-1 parent" onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)">
<a href="http://www.ivcatalina.com/magento/index.php/furniture.html">
<span>
Furniture
</span>
</a>
<ul class="level0">
<li class="level1 nav-1-1 first">
<a href="http://www.ivcatalina.com/magento/index.php/furniture/living-room.html">
<span>
Living Room
</span>
</a>
</li>
<li class="level1 nav-1-2 last">
<a href="http://www.ivcatalina.com/magento/index.php/furniture/bedroom.html">
<span>
Bedroom
</span>
</a>
</li>
</ul>
</li>
<!-- Other menu items -->
</ul>
</div>
I made you an easy solution. You doesn't even have to change your JavaScript.
In your styles.css at the #nav span class add this line to your code: margin-bottom:10px;
So it will be:
#nav span {
display:block;
cursor:pointer;
white-space:nowrap;
margin-bottom:10px;
}