Sören: CSS-Menü mit <div>

SELF-Forum

CSS-Menü mit <div>

Sören
– Informationen zu den Bewertungsregeln

Konichi wa,

ich habe folgenden Code:

  
  
<!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">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Untitled Document</title>  
</head>  
<body>  
  
<style type="text/css">  
[code lang=css]  
.menu {  
	border-style: solid;  
	border-width: thin;  
	position: relative;  
	float: left;  
	width: 200px;  
}  
  
.menu2 {  
	border-style: solid;  
	border-width: thin;  
	position: relative;  
	float: left;  
	width: 90px;  
	height: 18px;  
	overflow: hidden;  
}  
  
.menu2:hover {  
	height: auto;  
}  
  
.menu3 {  
	position: relative;  
	width: 70px;  
}  
  
.menu4 {  
	position: relative;  
	float: left;  
	width: 70px;  
}  
  
.menu5 {  
	position: relative;  
	float: left;  
	width: 70px;  
}

</style>

<div class="menu"><a href="">news</a></div>

<div class="menu2">
<div><a href="">camp</a></div>
<div class="menu3"><a href="" class="menu_camp" style="position: relative; left: 2px;">information</a></div>

<div class="menu4">

<div style="widht: 60px; overflow:hidden;">facilities</div>
     <div class="menu5"><a href="" class="menu_camp">jap. house</a></div><br />
<div class="menu5"><a href="" class="menu_camp">log cabins</a></div><br />
<div class="menu5"><a href="" class="menu_camp">chapel</a></div><br />
<div class="menu5"><a href="" class="menu_camp">main house</a></div> <br />
    </div>

<div class="menu3"><a href="" class="menu\_camp">price list</a></div>  
<div class="menu3"><a href="" class="menu\_camp">application</a></div>  
<div class="menu3"><a href="" class="menu\_camp">about us</a></div>

</div>

<div class="menu"><a href="">links</a></div>
<div class="menu"><a href="">contact</a></div>
<div class="menu"><a href="">karuizawa</a></div>

</body>
</html>
[/code]

Das Menü soll so funktionieren, dass bei "camp" ein Menü vertikal aufklappt und in diesem Menü soll bei dem Punkt "facilities" soll dann nochmal ein Menü horizontal aufklappen.

Das vertikale aufklappen funktioniert einwandfrei. Nur bei dem anschließend noch horizontal aufklappen funktioniert es nicht, da die "<div>" mit "class='menu5'" nicht neben "facilities" bekomme.

Ich denke, dass ich irgendwo einen gravierenden Denkfehler drin habe, auf den ich nicht komme.

Viele Grüße aus Japan
Sören

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS-Menü mit <div>

    LX
    – Informationen zu den Bewertungsregeln

    Hallo, Sören.

    Erstens: Warum verwendest Du eine div-Suppe, obwohl Deine Menü-Daten verschachtelten unsortierten Listen entsprechen?

    Zweitens: <div style="widht: 60px; (...)> kann nicht funktionieren, da es nicht widht, sondern width heißen muss.

    Gruß, LX

    --
    X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: Unusual
    X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln