Hallo,
wenn ich auf meiner 2ten ebene des menüs mit der maus gehe, dann legt sich
die erste ebene "nach und nach" über die 2te. (nur beim IE)
Wenn ich das Menü einzeln in eine datei packe, geht es ohne probleme
Könnt ihr euch das mal bitte angucken:
PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>CSS.1.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a:link {
color:silver;
padding:2px;
}
a:visited {
color:gray;
padding:2px;
}
a:hover {
border:1px solid white;
padding:1px;
}
body {
background:#00FFFF;
color:white;
margin-left:20px;
margin-top:0px;
padding-top:0px;
}
body > div {
border-left:1px solid white;
padding-left:5px;
}
div#menue > div#hoverschutz > div {
width:200px;
height:123px;
border:1px solid white;
margin:2px;
float:left;
background:black;
}
div#menue > div#hoverschutz > div > div {
width:200px;
height:123px;
position:absolute;
background:black;
}
div#menue > div#hoverschutz > div > div > span {
display:none;
}
div#menue:hover > div#hoverschutz > div > div > span {
font-weight:bold;
border:1px solid white;
display:block;
position:relative;
top:50px;
left:0px;
width:300px; // breite vom hover
height:17px;
z-index:5;
padding:2px;
margin-bottom:-21px;
background:transparent;
color:white;
font-size:14px;
/* background:url('Winter.jpg'); */
white-space:nowrap;
overflow:hidden;
/* text-align:center; */
}
div#menue:hover > div > div > span {
display:none;
}
div#menue > div#hoverschutz:hover > div > div > span {
display:none;
}
div#menue > div#hoverschutz:hover > div:hover > div > span {
display:block;
left:auto;
position:fixed;
right:900px; // abstand zum rand
top:100px; // abstand zum rand
width:600px;
height:400px; // hoehe vom hover
border:1px solid silver;
z-index:500;
color:white;
padding:1px;
font-weight:bold;
background:transparent;
}
div#menue > div#hoverschutz:hover > div:hover > div > span {
display:block;
font-weight:normal;
white-space:normal;
}
/*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc .qmcbox{cursor:default;display:block;position:relative;z-index:1;}.qmmc .qmcbox a{display:inline;}.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 li {float:none;}#qm0 li:hover>ul{top:0px;left:100%;}
/*!!!!!!!!!!! QuickMenu Styles [Please Modify!] !!!!!!!!!!!*/
/* QuickMenu 0 */
/*"""""""" (MAIN) Container""""""""*/
#qm0
{
width:130px;
padding:10px;
margin:0px;
background-color:#000000;
border-width:1px;
border-style:solid;
border-color:#FFFFFF;
}
/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
padding:3px 20px 3px 3px;
margin:0px 0px 2px 0px;
background-color:transparent;
color:#AAAAAA;
font-family:Arial;
font-size:14px;
text-decoration:none;
border-width:0px;
border-style:solid;
border-color:#AAAAAA;
}
/*"""""""" (MAIN) Hover State""""""""*/
#qm0 a:hover
{
color:#FFFFFF;
border-color:#FEFEFE;
}
/*"""""""" (MAIN) Hover State - (duplicated for pure CSS)""""""""*/
#qm0 li:hover>a
{
color:#FFFFFF;
border-color:#FEFEFE;
}
/*"""""""" (MAIN) Active State""""""""*/
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
color:#FFFFFF;
border-color:#FFFFFF;
}
/*"""""""" (SUB) Container""""""""*/
#qm0 div, #qm0 ul
{
padding:3px;
background-color:#000000;
border-width:1px;
border-style:solid;
border-color:#FFFFFF;
}
/*"""""""" (SUB) Items""""""""*/
#qm0 div a, #qm0 ul a
{
padding:3px 20px 3px 5px;
color:#CCCCCC;
font-family:Arial;
font-size:13px;
text-decoration:none;
border-color:#FFCC33;
}
/*"""""""" (SUB) Hover State""""""""*/
#qm0 div a:hover
{
color:#FFFFFF;
font-size:13px;
}
/*"""""""" (SUB) Hover State - (duplicated for pure CSS)""""""""*/
#qm0 ul li:hover>a
{
color:#FFFFFF;
font-size:13px;
}
/*"""""""" (SUB) Active State""""""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
color:#F8F8F8;
}
/*"""""""" Individual Titles""""""""*/
#qm0 .qmtitle
{
margin:2px 5px 5px 5px;
color:#F6F6F6;
font-family:Arial;
font-size:11px;
font-weight:bold;
}
/*"""""""" Individual Horizontal Dividers""""""""*/
#qm0 .qmdividerx
{
border-top-width:1px;
margin:4px 5px 4px 5px;
border-color:#AAAAAA;
}
/*"""""""" (main) Rounded Items""""""""*/
#qm0 .qmritem span
{
border-color:#666666;
background-color:#EEEEEE;
}
/*"""""""" (main) Rounded Items Content""""""""*/
#qm0 .qmritemcontent
{
padding:0px 0px 0px 4px;
}
/*"""""""" (sub) Rounded Items""""""""*/
#qm0 div .qmritem span
{
border-color:#666666;
background-color:#EEEEEE;
}
/*"""""""" (sub) Rounded Items Content""""""""*/
#qm0 div .qmritemcontent
{
padding:0px 0px 0px 4px;
}
</style>
</head>
<body>
<div id="menue"><div id="hoverschutz">
<div><div>
<span>
<ul id="qm0" class="qmmc">
<li><a class="qmparent" href="javascript:void(0);">Main Navi</a>
<ul style="width:122px;">
<li><a href="javascript:void(0);">News</a></li>
<li><a href="javascript:void(0);">News Archiv</a></li>
<li><a href="javascript:void(0);">Kalender</a></li>
<li><a href="javascript:void(0);">FAQ</a></li>
</ul></li>
<li><a class="qmparent" href="javascript:void(0);">Clan Navi</a>
<ul style="width:122px;">
<li><a href="javascript:void(0);">Member</a></li>
<li><a href="javascript:void(0);">Squads</a></li>
<li><a href="javascript:void(0);">Clanwar</a></li>
<li><a href="javascript:void(0);">Geschichte</a></li>
<li><a href="javascript:void(0);">Über Uns</a></li>
<li><a href="javascript:void(0);">Game Server</a></li>
<li><a href="javascript:void(0);">Voice Server</a></li>
</ul></li>
<li><a class="qmparent" href="javascript:void(0);">Misc Navi</a>
<ul style="width:122px;">
<li><a href="javascript:void(0);">Link US</a></li>
<li><a href="javascript:void(0);">Fight US</a></li>
<li><a href="javascript:void(0);">Join US</a></li>
<li><a href="javascript:void(0);">Impressum</a></li>
</ul></li>
<li><a class="qmparent" href="javascript:void(0);">Community</a>
<ul style="width:122px;">
<li><a href="javascript:void(0);">Forum</a></li>
<li><a href="javascript:void(0);">Gästebuch</a></li>
<li><a href="javascript:void(0);">Kontakt</a></li>
<li><a href="javascript:void(0);">Umfragen</a></li>
<li><a href="javascript:void(0);">Gallerie</a></li>
<li><a href="javascript:void(0);">Downloads</a></li>
</ul></li>
<li class="qmclear"> </li></ul>
<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click (options: 'all' * 'all-always-open' * 'main' * 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,true,0,500,false,false,false,false,false);</script>
</span>
<div><img src="Winter.jpg" alt="" border="0" width="200" height="123"></div>
</div></div></div>
</div></body>
</html>
ich möchte das die 2te ebende über der ersten bleibt, so das man den rechten border der 1 ebene nicht mehr sieht ...
gruss
seema