Chrome & Safari CSS Drop down menu issue

[OAFC_Rob]

I have a css drop down menu working on a ui called menuFirstLevel with the li then achors called navMain then within that li another ul called menuSecondLevel again with li's and just achors this time.

 

It all works perfectly on firefox and IE, but not on chrome and IE im usually good with css but struggling a little bit with this one, any ideas?

 

CSS

/* MENU / NAVIGATION LINKS */
                div#navContainer
                {
                    width: 980px;
                    height: 50px;
                    background-image: url('../images/container/topContainer2.jpg');
                    background-repeat: no-repeat;
                    background-position: top left;
                }
                    ul.menuFirstLevel
                    {
                        list-style-type: none; 
                        display: block;
                        top: 20px;
                        left: 85px;
                        padding: 0px;
                        z-index: 100;
                        position: relative;   
                        list-style-type: none;
                        width: 800px;
                        height: 30px; 
                        list-style: none;
                    }
                    ul.menuFirstLevel li
                    {
                        float: left; 
                        border-top: 1px solid #252525; /*--Create bevel effect--*/
                        border-bottom: 1px solid #444; /*--Create bevel effect--*/
                        padding: 0;
                        margin: 0;  
                        list-style: none;
                    }
                    ul.menuFirstLevel li:hover
                    {
                        position: relative;
                        display: block;
                        float: left; 
                        border-top: 1px solid #252525; /*--Create bevel effect--*/
                        border-bottom: 1px solid #444; /*--Create bevel effect--*/
                        padding: 0;
                        margin: 0;
                    }
                        /* NAV LINKS FOR MENU */
                        ul.menuFirstLevel li  a.navMain, ul.menuFirstLevel li:hover ul.menuSecondLevel 
                        {
                            display: block; 
                            float: left; 
                            padding: 0px;
                            width: 122px; 
                            height: 28px; 
                            margin: 0 5px 0 5px !important;
                            margin: 0 2px 0 2px;
                            text-align: center;
                            text-decoration: none; 
                            background-image: url(../images/container/bt.gif);  
                            background-position: top left;
                            background-repeat: no-repeat;
                            color: #313537;
                            font-size: 13px;
                            font-weight: bold;
                            font-style: italic;
                            line-height: 28px;
                            z-index: 110;
                            list-style: none;
                        }
                            ul.menuFirstLevel li:hover ul.menuSecondLevel, ul.menuFirstLevel li ul.menuSecondLevel
                            {
                                background-image: none;
                                padding: 0;
                                margin: 0;
                                background-color: #313537;
                            }
                        /*HOVER EFFECT NORMAL */
                        ul.menuFirstLevel li a:hover, ul.menuFirstLevel li a:hover.navMain
                        {
                            color: #700c01; 
                            text-decoration: none; 
                            background-image: url(../images/container/btA.gif);
                            background-position: top left;
                            background-repeat: no-repeat;
          
                        }
                            /* MENU LEVEL 2*/
                            ul.menuFirstLevel li ul.menuSecondLevel
                            {
                                display: none; 
                                position: absolute;
                                top: 29px;
                                left: 0px;
                                width: 122px;
                                height: auto;
                                background-color: #313537;  
                            }   
                            /* ENSURE THEY ALL HAVE BACKGROUND COLOUR */
                            ul.menuFirstLevel li ul.menuSecondLevel li
                            {
                               background-color: #313537; 
                               text-align: left;
                               padding: 0;
                               margin: 0;
                            }
                                ul.menuFirstLevel li ul.menuSecondLevel li a
                                {
                                    padding: 0 0 0 10px;
                                    margin: 0;
                                }
                            ul.menuFirstLevel li:hover li 
                            {
                                float: none; 
                            }
                            ul.menuFirstLevel li:hover li a 
                            {
                                font-size: 12px;
                                font-weight: bold;
                                font-style: normal; 
                                color: #e2dcdc;
                            }
                            /* LAST ELEMENT LEFT BLANK AND CORNERS ROUNDED ON IT */
                            ul.menuFirstLevel li ul.menuSecondLevel li.bottom
                            {
                                float: left;
                                margin: 0;
                                padding: 0;
                                background-color: #313537; 
                                border-bottom: 1px solid #313537;
                                border-radius: 0 0 10px 10px;
                                -moz-border-radius: 0 0 10px 10px; /* Firefox 3.6 and earlier */
                                width: 122px;
                                height: 5px;
                            }
                            ul.menuFirstLevel li li a:hover 
                            {
                                color: #700c01;
                            }

 

 

HTML

 

<div id="navContainer"><!--OPEN DIV FOR navContainer  -->    
                    <ul class="menuFirstLevel"><!--OPEN DIV FOR UL MENU LEVEL 1 -->   
                        <li><a title="Home Page" href="/index.php" class="navMain"><span>Home</span></a></li>
                        <li><a title="About Nordmanni" href="/about/" class="navMain"><span>About Us</span></a>
                            <ul class="menuSecondLevel">
                                <li><a title="Nordmanni History" href="/about/"><span>Group History</span></a>
                                <li><a title="Nordmanni Events" href="/events/"><span>Events</span></a>
                                <li><a title="Viking, Saxon, Celt Images" href="/gallery/"><span>Gallery</span></a>
                                <li class="bottom"></li>    
                            </ul> 
                        </li> 
                        <li><a title="Contact" href="/contact/" class="navMain"><span>Contact</span></a>
                            <ul class="menuSecondLevel">
                                <li><a title="Enquiry" href="/contact/"><span>Enquiry</span></a>
                                <li><a title="Book Viking, Saxon, Celtic Group" href="/book-us/"><span>Book Us</span></a>
                                <li><a title="Membership Types" href="/membership/"><span>Membership</span></a>
                                <!--<li><a title="Nordmanni Freqeuntly Asked Questions (FAQ)" href="/faq/"><span>FAQs</span></a>-->
                                <li><a title="Nordmanni Links" href="/links/"><span>Links</span></a>
                                <li class="bottom"></li>    
                            </ul> 
                        </li>  
                    </ul><!--CLOSE DIV FOR UL MENU LEVEL 1 -->
                </div><!--CLOSE DIV FOR navContainer  -->