Problems adding a drop down menu to my current menu

HTML & CSS
1

Hey all,

I want to add a drop down menu to my menulinks bar, however i got some problems making it work, here’s the page:
http://sospets.brinkster.net/newsite/contact_us.asp

CSS file:

#header #nav {width:994px;background:url(images/nav.gif) repeat-x;overflow:hidden;text-align:center;}
#header #nav #subs {display:-moz-inline-box;display:inline-block;}
* html #header #nav #subs {display:inline;}
*+html #header #nav #subs {display:inline;}
#header #nav #subs li {float:left;position:relative;}
#header #nav #subs li a, #header #nav #subs li a.last {height:40px;line-height:40px;padding:0 20px;display:inline-block;background:url(images/nav_line.gif) right center no-repeat;text-decoration:none;color:#FFF;}
#header #nav #subs li a.last {background:none;}
#header #nav #subs li a:hover, #header #nav #subs li a:focus {color:#000;}
#header #nav #subs li ul {position:absolute;left:0;top:auto;margin-left:-999em;}
#header #nav #subs li li{width:80px;}
#header #nav #subs li li a{display:block;text-decoration:none;color:#FFF;background:#a3d39c;border:1px solid #197b30;padding:5px;}
#header #nav #subs li:hover li:hover a, #header #nav #subs li.over li.over a, #header #nav #subs li:hover li a:hover, #header #nav #subs li.over li a:hover {color:#000;background-color:#a3d39c;}
#header #nav #subs li li a {padding-top:4px;padding-right:5px;}
#header #nav #subs li:hover ul, #header #nav #subs li.over ul {margin-left:-999em;}
#header #nav #subs li:hover ul, #header #nav #subs li.over ul {margin-left:0;}

HTML file:

<ul id="subs">
<li><a href="#">&#1497;&#1510;&#1497;&#1512;&#1514; &#1511;&#1513;&#1512;</a><ul><li><a href="Contact_us.asp">&#1510;&#1512;&#1493; &#1511;&#1513;&#1512;</a></li><li><a href="opinions.asp">&#1495;&#1493;&#1493;&#1514; &#1491;&#1506;&#1514;</a></li></ul></li>
<li><a href="english.asp">About us</a></li>
<li><a href="aboutus.asp">&#1506;&#1500; &#1492;&#1506;&#1502;&#1493;&#1514;&#1492;</a></li>
<li><a href="volunteer.asp">&#1492;&#1514;&#1504;&#1491;&#1489;&#1493;&#1514;</a></li>
<li><a href="donations.asp">&#1514;&#1512;&#1493;&#1502;&#1493;&#1514;</a></li>
<li><a href="links.asp">&#1511;&#1497;&#1513;&#1493;&#1512;&#1497;&#1501;</a></li>
<li><a href="adopted.asp">&#1502;&#1510;&#1488;&#1493; &#1489;&#1497;&#1514;</a></li>
<li><a href="cats.asp">&#1488;&#1502;&#1509; &#1495;&#1514;&#1493;&#1500;</a></li>
<li><a href="dogs.asp">&#1488;&#1502;&#1509; &#1499;&#1500;&#1489;</a></li>
<li><a class="last"  href="index.asp">&#1491;&#1507; &#1492;&#1489;&#1497;&#1514;</a></li>
</ul>

thanks for the help

2

Maybe you should have a look at Son of Suckerfish Dropdowns

3

Hey donboe,

thanks, seems like the only thing i needed to do was removing the position relative from the main UL

but now i got a problem with IE browser, the LI tags appear on the navbar, i want them to appear below it

4

i got it solved by adding those 2 lines to the CSS file (hope its the right way to get it solved)

* html #header #nav #subs li li{padding-top:40px;}
*+html #header #nav #subs li li{padding-top:40px;}

however, why in opera, when trying to hover over the sub links, they disappear? i mean it won’t let u even get the link selected.

thanks