2 replies [Last post]
Stacy230
Stacy230's picture
Offline
newbie
Last seen: 11 years 7 weeks ago
Timezone: GMT+1
Joined: 2010-12-06
Posts: 2
Points: 3

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:

    <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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Stacy230, Start by giving

Hi Stacy230,
Start by giving all the li's position:relative;
Then when you hover the ul containing the 2 sub item will be positioned from the li that contains it.

Stacy230
Stacy230's picture
Offline
newbie
Last seen: 11 years 7 weeks ago
Timezone: GMT+1
Joined: 2010-12-06
Posts: 2
Points: 3

Hi Tony, thank you for your

Hi Tony,
thank you for your advice, now the 2 sub items are on the right position.

Unfortunately there is still a bullet point in front of the second item (Site3b). Is there any possibility to remove that point?

Stacy