CSS Drop Down Cut Off

Philth

Hi there,

I've got a series of CSS /Javascript drop down menus that work fine in Safari and Firefox, but not in Explorer (surprise. surpise!) as was wondering if anybody could give me a bit of assistance? The menu first appear to be cut in half when it appears, and depending on the browser, remain with a chunk cut out the top right corner. I've tried changes Z Index' etc without success.

Here is the CSS...

Expand|Select|Wrap|Line Numbers

 
ul.menu {

    list-style:none;

    padding:0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;

    color: #FFFFFF;

    margin-top: 0;

    margin-right: 0px;

    margin-bottom: 0px;

    margin-left: 0px;

}

ul.menu * {

    padding:0;

    margin-top: 0;

    margin-right: 0;

    margin-bottom: 0;

    margin-left: 0px;

}

ul.menu a {display:block; color:#FFFFFF; text-decoration:none}

ul.menu li {

    float:left;

    padding-right: 0px;

    padding-left: 0px;

    position: relative;

    width: 117px;

}

ul.menu ul {

    position:absolute;

    top:26px;

    left:0;

    display:none;

    opacity:0;

    list-style:none;

    z-index: 0;

}

ul.menu ul li {

    position:relative;

    width:180px;

    margin:0;

    border-top-width: 1px;

    border-right-width: 1px;

    border-bottom-width: 1px;

    border-left-width: 1px;

    border-right-style: solid;

    border-bottom-style: solid;

    border-left-style: solid;

    border-top-color: #aaa;

    border-right-color: #aaa;

    border-bottom-color: #aaa;

    border-left-color: #aaa;

    z-index: 100;

    clear: both;

}

ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#2A3239}

ul.menu ul li a:hover {background-color:#F6B220}

ul.menu ul ul {left:180px; top:1px}

ul.menu .menulink {font-weight:bold; width:180px}

ul.menu .menulink:hover, ul.menu .menuhover {}

ul.menu .sub {

}

ul.menu .topline {

    border-top:1px solid #aaa;

    background-color: #2A3239;

}

My HTML is as follows...

Expand|Select|Wrap|Line Numbers

 
<div class="navbuttons1"><a href="index.html"><img src="images/home_button_over.gif" alt="Metparking Home Page" width="126" height="54" border="0"/></a></div>
 
  <ul class="menu" id="menu">

    <li><img src="images/about_norm.gif" alt="Metparking About Us" width="117" height="54"/></span>

        <ul>

          <li><a href="about_us/industry_standards.html">Industry Standards</a></li>

          <li> <a href="about_us/employment.html">Employment</a></li>

          <li> <a href="about_us/client_relationship.html">Client Relationship</a></li>

          <li> <a href="about_us/customer_service.html">Customer Service</a></li>

        </ul>

    </li>
 
    <li><img src="images/services_norm.gif" alt="Metparking Our Services" width="117" height="54"/></span>

        <ul>

          <li><a href="our_services/parking_management/parking_management.html">PARKING MANAGEMENT</a></li>

          <li><a href="our_services/parking_management/maximum_stay.html">Maximum Stay</a></li>

          <li><a href="our_services/parking_management/permit_contract_season_tickets.html">Permit/Contract/Season Tickets</a></li>

          <li><a href="our_services/parking_management/pay_and_display.html">Pay and Display</a></li>

          <li><a href="our_services/parking_management/pay_by_phone.html">Pay By Phone</a></li>

          <li><a href="our_services/parking_management/pay_on_foot.html">Pay On Foot</a></li>

          <li><a href="our_services/parking_management/pay_on_entry.html">Pay On Entry</a></li>

          <li><a href="our_services/parking_management/pay_at_exit.html">Pay At Exit</a></li>

          <li><a href="our_services/parking_management/marshalling.html">Marshalling</a></li>

          <li><a href="our_services/parking_enforcement/parking_enforcement.html"><br />PARKING ENFORCEMENT</a></li>

          <li><a href="our_services/parking_enforcement/anpr.html">ANPR</a></li>

          <li><a href="our_services/parking_enforcement/onsite_parking_attendants.html">Onsite Parking Attendants</a></li>

          <li><a href="our_services/parking_enforcement/mobile_parking_attendants.html">Mobile Parking Attendants</a></li>

          <li><a href="our_services/parking_enforcement/self_ticketing.html">Self Ticketing</a></li>

          <li><a href="our_services/parking_enforcement/clamping_tow_away.html">Clamping/Tow Away</a></li>

          <li><a href="our_services/parking_enforcement/abandoned_vehicles.html">Abandoned Vehicles</a></li>

          <li><a href="our_services/parking_enforcement/faqs.html">FAQ's</a></li>

          <li><a href="our_services/parking_enforcement/legalities.html">Legalities</a></li>

          <li><a href="our_services/facilities_management/facilities_management.html"><br />FACILITIES MANAGEMENT</a></li>

          <li><a href="our_services/facilities_management/maintenance.html">Maintenance</a></li>

          <li><a href="our_services/facilities_management/cleaning.html">Cleaning</a></li>

          <li><a href="our_services/facilities_management/landscaping.html">Landscaping</a></li>

          <li><a href="our_services/facilities_management/line_marking.html">Line Marking</a></li>

          <li><a href="our_services/facilities_management/signage.html">Signage</a></li>

          <li><a href="our_services/facilities_management/security_patrols_gate_operation.html">Security Patrols & Gate Operation</a></li>

          <li><a href="our_services/buy_lease_joint_venture/index.html"><br />BUY/LEASE/JOINT VENTURE</a></li>

        </ul>

    </li>
 
    <li><img src="images/careers_norm.gif" alt="Metparking Careers" width="117" height="53" /></span>

        <ul>

          <li><a href="careers/about_careers.html">About Careers</a></li>

          <li> <a href="careers/current_vacancies.html">Current Vacancies</a></li>

        </ul>

    </li>
 
        <li><img src="images/our_clients_norm.gif" alt="Metparking Clients" width="117" height="53" /></span>

        <ul>

          <li><a href="clients/industry_sectors.html">Industry Sectors</a></li>

          <li> <a href="clients/testimonials.html">Testimonials</a></li>

        </ul>

    </li>
 
        <li><a href="news/index.html"><img src="images/new_norm.gif" alt="Metparking News" width="117" height="54" border="0" /></a></li>
 
    <li><img src="images/secure_area_norm.gif" alt="Metparking Secure Area" width="117" height="54" /></span>

        <ul>

          <li><a href="secure_area/client_login.html">Client Login</a></li>

          <li> <a href="secure_area/staff_login.html">Staff Login</a></li>

        </ul>

    </li>
 
    <li><a href="online_payment/index.html"><img src="images/online_payment_norm.gif" alt="Metparking Online Payment" width="127" height="54" border="0" /></a></li>
 
  </ul>

The page itself can be found here...

http://www.metparking.com/new_site/index.html

many thanks in advance.

CSS Drop Down Cut Off

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about