Nicht mehr ganz neu hier
Ich habe schon seit geraumer zeit ein für mich anscheinend unlösbares problem mit einem von mir entwickelten dropdown menü....
kurz und bündig, das menü scheint trotz verwendung von z-index und umstellen der div´s im dokument immer unten zu liegen... heisst, alle anderen inhalte der seite liegen immer darüber... hier mal ein kleiner screenshot und der quelltext
index.html:
Style.css
Es wäre echt ganz super wenn mir da einer weiter helfen könnte , so langsam verzweifle ich. Wahrscheinlich isses ein ganz doofer Anfängerfehler, aber ich komme einfach nicht drauf...
PS: Ich benutze Safari und Firefox, jeweils die neuste Version
user11: Ich hab mal Code Tags eingefügt. Ist übersichtlicher.
kurz und bündig, das menü scheint trotz verwendung von z-index und umstellen der div´s im dokument immer unten zu liegen... heisst, alle anderen inhalte der seite liegen immer darüber... hier mal ein kleiner screenshot und der quelltext
index.html:
HTML:
<!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">
<html>
<head>
<link type="text/css" href="style.css" rel="stylesheet" media="screen" />
<title>neu2</title>
</head>
<body>
<div class="navi_box">
<div class="button_head">Home</div>
<div class="button"><a href="index.html">unterkate1</a></div>
<div class="button"><a href="index.html">unterkate2</a></div>
<div class="button"><a href="index.html">unterkate3</a></div>
</div> <!-- end "navi_box" -->
<div class="navi_box">
<div class="button_head"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div> <!-- end "navi_box" -->
<div class="navi_box">
<div class="button_head"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div> <!-- end "navi_box" -->
<div class="test_content">
sdfsdfsdgdfsgdsfgdsfgsdfg<br>
sdfsdfsdgdfsgdsfgdsfgsdfg<br>
sdfsdfsdgdfsgdsfgdsfgsdfg<br>
sdfsdfsdgdfsgdsfgdsfgsdfg<br>
sdfsdfsdgdfsgdsfgdsfgsdfg<br>
</div>
</body>
</html>
Style.css
Code:
body
{
font-size:0.9em;
}
a:visited
{
text-decoration:none;
color:black;
}
a:hover
{
color:red;
}
.navi_box
{
width:5em;
height:1.4em;
background-color:white;
overflow:hidden;
float:left;
margin-left:-1px;
padding:-1px;
border:solid black 1px;
z-index:999;
}
.navi_box:hover
{
width:5em;
height:auto;
color:red;
border-width:1px 1px 0px 1px;
}
.button_head
{
height:1.4em;
width:5em;
background-color:white;
float:bottom;
text-align:center;
border:solid black;
border-width:0 0 1px 0;
}
.button_head:hover
{
background-color:#F2F2F2;
}
.button
{
text-align:center;
height:1.4em;
width:5em;
background-color:white;
float:bottom;
color:black;
border:solid black;
border-width:0 0 1px 0;
}
.button:hover
{
background-color:#F2F2F2;
}
.test_content
{
position:absolute;
top:8em;
left:8em;
z-index:998;
}
Es wäre echt ganz super wenn mir da einer weiter helfen könnte , so langsam verzweifle ich. Wahrscheinlich isses ein ganz doofer Anfängerfehler, aber ich komme einfach nicht drauf...
PS: Ich benutze Safari und Firefox, jeweils die neuste Version
user11: Ich hab mal Code Tags eingefügt. Ist übersichtlicher.
Zuletzt bearbeitet von einem Moderator: