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

slide menu

M

musclebreast

Mitglied
Hi,

ich bau mir gerade eine slide menu....Soweit funtkioniert alles ziemlich gut. Hier der Code

html

HTML: 
 <div id="menu">
   <ul class="cssmenu">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Über Haarausfall</a>
     <ul>
        <li><a href="">Webseiten erstellen</a></li>
   <li><a href="">Webseiten erstellen</a></li>
  </ul>
    </li>



CSS Datei

HTML: 
/* untermenü */
ul.cssmenu {
  position: relative;
  display: block;
  margin: 0px;
  padding: 10px;
  padding-left: 50px;
}
ul.cssmenu ul {
  position: relative;
  display: none;
 
}
ul.cssmenu li {
  position: relative;
  display: inline;
  float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
  font-family: arial, sans-serif;
  font-size: 12px;
  line-height: 20px;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 120px;
  height: 20px;
 margin-left:20px; 
 
}
ul.cssmenu li:hover > a {
  background: url(images/menuhover.png) repeat-x;            /* Hintergrundfarbe bei Menu bei rueberscrollen*/
  color: #ffffff;       /* Schriftfarbe bei Menu bei rueberscrollen*/  
  font-weight: bold;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
  position: absolute;
  top: 20px;
  left: 0px;
  display: inline;
  margin-top:10px;
}

Mein Problem ist dies..ich will nicht dass das Untermenu optisch an die Menupunkte dran ist sodern mit einem Abstand von 10 px (margin-top:10px;). Soweit so gut..jetzt wenn ich ueber den Menupunkt scrolle dann ist der Abstand da..problem ist um aufs Untermenu zu kommen muss ich die Menu schaltflaeche verlassen und in dem Moment verschwindet ja das untermenu...kann ich irgendwie das aufblenden des Untermenus verzoegern oder habt iht eine idee wie ich es loesen kann?

lg
 
..

Ok, ich habe den Text mal kurz in eine datei gebracht...Problem sind wirklich diese 10 px Abstand...ich will aber das Untermenu versetzt haben...wie kann ich das lösen?

lg

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS-Syntax für Kommentare</title>
<style type="text/css">
/* untermenü */
ul.cssmenu {
  position: relative;
  display: block;
  margin: 0px;
  padding: 10px;
  padding-left: 50px;
}
ul.cssmenu ul {
  position: relative;
  display: none;
 
}
ul.cssmenu li {
  position: relative;
  display: inline;
  float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
  font-family: arial, sans-serif;
  font-size: 12px;
  line-height: 20px;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 120px;
  height: 20px;
 margin-left:20px; 
 
}
ul.cssmenu li:hover > a {
  background-color:#121212;             /* Hintergrundfarbe bei Menu bei rueberscrollen*/
  color: #ffffff;       /* Schriftfarbe bei Menu bei rueberscrollen*/  
  font-weight: bold;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
  position: absolute;
  top: 20px;
  left: 0px;
  display: inline;
  margin-top:10px;   /* beim abstand 0 funktioniert es*/
}
</style>
</head>
<body bgcolor="#666666">
 

<div id="menu">
   <ul class="cssmenu">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Über Haarausfall</a>
     <ul>
        <li><a href="">Webseiten erstellen</a></li>
   <li><a href="">Webseiten erstellen</a></li>
  </ul>
    </li>
 

</body>
</html>
 
Zuletzt bearbeitet:
Fang mal damit an, deinen Html-Code ordentlich zu Ende zu bringen, Tags die man öffnet, muss man schließen.
Abstand wäre dann ca so, dem zweiten ul eine Klasse odet ID hinzufügen und einen Eintrag in der css Datei machen.
Code: 
[COLOR=#000080]<div id=[COLOR=#0000ff]"menu"[/COLOR]>[/COLOR]
   [COLOR=#000080]<ul class=[COLOR=#0000ff]"cssmenu"[/COLOR]>[/COLOR]
    [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR]>[/COLOR]Home[COLOR=#008000]</a>[/COLOR]
    [COLOR=#000080]</li>[/COLOR]
    [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR]>[/COLOR]Über Haarausfall[COLOR=#008000]</a>[/COLOR]
     [COLOR=#000080]<ul class="abstand">[/COLOR]
        [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]""[/COLOR]>[/COLOR]Webseiten erstellen[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
     </ul>
   [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]""[/COLOR]>[/COLOR]Webseiten erstellen[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
  [COLOR=#000080]</ul>[/COLOR]
</div>
Code: 
.abstand
{
  margin-top: 10px;
}
 
...

Hi,

Danke für deine Hilfe...mit dem Tag da hast du natürlich recht, da habe ich beim kopieren wohl eines vergessen. denAbstand habe ich doch schon eingetragen wenn du in meine css Definition schaust. Das Prolem ist, dass bei dem Abstand ich nicht mehr aufs Untermeü zugreifen kann weil ich den Hover effekt aufhebe wenn ich das Hauptmenü verlassen. Ich will aber den Abstand. Wie kann ich das Problem lösen?

lg
 
Wenn ich dein Problem richtig verstanden habe, könntest du der ul doch einfach ein Padding-top geben? Dadurch erzeugst du einen Abstand und innerhalb dieses Abstandes gibt es noch immer den Hover-Effekt. Keine besonders schöne Lösung, sollte aber klappen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben