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

[ERLEDIGT] Text wird übereinander geschrieben.

Status
Für weitere Antworten geschlossen.
M

milli

Neues Mitglied
Hallo,
ich bin ganz neue also entschuldigt für meine Fehler :)
ich versuche mich gerade im erstellen einer Website, genauer gesagt an einem Mega Drop Down Menü. Jetzt habe ich bereits das Hauptmenü und das Untermenü erstellt, doch das Hauptmenü (mainmenu) wurde von dem Untermenü (submenu) verschoben. Anschließen habe ich das Hauptmenü mit position: relative und das Untermenü mit position: absolute festgelegt. Das funktionierte auch, allerdings werden nun alle Punkte im Untermenü übereinander geschrieben. Kann mir jemand helfen es wieder nebeneinander anzeigen zu lassen?
Vielen Dank im Voraus und schönen Feiertag.
HTML: 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <nav>
    <ul id="mainmenu">
        <li>Startseite</li>
        <li><a href="">Bürgerservice</a>
                    <ul id="submenu">
                        <h5>Service</h5>
                        <li><a href="">Abfallangelegenheiten</a></li>
                        <li><a href="">Babysitterdienst</a></li>
                        <li><a href="">Elternberatung</a></li>
                        <li><a href="">Energieberatung</a></li>
                        <li><a href="">Essen auf Rädern</a></li>
                        <li><a href="">Familienpass</a></li>
                        <li><a href="">REK 2013</a></li>
                        <li><a href="">Umwelt</a></li>
                        <li><a href="">Vorsorgemappe</a></li>
                        <li><a href="">Wahlen</a></li>
                    </ul>
                    <ul id="submenu"><h5>Gemeindeamt</h5>
                        <li><a href="">Öffnungszeiten</a></li>
                        <li><a href="">Kontakt</a></li>
                    </ul>
                    <ul id="submenu"><h5>Politik</h5>
                        <li><a href="">Bürgermeister</a></li>
                        <li><a href="">Gemeindevertretung</a></li>
                        <li><a href="">Ausschüsse</a></li>
                        <li><a href="">Wahlergebnisse</a></li>   
                    </ul>
                    <ul id="submenu"><h5>Wissenswertes</h5>
                        <li><a href="">Geschichte</a></li>
                        <li><a href="">Statistische Daten</a></li>
                    </ul>             
        <li>Soziales</li>
        <li>Freizeit</li>
        <li>Tourismus</li>
        <li>Wirtschaft</li>
        </ul>
    </nav>
    </body>
</html>
CSS
Code: 
nav {
    height: 250px;
    position: absolute;
    width: 100%;
    top: 0;
    left:0;
    background: #2E2EFE}
#mainmenu {float: left; position: relative;}
nav > ul > li {
    position: relative;
    float: left;
    display: inline-block;
    list-style: none;
    margin: 25px;
}
#submenu { position: absolute; left; width: 100px;
    margin: 20px}
 
#submenu taucht im HTML-Code mehrmals auf. Darf es aber nicht.

Warum nicht so?
HTML: 
<nav>
  <ul>
    <li>Startseite</li>
    <li><a href="">Bürgerservice</a>
      <ul>
        <li><h5>Service</h5></li>
        <li><a href="">Abfallangelegenheiten</a></li>
        <li><a href="">Babysitterdienst</a></li>
        <li><a href="">Elternberatung</a></li>
        <li><a href="">Energieberatung</a></li>
        <li><a href="">Essen auf Rädern</a></li>
        <li><a href="">Familienpass</a></li>
        <li><a href="">REK 2013</a></li>
        <li><a href="">Umwelt</a></li>
        <li><a href="">Vorsorgemappe</a></li>
        <li><a href="">Wahlen</a></li>
        <li><h5>Gemeindeamt</h5></li>
        <li><a href="">Öffnungszeiten</a></li>
        <li><a href="">Kontakt</a></li>
        <li><h5>Politik</h5></li>
        <li><a href="">Bürgermeister</a></li>
        <li><a href="">Gemeindevertretung</a></li>
        <li><a href="">Ausschüsse</a></li>
        <li><a href="">Wahlergebnisse</a></li>
        <li><h5>Wissenswertes</h5></li>
        <li><a href="">Geschichte</a></li>
        <li><a href="">Statistische Daten</a></li>
      </ul>
    </li>
    <li>Soziales</li>
    <li>Freizeit</li>
    <li>Tourismus</li>
    <li>Wirtschaft</li>
  </ul>
</nav>
CSS: 
nav {
  height:250px;
  position:absolute;
  width:100%;
  top:0;
  left:0;
  background: #2E2EFE
}
nav ul {list-style:none}
nav > ul {
  float:left;
  position:relative
}
nav > ul > li {
  position:relative;
  float:left;
  display:inline-block;
  margin:25px
}
nav > ul > li > ul {
  display:none;
  position:absolute;
  width:100px;
  padding:20px /*padding anstelle von margin, damit das Submenü nicht vorzeitig geschlossen wird*/
}
nav > ul > li:hover > ul {display:block}
nav > ul > li > ul > li > h5 {margin:10px 0 0 0}
 
Danke, aber eigentlich möchte ich es nicht tiefer verschachteln, sondern "Service","Gemeinde", "Politik", "Wissenswertes" nebeneinander stehen haben. Kann ich dies mit column erreichen?
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben