Dropdownmenue verliert den Focus

Comm

Hallo Zusammen

Mein DropdownMenu sitzt bei mir in einem Header div und darunter liegt der Content div, das Menu schiebt sich aber andauernd unter das Content div. Wie kann ich das abstellen?

Gruß Jörg

Bandit

Keine Ahnung, wie du das abstellen kannst, denn mit den Infos kann dir keiner helfen. Ein Link zur Seite wäre sehr hilfreich.

Comm

Danke für das Feedback

Leider steht die Seite auf meinem Nas-Server der von außen nicht zu erreichen ist. aber ich kann die Scripte mal posten.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta content="de" http-equiv="Content-Language" />
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <title>Startseite</title>        
        <link rel="stylesheet" href="css/datepicker.css" type="text/css" />
        <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <link rel="stylesheet" href="css/tabelle.css" type="text/css" />
    </head>
    <body>
    <div class="content">
    <div id="menu">
        <ul>
            <li><a href="#"><img src="images_neu/32/home_32.png">Home</a></li>
            <li><a href="#"><img src="images_neu/32/statistic_32.png">Statistic</a>
                <ul>
                    <h3>Statistickategorien</h3>
                    <a href="#"><li>Produktion</li></a>
                    <a href="#"><li>Projekte</li></a>
                    <a href="#"><li>Mitarbeiter</li></a>
                    <a href="#"><li>Lieferungen</li></a>
                    <a href="#"><li class="all">Alle Tags anzeigen &rarr;</li></a>
                </ul>
            </li>
            <li><a href="#"><img src="images_neu/32/zeitplanung_32.png">Planung</a>
                <ul>
                    <h3>Planungskategorien</h3>
                    <a href="#"><li>Projekte</li></a>
                    <a href="#"><li>Technik</li></a>
                    <a href="#"><li>Web</li></a>
                    <a href="#"><li>Webdesign</li></a>
                    <a href="#"><li class="all">Alle Kategorien anzeigen &rarr;</li></a>
                </ul>
            </li>
            <li><a href="#"><img src="images_neu/32/projekt_32.png">Projekte</a>
                <ul>
                    <h3>Projektkategorien</h3>
                    <a href="#"><li>Kunden</li></a>
                    <a href="#"><li>Produkte</li></a>
                    <a href="#"><li class="all">Alle Tags anzeigen &rarr;</li></a>
                </ul>
            </li>
            <li><a href="#"><img src="images_neu/32/produktion_32.png">Produktion</a>
                <ul>
                    <h3>Produktionskategorien</h3>
                    <a href="#"><li>Lieferanten</li></a>
                    <a href="#"><li>Material</li></a>
                    <a href="#"><li>Aufwände</li></a>
                    <a href="#"><li>Lieferungen</li></a>
                    <a href="#"><li class="all">Alle Tags anzeigen &rarr;</li></a>
                </ul>
            </li>
            <li><a href="#"><img src="images_neu/32/mitarbeiter_32.png">Mitarbeiter</a>
                <ul>
                    <h3>Mitarbeiterkategorien</h3>
                    <a href="#"><li>Mitarbeiter</li></a>
                    <a href="#"><li>Gruppen</li></a>
                    <a href="#"><li>Internet</li></a>
                    <a href="#"><li>WordPress</li></a>
                    <a href="#"><li class="all">Alle Tags anzeigen &rarr;</li></a>
                </ul>
            </li>
            <li><a href="#"><img src="images_neu/32/question_32.png">Hilfe</a></li>
        </ul>
    </div>
    </div>
    <div class="content">
    <div class="oben"><h2>Home</h2></div>
    <div class="zu_oben">
    <div class="links_oben">Links Oben<br />Hier steht ein Text, eine Statistik, ein Formular oder eine Tabellle</div>
    <div class="rechts_oben">Rechts Oben<br />Hier steht ein Text, eine Statistik, ein Formular oder eine Tabellle</div>
    </div>
    <div class="zu_unten">
    <div class="links_unten">Links Unten<br />Hier steht ein Text, eine Statistik, ein Formular oder eine Tabellle</div>
    <div class="rechts_unten">Rechts Unten<br />Hier steht ein Text, eine Statistik, ein Formular oder eine Tabellle</div>
    </div>
    <div class="unten">Unten<br />Hier steht ein Text, eine Statistik, ein Formular oder eine Tabellle</div>
    </div>
    </body>
<html>

Alles anzeigen

Das wäre die Index.php nun folgt die style.css.

HTML

body {
    font                    : 12px Arial, Helvetica, sans-serif;
}
#menu {
    width: 1100px;
    margin: 10px 10px;
}
#menu h3 {
    font-size: 16px;
    color: #FFFFFF;
    padding: 10px;
    margin: 0;
    background: #000;
    line-height: 20px;
}
#menu ul {
    position: relative;
    margin: 0 auto;
    list-style: none;
}
#menu ul li {
    float: left;
    margin: 0 0 0 20px;
    font-size: 20px;
    font-family: 'Bree Serif', serif;
    line-height: 50px;
}
#menu ul li a {
    color: #000000;
    text-decoration: none;    
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
#menu ul li a:hover {
    color: #999999;
}
#menu ul li img {
    float: left;
    width: 32px;
    height: 32px;
    margin: 7px 2px;
    padding: 3px;
    background: #99999999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
#menu ul li:hover img {
    background: #000000;
}
#menu ul ul {
    position: absolute;
    top: -9999px;
    background: #FFFFFF;
    padding: 0;
    margin: 0 0 0 -5px;
    -webkit-box-shadow: 0 10px 20px #888;
    -moz-box-shadow: 0 10px 20px #888;
    box-shadow: 0 10px 20px #888;
}
#menu ul ul:before {
    position: absolute;
    content:"";
    width: 10px;
    height: 10px;
    top: -5px;
    left: 20px;
    background: #000000;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
#menu ul li:hover ul {
    top: 55px;
}
#menu ul ul li {
    float: none;
    font-size: 16px;
    padding: 5px 10px;
    text-align: left;
    text-transform: uppercase;
    margin: 0;
    border-bottom: 1px solid #DDDDDD;
    line-height: 20px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
#menu ul ul a {
    color: #333333;
    text-decoration: none;
}
#menu ul ul li.all {
    font-size: 12px;
    border-bottom: none;
    text-transform: none;
}
#menu ul ul li:hover {
    background: #333;
    color: #FFFFFF;
}
div.content {
    background-color        : #DEEBF7;
    border                  : 1px solid #06421C;
    margin                  : 10px;
    padding                 : 10px;
}
div.oben {
    width                   : 98%;
    margin                  : 1%;
}
div.zu_oben {
    clear                   : both;
    margin                  : 0;
}
div.links_oben {
    width                   : 47%;
    margin                  : 1%;
    position                : relative;
    float                   : left;
}
div.rechts_oben {
    width                   : 47%;
    margin                  : 1%;
    position                : relative;
    float                   : right;
}
div.zu_unten {
    clear                   : both;
}
div.links_unten {
    width                   : 47%;
    margin                  : 1%; 
    position                : relative;
    float                   : left;
}
div.rechts_unten {
    width                   : 47%;
    margin                  : 1%;
    position                : relative;
    float                   : right;
}
div.unten { 
    width                   : 98%;
    margin                  : 1%;
    clear                   : both;
}
div.fuss { 
    width                   : 98%;
    margin                  : 1%;
}
ul.liste_cat1 {
    color                   : #FFFFFF;
    margin-left             : 25px;
    font-size               : 14px;
}
ul.liste_cat2 {
    color                   : #FFFFFF;
    margin-left             : 55px;
    font-size               : 12px;
}
 /* Formular Style */
form{
    margin                  : 0;
    padding                 : 5px;
    background              : #95B6D8;
}
fieldset.tabelle{
    margin                  : 0;
    padding                 : 5px;
    background              : #95B6D8;
}
fieldset.formular{
    margin                  : 10px;
    padding                 : 10px; 
    border                  : 1px solid #FFFFFF; 
    -moz-border-radius      : 15px; 
    border-radius           : 15px;
}
legend{
    color                   : #3C527D;
    margin-left             : 60px;
    padding                 : 10px 0 15px 0; 
    font-size               : 14px;
}
p.form {
    margin                  : 5px;
    padding                 : 0;

}
label.klein{
    margin-top              : 0px;
    padding-bottom          : 0;
    margin-left             : 15px;
    text-align              : right;
    color                   : #FFFFFF;
}
label.gross{
    margin-top              : 3px;
    padding-bottom          : 0px;
    display                 : block;
    width                   : 180px;
    text-align              : right;
    color                   : #FFFFFF;    
    float                   : left;
}
input{
    clear                   : both;
    color                   : #333333;
    border                  : 1px solid #FFFFFF; 
    -moz-border-radius      : 5px;
    border-radius           : 5px;
    margin-left             : 10px;
}
select{
    clear                   : both;
    color                   : #333333;
    border                  : 1px solid #FFFFFF; 
    -moz-border-radius      : 5px;
    border-radius           : 5px;
    margin-left             : 10px;
}


