• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Horizontales Dropdown Menü wird nicht angezeigt.

A

AbsolutStorm

Neues Mitglied
Hallo,
Mein Problem ist, dass ich mein Dropdown Menü nicht in Firefox und nicht im IE angezeigt bekomme. Wenn ich aber bei meinem Editor, Webocton Scriptly, auf Vorschau klicke, dann funktioniert das Dropdown Menü.
Kann mir jemand sagen woran das liegt?
Die Seite ist im moment nur lokal.

HTML: 
<div id="navi">                   <ul>
            <li><a href="#">Startseite</a></li>
            <li><a href="#">Seite 1</a></li>
                <ul>
                    <li><a href="#">Seite 1.1</a></li>
                    <li><a href="#">Seite 1.2</a></li>
                    <li><a href="#">Seite 1.3</a></li>
                    <li><a href="#">Seite 1.4</a></li>
                </ul>
            <li><a href="#">Seite 2</a></li>
                <ul>
                    <li><a href="#">Seite 2.1</a></li>
                    <li><a href="#">Seite 2.2</a></li>
                    <li><a href="#">Seite 2.3</a></li>
                    <li><a href="#">Seite 2.4</a></li>
                    <li><a href="#">Seite 2.5</a></li>
                </ul>
            <li><a href="#">Seite 3</a></li>
            <li><a href="#">Seite 4</a></li>
        </ul>
    </div>



HTML: 
div#navi {
    width: 780px;
    font-weight: bold;
    padding: 0;
    margin: 0;
}


#navi ul{
    padding: 0;
    margin: 0;
}


#navi li {
    position: relative;
    background-color: #F3E1CB;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}


#navi li a {
    width: 156px;
    height: 30px;
    display: block;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
    color: black;
}


#navi li a:hover {
    background-color: #FC7813;
}


#navi ul ul {
    position: absolute;
    top: 30px;
    visibility: hidden;
}


#navi ul li:hover ul {
    visibility: visible;


MfG
 
Werbung:
Du hast die </li> falsch gesetzt.

Das html sollte so aussehen:
HTML: 
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" media="screen" href="drop.css">
    </head>
    <body>
        <div id="navi"> <ul>
            <li><a href="#">Startseite</a></li>
            <li><a href="#">Seite 1</a>
                <ul>
                    <li><a href="#">Seite 1.1</a></li>
                    <li><a href="#">Seite 1.2</a></li>
                    <li><a href="#">Seite 1.3</a></li>
                    <li><a href="#">Seite 1.4</a></li>
                </ul>
            </li>
            <li><a href="#">Seite 2</a>
                <ul>
                    <li><a href="#">Seite 2.1</a></li>
                    <li><a href="#">Seite 2.2</a></li>
                    <li><a href="#">Seite 2.3</a></li>
                    <li><a href="#">Seite 2.4</a></li>
                    <li><a href="#">Seite 2.5</a></li>
                </ul>
            </li>
            <li><a href="#">Seite 3</a></li>
            <li><a href="#">Seite 4</a></li>
        </ul>
    </div>
    </body>
</html>

Greez Stryke
 
Werde ich gleich nach Feierabend mal ausprobieren!
Großes Lob schonmal ans Forum für solch schnelle Antworten.
Und vielen Dank für die Lösung :D
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben