zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Menü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.09.2008, 21:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2008
Beiträge: 12
seema befindet sich auf einem aufstrebenden Ast
Standard CSS Menü

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><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><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><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><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">&nbsp;</li></ul>

<!-- 
Create Menu Settings: (Menu IDIs VerticalShow TimerHide TimerOn Click (options'all' 'all-always-open' 'main' 'lev2'), Right to LeftHorizontal SubsFlush LeftFlush 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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit CSS Dropline menü horst77 CSS 1 12.08.2009 12:49
herunterfahrendes Menü mit CSS Pablo CSS 1 27.12.2007 18:07
CSS Menü - Buttonfrage Ralgar CSS 6 01.12.2006 18:14
Mysteriöses in CSS Dropdown Menü ph!L CSS 3 21.07.2006 13:31
Menü mit CSS aber mit JS Animation? xy2er CSS 6 20.03.2005 21:47


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:36 Uhr.