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

Dropdown Menü schliesst sich

D

DusselDuck

Neues Mitglied
Hallo zusammen!
Ich habe mich mal an meiner ersten Website versucht.
Sie steht auch soweit, jedoch habe ich ein Problem mit meinem Dropdown Menü.
Sobald ich meine Maus von den "Überschriften" runter in meine Dropdownliste ziehe, verschwindet die Liste.
Ich kann meinen Fehler nicht finden und hoffe deshalb hier um Hilfe
Danke im voraus
DusselDuck


Hier noch einmal mein betreffender HTML und CSS Script
HTML: 
<div id="navigation_main_container">
                   
                    <div class="navigation_container">
                       
                        <ul id="navigation_main">
                            <li class="news"><a href="#">News</a>
                                <ul class="dropdown_navigation">
                                    <li><a href="#">News</a></li>
                                    <li><a href="#">IT News</a></li>
                                </ul>   
                            </li>
                            <li class="ideen"><a href="#">Ideen</a>
                                <ul class="dropdown_navigation">
                                    <li><a href="#">Zuk&uuml;nftige Projekte</a></li>
                                    <li><a href="#">Neue Projekte</a></li>
                                </ul>
                            </li>
                            <li class="ueber"><a href="#">&Uuml;ber</a>
                                <ul class="dropdown_navigation">
                                    <li><a href="#">Das Unternehmen</a></li>
                                    <li><a href="#">Das Team</a></li>
                                    <li><a href="#">Die Gesch&auml;ftsleitung</a></li>
                                </ul>
                            </li>
                            <li class="projekte"><a href="#">Projekte</a>
                                <ul class="dropdown_navigation">
                                    <li><a href="#">Laufende Projekte</a></li>
                                    <li><a href="#">Beendete Projekte</a></li>
                                </ul>
                            </li>
                            <li class="spenden"><a href="#">Spenden</a>
                                <ul class="dropdown_navigation">
                                    <li><a href="#">Spenden</a></li>
                                    <li><a href="#">Zwecke</a></li>
                                </ul>
                            </li>
                        </ul>
                           
                    </div>
                   
                </div>





Code: 
ul#navigation_main li ul.dropdown_navigation
{
    background: -webkit-gradient(linear, center top, center bottom, from(#917c4d), to(#ffffff));
    background: -webkit-linear-gradient(#917c4d, #ffffff);
    background: -moz-linear-gradient(#917c4d, #ffffff);
    background: -o-linear-gradient(#917c4d, #ffffff);
    background: -ms-linear-gradient(#917c4d, #ffffff);
    background: linear-gradient(#917c4d, #ffffff);
    position: absolute;
    border: solid 1px #000000;
    top: 23px;
    left: -1px;
    padding: 5px 5px 5px 5px;
    width: 120px;
    font-size: 9pt;
    border-radius: 7px;
    border-color: #808080;
    box-shadow: 0px 4px 4px 0px #7C7C7C ;
}

ul#navigation_main li ul.dropdown_navigation a
{
    color: #333333 ;     
}

ul#navigation_main li ul.dropdown_navigation a:hover
{
    color: #1E90FF;     
}


ul#navigation_main li ul li
{
    display: block;
    float: none;
}

ul#navigation_main li>ul
{
    display: none;
}

ul#navigation_main li:hover>ul
{
    display: block;
}
 
Stark vereinfacht
Code: 
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>test</title>
<style>

#navigation {
 margin:0;
 padding:0;
 float:left;
 width:200px;
 list-style:none;
}

#navigation li {
 position:relative;
 background:#eee;
 list-style:none;
 margin:0;
 padding:0;
}

#navigation li ul {
 position: absolute;
 top:0;
 left:-9999em;
}

#navigation li:hover ul {
 left:0px;
 margin:0;
 padding:0;
 position:relative;
}

#navigation ul li {
 background:#ddd;
} 

#navigation a {
 padding:10px;
 display:block;
}

#navigation a:hover {
 color:#f00;
}
</style>
</head>
<body>

                       
                        <ul id="navigation">
                            <li><a href="#">News</a>
                                <ul>
                                    <li><a href="#">News</a></li>
                                    <li><a href="#">IT News</a></li>
                                </ul>  
                            </li>
                            <li><a href="#">Ideen</a>
                                <ul>
                                    <li><a href="#">Zuk&uuml;nftige Projekte</a></li>
                                    <li><a href="#">Neue Projekte</a></li>
                                </ul>
                            </li>
                            <li><a href="#">&Uuml;ber</a>
                                <ul>
                                    <li><a href="#">Das Unternehmen</a></li>
                                    <li><a href="#">Das Team</a></li>
                                    <li><a href="#">Die Gesch&auml;ftsleitung</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Projekte</a>
                                <ul>
                                    <li><a href="#">Laufende Projekte</a></li>
                                    <li><a href="#">Beendete Projekte</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Spenden</a>
                                <ul>
                                    <li><a href="#">Spenden</a></li>
                                    <li><a href="#">Zwecke</a></li>
                                </ul>
                            </li>
                        </ul>
                           
               
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben