[css] Problem med lager
Jag har försökt skapa en dropdown-meny i css som vid mouse-over ska visa en div.
Diven är stylead med en bakgrund så att det ligger en skugga runt om hela. Jag vill att fliken som du har musen över skall ligga över diven som hoppar upp (så att den övre skuggan inte syns vid just den fliken) men att resten av sidans flikar hamnar bakom diven så att skuggan syns där.
Jag har bråkat halva dagen med z-index för att få till det men det går inge vidare. Antingen hamnar alla flikar över diven eller också försvinner halva flikarnas bakgrund när man för musen över dropdown-fliken.
Någon här som kan hjälpa till?
Här kommer min kod och de bilder jag använder
<!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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
#ddropdown{
position: relative;
z-index: -1;
width: 300px;
margin-left: -17px;
margin-top: 0px;
text-decoration: none;
}
#ddropdown .container2 {
clear:left;
float:left;
width:100%;
background-image: url(gfx/categories_list.png);
background-repeat: no-repeat;
background-position: right top;
}
#ddropdown .container1 {
float:left;
width:100%;
}
#ddropdown .col11 {
float:left;
width:90%;
background: #fff;
background-image: url(gfx/categories_list.png);
background-repeat: no-repeat;
background-position: left top;
}
#ddropdown .col12 {
float:left;
width:10%;
}
#ddropdown .container4 {
clear:left;
float:left;
width:100%;
background-image: url(gfx/categories_list.png);
background-repeat: no-repeat;
background-position: right bottom;
}
#ddropdown .container3 {
float:left;
width:100%;
}
#ddropdown .col21 {
float:left;
width:90%;
background: #fff;
background-image: url(gfx/categories_list.png);
background-repeat: no-repeat;
background-position: left bottom;
height: 29px;
}
#ddropdown .col22 {
float:left;
width:10%;
height: 29px;
}
#ddropdown .contents {
padding-top:30px;
padding-left: 30px;
}
#nav {
margin:0px;
padding:0px;
position:absolute;
top: 0px;
display:block;
}
#nav > li {
list-style-type:none;
float:left;
display:block;
margin-left:10px;
padding:0px;
position:relative;
height: 38px;
width: 100px;
background-image: url(gfx/menu_off.gif);
background-repeat: repeat-x;
color: #fff;
}
#nav > li:hover div {position: relative; display:block;}
#nav > li:hover {
background-image: url(gfx/menu_on.gif);
background-repeat: repeat-x;
}
#nav li div { display:none; }
#nav > li:hover span{
text-decoration: underline;
}
</style>
</head>
<body>
<div style="position: relative; z-index: 1; margin: 20px;">
<ul id="nav">
<li><span>Menu 1</span>
<div id="ddropdown">
<div class="container2">
<div class="container1">
<div class="col11">
<div class="contents">
innehåll <br /> i kol 1 jeorjgodjrogjdo gjdior gjdio rjgid orjg diiorj gdior gjdiorj gdio jögioö gehrugo hi
innehåll <br /> i kol 1 jeorjgodjrogjdo gjdior gjdio rjgid orjg diiorj gdior gjdiorj gdio jögioö gehrugo hi
<br />adawd<br />hauiwhdi<br />kawpodko
</div>
</div>
<div class="col12"> </div>
</div>
</div>
<div class="container4">
<div class="container3">
<div class="col21"></div>
<div class="col22"></div>
</div>
</div>
</div>
</li>
<li><span>Menu 2</span></li>
<li><span>Menu 3</span></li>
</ul>
</div>
<div style="clear: both;"><br /><br /></div>
</body>
</html>
categories_list.png
menu_off.gif
menu_on.gif
