|
|
|
|
|
|
außerdem ineinander verschachtelt
|
Hallöchen,
ich will mir gerade ein linksbündiges Menü bauen:
http://o0t.de/share/uploads/dateien/menue_xeg.html
Leider siehts so aus:
Die einzelnen Menüepunkte werden ineinander verschachtelt.
Jetzt lässt sich das zwar mit display: block; lösen, dann kann ich aber vermutlich mein vorhaben, ein Untermenü einzubauen vergessen.
Also. ich will dass bei einem Menüpunkt beim hovern des Links (nur des Links, wegen IE 6), rechts ein neues Menü erscheint. Also direkt rechts daneben.
Ideas, anyone?
Vielen Dank.
|
|
|
|
|
|
|
|
|
|
|
Dem li position: relative und dem ul dann position: absolute geben
/ Args, IE6. Vergiss es, zumindest nicht ohne dem IE beizubringen, dass li :hover kann
|
|
[Dieser Beitrag wurde 1 mal editiert; zum letzten Mal von Zensiert am 08.10.2008 21:54]
|
|
|
|
|
|
|
|
|
|
Keine Chance dass ich einfach nur das a hovern lasse?
|
|
|
|
|
|
|
|
|
|
|
Ich wuesste jetzt nicht, wie man ohne Javascript, dem Folgeelement vom a sagen kann, dass es auf display: block gesetzt werden soll.
/ Ich bin gerade ein wenig verwirrt. Moment mal eben :x
// Jo, stimmt schon. Normal wuerde man ja quasi sowas schreiben
| |
| Code: |
ul li:hover ul {
display: block
}
|
|
|
|
[Dieser Beitrag wurde 2 mal editiert; zum letzten Mal von Zensiert am 08.10.2008 22:02]
|
|
|
|
|
|
|
|
|
|
http://www.xs4all.nl/~peterned/csshover.html damit kannste im IE jedem Element ein :hover verpassen. Brauch man zwar Javascript fuer, aber ich denke das sollte gerade fuer IE6-Nutzer keine Problem darstellen und wenn doch, dann halt Pech gehabt, zumindest wenn man den Effekt braucht.
|
|
|
|
|
|
|
|
|
|
|
Hm.
nen NextSibling Selector gibts bei CSS nicht oder?
Oder kann der IE das sogar? 
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von Zensiert
http://www.xs4all.nl/~peterned/csshover.html damit kannste im IE jedem Element ein :hover verpassen. Brauch man zwar Javascript fuer, aber ich denke das sollte gerade fuer IE6-Nutzer keine Problem darstellen und wenn doch, dann halt Pech gehabt, zumindest wenn man den Effekt braucht.
| |
Danke, das wäre dann auch meine Notlösung gewesen.
Schade dass es nicht auch so geht.
Aber warum sind meine <li> Elemente nach wie vor so ineinander verschachtelt?
Gibts da nix anderes als display:block?
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von Teufel
| | Zitat von Zensiert
http://www.xs4all.nl/~peterned/csshover.html damit kannste im IE jedem Element ein :hover verpassen. Brauch man zwar Javascript fuer, aber ich denke das sollte gerade fuer IE6-Nutzer keine Problem darstellen und wenn doch, dann halt Pech gehabt, zumindest wenn man den Effekt braucht.
| |
Danke, das wäre dann auch meine Notlösung gewesen.
Schade dass es nicht auch so geht.
Aber warum sind meine <li> Elemente nach wie vor so ineinander verschachtelt?
Gibts da nix anderes als display:block?
| |
Was genau meinst du jetzt mit verschachtelt?
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von Teufel
Hm.
nen NextSibling Selector gibts bei CSS nicht oder?
Oder kann der IE das sogar?
| |
In CSS3 wenn ich das richtig in Erinnerung habe
a~ul
|
|
|
|
|
|
|
|
|
|
|
Dass sie so ineinander gehen.
Wenn ich den a Elementen ein display:block mitgebe, siehts so aus:
Allerdings wird sich dann wahrscheinlich dieses Untermenü nicht direkt daneben positionieren lassen, oder?
Kennst du evtl eine Seite wos so eine Art Menü als Muster gibt?
|
|
|
|
|
|
|
|
|
|
|
Basierend auf deinem Code, ganz ganz billig eben reingeschrieben
<!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" xml:lang="de" lang="de">
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
<meta http-equiv="content-script-type" content="text/javascript"/>
<!--<link rel="stylesheet" type="text/css" media="all" href="../../assets/style.css"/>-->
<!--<script type="text/javascript" src=""></script>-->
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #fff;
font-family: "Trebuchet MS", "Tahoma", "Verdana", "Sans-Serif";
font-size: 0.9em;
}
div#wrapper {
width: 70%;
margin: 1% auto;
border: 1px solid green;
height: 100%;
}
div#logo {
float: right;
}
img#logo {
width: 200px;
height: 60px;
border: 1px solid #999;
}
div#navi {
float: left;
}
ul {
list-style: none;
}
li {
margin-left: 2px;
display: block;
position: relative;
}
li a:link, li a:visited, li a {
color: #000;
width: 6em;
height: 1em;
border: 1px solid #333;
padding: 3px 8px;
margin: 2px 0;
text-decoration: none;
background: #eee;
}
li a:hover, li a:active {
font-weight: bold;
background: #fff;
}
li:hover .submenu {
display: block;
position: absolute;
margin-left: 75px;
top: 0;
border: 1px solid red;
}
ul.submenu {
display: none
}
li a:hover div.submenu {
display: block;
}
</style>
</head>
<!-- end header -->
<body>
<div id="wrapper">
<div id="logo">
<img id="logo" src=""/>
</div>
<div id="navi">
<ul>
<li><a href="#">Foobar »</a></li>
<li><a href="#">Foobar »</a></li>
<li>
<a href="#">Foobar »</a>
<ul class="submenu">
<li>Foobar2</li>
<li>Foobar2</li>
<li>Foobar2</li>
<li>Foobar2</li>
</ul>
</li>
<li><a href="#">Foobar »</a></li>
<li><a href="#">Foobar »</a></li>
<li><a href="#">Foobar »</a></li>
<li><a href="#">Foobar »</a></li>
<li><a href="#">Foobar »</a></li>
</ul>
</div>
</div>
</body>
</html>
|
|
[Dieser Beitrag wurde 2 mal editiert; zum letzten Mal von Zensiert am 08.10.2008 22:16]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Hm, jetzt habe ich leider noch ein Problem:
http://o0t.de/temp/header.html
die <li>s ausm ersten Menü verschieben sich nach unten wenn sich das Untermenü öffnet...
|
|
|
|
|
|
|
|
|
|
|
|
cssplay.co.uk such unter menu
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Thema: [CSS] Menü und Untermenü ( außerdem ineinander verschachtelt ) |
Play!