✔ Horizontales Menü (ohne JS/htc) ?

Status
Nicht offen für weitere Antworten.
Ok, mein Fehler. Vor und hinter dem <ul> kommt natürlich noch:

HTML: 
<div id="menu">
		<div class="ecke_links"></div>
		<ul id="nav">
		............
		</ul>
		<div class="menu_suche"><form action="../suche.php" method="post"><input type="text" name="suchphrase" value="Suchbegriff..." onblur="if(this.value==''){this.value='Suchbegriff...'}" onfocus="if(this.value=='Suchbegriff...'){this.value=''}" /></form></div>
		<div class="ecke_rechts"></div>
</div>

Die ID=nav wird allein für das JS verwendet.

Grüße,
Steffen
 
Dann wär das ja geklärt ;)

Warper hat gesagt.:
[...] ich habe bei meiner aktuellen Wahl noch das Problem, das immer das unterste <li>Link</li> eines Submenüs im Opera (9) als unklickbare Leiche vorhanden bleibt.
Zum Vergrößern anklicken....
Bei mir lassen sich die untersten Submenü-Links im Opera (9.01) problemlos anklicken :confused:
 
Schön guten Tag,

@Michael:Zwar wird nicht das beschrieben was ich meinte, aber ich bin glaub ich schon selbst nu drauf gekommen ... werd mich gleich ma ranmachen :)
 
So hab mir nun was gebastelt und vor allem auch verstanden :D

Was ist überlüssig/sinnfrei? Wo dürfte ich später auf Probleme treffen, bezüglich browserkompatibilität?

html >

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
  <head>
    <title>menu</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="menu">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li>
          <a href="#">Link 3 »</a>
          <ul>
            <li><a href="#">Link 3.1</a></li>
            <li><a href="#">Link 3.2</a></li>
          </ul>
        </li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li>
          <a href="#">Link 6 »</a>
          <ul>
            <li><a href="#">Link 6.1</a></li>
            <li><a href="#">Link 6.2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

css >

HTML: 
body {
  margin: 0px;
}
#menu,
#menu a,
#menu a:visited {
  color: #fff;
  font: 10pt verdana;
  text-decoration:none;  
  background-color: #41464f;
  border:1px solid #fff;
  border-width:0 1px 1px 0;
  display:block;
  width: 120px;
  z-index: 1000;
}
#menu ul {
  padding:0;
  margin:0;
  width:150px;
  list-style-type:none;  

}
#menu li {
  position:relative;
}
#menu ul ul {
  position:absolute;
  visibility: hidden;
  left:121px;
  top:0;  
}
#menu ul :hover ul {
  visibility: visible;
}
 
Zuletzt bearbeitet:
Schön guten Tag :)

Noch eine Frage : Wie kann ich mein Menü jetzt positionieren. Die flolgende Variante funktioniert leider nicht, es wird mir dann nur der letzte Menüpunkt angezeigt.

HTML: 
#menu,
#menu a,
#menu a:visited {
  color: #fff;
  font: 10pt verdana;
  text-decoration:none;
  background-color: #41464f;
  border:1px solid #fff;
  border-width:0 1px 1px 0;
  display:block;
  width: 120px;

  position:absolute;
  top: 50px;
  left: 30px;
}

Der rest von der CSS ist oben zu finden. Ich denke mal das es an :

HTML: 
#menu li {
  position:relative;
}
liegt.
 
Hast du das Listenmenü mal im IE 6 betrachtet und überprüft?

Die Submenüs werden überhaupt nicht eingeblendet und mit der CSS-Formatierung stimmt da auch etwas nicht, da du u.a. das ul-Element 150px breit definiert hast, obwohl das umgebende DIV und die Links nur 120px breit sind.

Hier die überarbeitete Fassung des Stylesheets, damit das Menü in den gängigsten Browsern einheitlich dargestellt wird:

Code: 
body {
  margin: 0px;
  padding: 0;
}
#menu {
  position:absolute;
  top: 50px;
  left: 30px;
  width: 121px;
  background-color: #41464f;
}

#menu a:link,
#menu a:visited {
  color: #fff;
  font: 10pt verdana;
  text-decoration:none;
  background-color: #41464f;
  border:1px solid #fff;
  border-width:0 1px 1px 0;
  display:block;
  width: 120px;
  z-index: 1000;
}

#menu ul {
  padding:0;
  margin:0;
  width:121px;
  list-style-type:none;

}
#menu li {
  position:relative;
}
#menu ul ul {
  position:absolute;
  display: none;
  left:121px;
  top:0;
}
#menu ul :hover ul {
  display: block;
}
Für den IE 6 wirst du dir also noch was überlegen müssen, damit die Submenüs eingeblendet werden, Stichwörter: Javascript oder Stu Nicholls' CSS-Menüs ;)
 
Den Fehler bei der Breitenangabe hatt ich gestern schon gesehn und korrigiert.

Um das Problem mit <=IE6 wollt ich mich noch kümmern. Ich muss nur erstmal sehn wie ich noch einen 2. IE auf meinem PC bekomme, hab zur Zeit die 7er Version bei mir. Hab zwar einen 2. Rechner, aber da müsst ich immer erst 2 Stockwerke laufen und nun ja ... ich bin faul :rolleyes: .



Edit: Hab eben was nettes bei Google gefunden :

Alle Internet Explorer gleichzeitig auf einem Rechner

Dürfte für jeden Grafiker/Skripter recht interessant sein.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück