✔ Navigation Breite des Topmenu "fixieren", Submenu hat feste Breite

E

Elli1898

Grünschnabel
Hallo,

gleich vorab: ich befasse mich seit Kurzem mit CSS, finde aber zu meinem Problem keine Lösung (oder schaffe es, sie zu übersehen... :) )

Ich habe ein einfaches, horizontales Menü erstellt mit Unterpunkten. Die Unterpunkte haben eine feste Breite von 170 px.

Sobald man mit der Maus über einen der "Hauptpunkte" fährt (welcher z. B. nur 100 px breit sein soll (Breite soll sich an die Länge des "Wortes" anpassen, z. B. "Startseite", "Treppen" usw.), öffnet sich das Dropdown-Menü (Breite: 170px) und der Hauptpunkt (100px) bekommt automatisch eine komplette Breite von 170px.

Hier der Quellcode aus der style.css:

CSS: 
#menu {
  font-size:13px;
  position:absolute;
}

#menu ul {
  list-style-type: none;
  list-style-image: none;
  margin: 0px;
  padding: 0px;
}

#menu li.topmenu {
  float: left;
  font-family: 'Verdana'
}

.topmenu a {
  float: left;
  width: auto;
  text-align: center;
}

.topmenu ul{
  display: none;
}

.topmenu a, .submenu a{
  padding: 2px 2px;
  border: 1px solid #060354;
  border-collapse: collapse;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
  background-color: #060354;
  margin: 1px; 
}

.submenu a{
  font-size: 12px;
  width: 170px;
  position: relative;
  clear: both; /* special IE6 */
}

#menu a:hover, .topmenu.on a {
  color:#000000;
  background-color:#FFFFFF !important;
}

.topmenu:hover ul {
  display:block; 
  z-index:500;
}

Und hier ein kleiner Auszug aus dem Menü:

HTML: 
<div id="menu">
            <ul>
                  <li class="topmenu">
                    <a id="main" href="http://w9z0f5z73.homepage.t-online.de/seyda/">Startseite</a>
                    <ul>
                      <li class="submenu"><a href="http://w9z0f5z73.homepage.t-online.de/seyda/?page_id=15">Über uns</a></li>
                     <li class="submenu"><a href="http://w9z0f5z73.homepage.t-online.de/seyda/?page_id=19">Anfahrt</a></li>
                       </ul>
                 </li>

                  <li class="topmenu">
                    <a id="main" href="http://w9z0f5z73.homepage.t-online.de/seyda/?page_id=38">Tor- & Zaunanlagen</a>
                    <ul>
                      <li class="submenu"><a href="http://w9z0f5z73.homepage.t-online.de/seyda/?page_id=40">Toranlagen</a></li>
                     <li class="submenu"><a href="http://w9z0f5z73.homepage.t-online.de/seyda/?page_id=79">Zaunanlagen</a></li>
                       </ul>
                 </li>
</ul>
</div>

Ich hoffe, ihr versteht mich... :)

Vielen lieben Dank!
 
Die Hauptmenüpunkte werden dafür relativ, und die Submenüs darin absolut positioniert.

Relevanter CSS-Auszug:
CSS: 
#menu li.topmenu { 
  float: left;
  font-family: 'Verdana';
  position: relative /* ergänzt von SpiceLab */
}

#menu ul ul { /* Selektor umbenannt von SpiceLab */
  display: none;
  position: absolute; /* ergänzt von SpiceLab */
  left: 0; /* ergänzt von SpiceLab */
  top: 23px /* ergänzt von SpiceLab */
}

#menu li:hover ul { /* Selektor umbenannt von SpiceLab */
  display:block;
  z-index:500;
}

Ergebnis: https://jsfiddle.net/spicelab/k0j2mqd2/
 
Hallo SpiceLab,

vielen Dank, das hat schon mal super geholfen!

Jetzt habe ich nur das Problem, dass ich über die Menüleiste fahre, und sich alle Unterpunkte ganz links öffnen (unter "Startseite"), und nicht unter dem jeweiligen "Hauptpunkt"...

Hier nochmal der aktuelle css-Quellcode:

CSS: 
#menu {
  font-size:13px;
  position:absolute;
}

#menu ul {
  list-style-type: none;
  list-style-image: none;
  margin: 0px;
  padding: 0px;
}

#menu li.topmenu {
  float: left;
  font-family: 'Verdana'
  position: relative
}

.topmenu a {
  float: left;
  width: auto;
  text-align: center;
}

#menu ul ul {
  display: none;
  position: absolute;
  left: 0;
  top: 40px
}

.topmenu a, .submenu a{
  padding: 2px 2px;
  border: 1px solid #060354;
  border-collapse: collapse;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
  background-color: #060354;
  margin: 1px; 
}

.submenu a{
  font-size: 12px;
  width: 170px;
  position: relative;
  clear: both; /* special IE6 */
}

#menu a:hover, .topmenu.on a {
  color:#000000;
  background-color:#FFFFFF !important;
}

#menu li:hover ul {
  display:block;
  z-index:500;
}
 
Elli1898 hat gesagt.:
Jetzt habe ich nur das Problem, dass ich über die Menüleiste fahre, und sich alle Unterpunkte ganz links öffnen (unter "Startseite"), und nicht unter dem jeweiligen "Hauptpunkt"...

Hier nochmal der aktuelle css-Quellcode:

CSS: 
...
#menu li.topmenu {
  float: left;
  font-family: 'Verdana'
  position: relative
}
...
Zum Vergrößern anklicken....
Am Ende von font-family:'Verdana' fehlt bei Dir plötzlich das Semikolon, wodurch die darauffolgende Regel position:relative vom Browser ignoriert wird.
 
Elli1898 hat gesagt.:
Hi Du, ich bins nochmal... Eine Frage: wie schaffe ich, das Menü zu zentrieren?
Es sitzt über einen DIV im Header (dort gibt es den DIV Logo und Menü).
Habe sämtliches ausprobiert, aber es geht nicht...

Hier nochmal meine CSS-Datei:
CSS: 
body        {font-family:'Verdana'; font-size: 13px; color: #313131; background: #e5e5e5;}

#wrapper {width: auto; min-width: 960px; max-width: 1200px; margin: auto; background: #ffffff}

#header {padding-top: 10px; border: dotted #cccccc 1px; text-align: center;}

#menu {
  font-size: 13px;
  position: absolute;
}

#menu ul {
  list-style-type: none;
  list-style-image: none;
  margin: 0px;
  padding: 0px;
}

#menu li.topmenu {
  float: left;
  font-family: 'Verdana';
  position: relative;
}

.topmenu a {
  float: left;
  width: auto;
  text-align: center;
}

#menu ul ul {
  display: none;
  position: absolute;
  left: 0px;
  top: 40px
}

.topmenu a, .submenu a{
  padding: 2px 2px;
  border: 1px solid #060354;
  border-collapse: collapse;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
  background-color: #060354;
  margin: 1px;
}

.submenu a{
  font-size: 12px;
  width: 170px;
  position: relative;
  clear: both; /* special IE6 */
}

#menu a:hover, .topmenu.on a {
  color:#000000;
  background-color:#FFFFFF !important;
}

#menu li:hover ul {
  display:block;
  z-index:500;
}


#main {padding-top: 18px;}

#footer {text-align: right; font-size: small;}
Zum Vergrößern anklicken....
Das nächste Mal bitte nicht per PN um Hilfe bitten, sondern die Frage ans Forum richten!

CSS- / HTML-Ergänzung:
CSS: 
#menu {
  float: right;

  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}
#menu > .child {
  position: relative;
  left: 50%;
}
#menu {
  font-size: 13px;
  /*position: absolute; */ /* auskommentiert = deaktiviert */
}
HTML: 
<div id="menu">
  <ul class="child">
    ...
  </ul>
</div>
Quelle: CSS Tip : How To Center Floating elements
 
Hi Spicelab,

eine weitere Frage zum Footer:

er hat einen eigenen DIV. Ich habe meinem Wrapper eine Mindesthöhe von 800 px gegeben.

Mit diesem Quellcode:

CSS: 
#footer {position: absolute; bottom: 0; padding-left: 30px; background-color: #034B92; width: auto; height: 20px; color: #ffffff;}

sitzt er zwar ganz unten, aber überdeckt immer die letzte Zeile des im DIV Inhalt vorhandenen Textes. Der Text, den ich im ausgelagerten Footer angegeben habe, wird zur Hälfte innerhalb des Wrappers und zur Hälfte außerhalb des Wrappers angezeigt. Die Hintergrundfarbe "blau" zeigt mir aber dass der Footer eigentlich richtig platziert ist und auch 20 px hoch ist.

Weißt Du hier eine Lösung?!
 
Wenn ich Deine Schilderung richtig verstehe, benötigt das <div> für den Inhalt ein padding-bottom:20px, um nicht vom Footer überdeckt zu werden.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück