Hello all,

Currently I am developing 2 sites for a customer; botanicalroad.co.nz and botanicalroad.com
Both have the same slider on the homepage, on the .com the dropdown menus go behind the slider, I have tried increasing the sliders z-index to 100 and set position to; relative but no luck yet. the theme I'm working with is Zindi-II and the slider is an Easy Rotator. Also, the dropdown menu goes behind the big image on individual product page and behind the title and text, for example: http://botanicalroad.com/shop/almond-soothing-masque/

I'm assuming it has something to do with certain settings in the navbar.css file, see a copy here;

/*Navbar */
#nav, #nav ul { list-style: none; line-height: 1; }
#nav a, #nav a:hover {text-decoration: none; border:none; font-size:11px; }
#nav li { display:block; float:left; list-style:none; margin-left:5px; }
#nav li a, #nav li a:visited {color:#fff; display:block; font-weight:bold;line-height:7px;padding:10px;}
#nav li a:active, li.current_page_item a, #home li.on, #nav li a:hover { background:#58b3f9; color: #fff; text-decoration:none;padding:10px; display:block; }

/* Dropdown Menus */

#nav li ul { position: absolute; left: -999em; height: auto; width: 200px;background: #58b3f9;}
#nav li li { letter-spacing: 0.1em; margin-top: 5px; width: 200px;padding-bottom: 2px; padding: 0px; margin:0px; }
#nav li li a, #nav li li a:visited {background:none; font-weight:normal; font-size:0.9em; color:#fff; display:block;}
#nav li li a:hover, #nav li li a:active {background:none; color: #fff; display:block; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto;}
a.main:hover{ background:none; }

There is no z-index in this file, does it need to be there anyway?

I would certainly appreciate a bit of help here from people who had the same problem and resolved it.

Thanks in advance,