input:hover {
    clear                   : both;
    color                   : #333333;
    border                  : 1px solid #FF0000;
    background              : #FFFF66;
    -moz-border-radius      : 5px;
    border-radius           : 5px;
    margin-left             : 10px;
}
select:hover {
    clear                   : both;
    color                   : #333333;
    border                  : 1px solid #FF0000;
    background              : #FFFF66;
    -moz-border-radius      : 5px;
    border-radius           : 5px;
    margin-left             : 10px;
}
input:focus {
    clear                   : both;
    color                   : #333333;
    border                  : 1px solid #FF0000;
    background              : #FFFF66;
    -moz-border-radius      : 5px;
    border-radius           : 5px;
    margin-left             : 10px;
}
select:focus {
    clear                   : both;
    color                   : #333333;
    border                  : 1px solid #FF0000;
    background              : #FFFF66;
    -moz-border-radius      : 5px;
    border-radius           : 5px;
    margin-left             : 10px;
}
textarea {
    clear                   : both;
    color                   : #333333;
    border                  : 1px solid #FFFFFF;
    -moz-border-radius      : 5px;
    border-radius           : 5px;
    margin                  : 5px;
}
textarea:hover {
    clear                   : both;
    color                   : #333333;
    border                  : 1px solid #FF0000; 
    background              : #FFFF66;
    -moz-border-radius      : 5px;
    border-radius           : 5px;
    margin                  : 5px;
}
input.text{
    margin                  : 0 0 10px 3px;
    padding                 : 0;
    border                  : 0;
    border-bottom           : 1px solid #333333;
    background              : #C5D6F8;
}
input.submit{
    font-size               : 12px;
    margin                  : 10px;
    padding                 : 5px;
    border                  : 0;
    background              : #C5D6F8;
    font-weight             : bold;
    border                  : 1px solid #FFFFFF;
}
input.submit:hover{
    font-size               : 12px;
    margin                  : 10px;
    padding                 : 5px;
    border                  : 0;
    background              : #FFFF66;
    font-weight             : bold;
    border                  : 1px solid #FF0000;
}
table#ueber {
    background-color        : #FFEDA0;
    border-collapse         : collapse;
    border                  : none;
}
h1 {
    font-size               : 20px;
    color                   : #08519C;
}
h2 {
    font-size               : 17px;
    color                   : #08519C;
}
h3 {
    font-size               : 14px;
    color                   : #08519C;
}
tabel.liste {
    border                  : 1px solid #FFFFFF;
}
thead.liste {
    background-color        : #2171B5;
    color                   : #FFFFFF;
}
tfoot.liste {
    background-color        : #9ECAE1;
    font-size               : 10px;
    border-top              : 1px solid #999999;
}
tbody.liste{
    background-color        : #DEEBF7;
}
thead.liste th {
    text-align              : left;
    font-size               : 14px;
    padding                 : 2px 5px 2px 5px;
}
tbody.liste td {
    color                   : #000000;
    padding                 : 0 5px 0 5px;
}
tbody.liste tr:hover {
    background-color        : #FFFF66;
    color                   : #FFFFFF;
}
.abut a:hover { 
    width                   : 137px; 
    height                  : 35px; 
    background              : url(images/button_sp_h.png) no-repeat; 
}

Alles anzeigen

Bandit

Sorry, aber damit kann man sich das nicht ansehen, denn es fehlen die Bilder und damit sieht das alles schon wieder anders aus. Nutze zur Not einen Freehoster, damit wir uns das ansehen können

Einen Tipp kann ich dir aber geben: nutze einen HTML-Validator, z.B. http://validator.w3.org/ Du hast reichlich Fehler im Quellcode

Comm

'Gelöst'

Danke für die tatkräftige Unterstützung

des Rätzels lösung ist in den DIVs des Content zu finden

lass ich die ' position: relative; ' weg ( löschen ) hat das menü die gewünschte Funktion.

Gruß Jörg