CSS Forum

**Stacy230** · 12:31 PM

Hi everybody,
I created a simple dropdown menu with CSS and it is working well in Firefox, but of course there are some problems when I'm using Internet Explorer 7:

1) Both dropdown-topics (Site3a, Site3b) are shifted to the next menu-point (Site4), instead of beeing shown right under Site3.

2) In front of both dropdown-topics there are those listing points in the IE 7.

3) Both dropdown-topics (Site3a,Site3b) dont have the same width. Again, only in the IE7.

Heres the code:

Code:

<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Drop-Down Menu</title>
    <style type="text/css">
      ul#menu{
       margin:2px;
       padding-left:0px;
       list-style-type:none;
       width:auto;
       position:relative;
       display:block;
       height:36px;
       font-size:17px;
        font-weight:inherit;
       background:transparent url(images/OFF.gif) repeat-x top left;
       font-family:Candara;
       border-bottom:2px solid #999999;
       border-top:1px solid #cccccc;
       }
    ul#menu li{
       display:block;
       float:left;
       margin:0;
       padding:0;
       }
    ul#menu li a{
       display:block;
       float:left;
       color:#900;
       text-decoration:none;
       font-weight:bold;
       padding:10px 12px 0 12px;
       height:24px;
       background:transparent url(images/DIVIDER.gif) no-repeat top right;
       }
    ul#menu li a:hover{
       background:transparent url(images/HOVER.gif) no-repeat top right;   
       }
    ul#menu li ul {
       display:none;
       position:absolute;
       float:none;
       top:34px;
       padding:0;
       margin:0;
       }         
    ul#menu li:hover ul {
        display:block;
       height:auto;
       }   
    ul#menu li ul li{
        float:none;
       display:block;
       font-size:17px;
        font-weight:inherit;
       background:transparent url(images/OFF.gif) repeat-x top left;
       font-family:Candara;
       border-bottom:2px solid #999999;
       border-top:1px solid #cccccc;
       }   
    ul#menu li ul li a{
        float:none;
       display:block;
       }

    </style>
    </head>
    <body>

    <ul id="menu">
        <li><a href="index.html" title="">Start</a></li>
         <li><a href="#" title="">Site1</a></li>
        <li><a href="#" title="">Site2</a></li>
       <li><a href="#" title="">Site3</a>
       <ul>
        <li> <a href="#" title="">Site3a</a> </li>
        <li> <a href="#" title="">Site3b</a> </li>
        </ul>
        </li>
        <li><a href="#" title="">Site4</a></li>
        <li><a href="#" title="">Site5</a></li>
        <li><a href="#" title="">Site6</a></li>
    </ul>

    </body>
    </html>

I hope, theres anybody, who is able to help. I'd be very thankful.

Stacy

**CSM** · 12-07-2010, 07:24 AM

Is that the complete code?

I would suggest you use a DOCTYPE.