Hallo,
Wie oben schon erwähnt schaffe ich es nicht das das Drop-Down Menü meiner Website im IE ausklappt bzw. auf das ausgeklappte Menü mit dem Cursor zu kommen. Ich lade hier einfach mal nur das Drop-Down Menü hoch … Vielleicht kann mir ja jemand weiterhelfen … Wäre toll denn das verzweifelt mich langsam schon ;D
[ATTACH]2391.vB[/ATTACH]
Vlt. zeigst Du uns direkt den Quellcode hier? Denn ich bezweifle, dass sich jemand deine Datei runterladen wird - wer weiß was da drinne ist
system
3. Januar 2012 um 14:37
3
Bitte stelle den Code hier rein. Keiner der dich nicht kennt wird einfach etwas herunterladen, von dem er nicht weiss was drin ist.
Welche IE Version?
Meine style.css:
#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.3em;
font-weight: bold;
text-align: center;
background-color: #dec79a ;
color: #513913 ;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e ;
}
#menue .aussen:hover {
height: auto;
background-color: #624617 ;
color: #fff ;
}
a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d ;
background-color: #ecd8ae ;
color: #600 ;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae ;
color:#555 ;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb ;
color: #900 ;
}
span.menutag {
display: block;
cursor: default;
[I]}
[/I]Meine styleIE.css:
#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
height:100px;
}
a.auss {
float: left;
width: 128px;
height: 43px;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #dec79a ;
color: #513913 ;
border-right: 1px solid;
border-color: darkgray;
}
a:hover.auss {
overflow: visible;
background-color: red;
color: #fff ;
height:43px;
}
a:hover.auss table {
display: block;
margin: 0px;
background-color: green;
color: blue;
height:auto;
overflow:visible;
}
a.inn {
display: block;
margin: 0px;
background-color: green;
color: blue;
height:auto;
overflow:visible;
}
a:visited.inn {
background-color: #ecd8ae ;
color:#444 ;
overflow:visible;
}
a:hover.inn {
position: relative;
background-color: #f7eedb ;
color: #900 ;
overflow:visible;
float:left;
}
span.menutag {
display: block;
cursor: default;
height:43px;
overflow:visible;
}
Und schlussendlich meine test2.htm:
test2.htm
Obwohl das ganze jetzt sowieso nur im IE funktioniert lade ich trotzdem alle Dateien hoch die damit zusammenhängen …
Ich verwende den IE 8, Google Chrome und FireFox 7 …
system
3. Januar 2012 um 16:27
6
Hallo,
du bekommst von mir jetzt den HTML-Code in geänderter Fassung und das zugehörige CSS. Beides zusammen funktioniert in allen Browsern die neuer sind als IE 6.
Ich will dir aber noch mitgeben, dass du dich mit den Grundlagen beschäftigen musst. Du hast nämlich schon falsch angefangen. Man erstellt erst ein Seitenlayout und darin kommt dann das Menü. Layouts findest du hier: The Left Menu 2 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns.
Nichts desto trotz habe ich dir da Menü mal in die Seite gebaut.
HTML Code
[HTML]
test2.htm
[/HTML]
CSS Code bei dir style.css
[HTML]
/* CSS für das Menü */
.menu_container {
margin: 0 auto 300px auto;
position: relative;
width: 750px;
height: 25px;
z-index: 100;
}
.menu, .menu ul {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
}
.menu ul {
left: -9999px;
width: 150px;
padding: 0 20px 20px 20px;
}
.menu ul ul {
padding: 20px 20px 20px 0;
}
.menu a {
display: block;
width: 139px;
padding-left: 10px;
text-align: center;
font: normal bold 1em/25px arial, sans-serif;
color: #fff ;
text-decoration: none;
border: 1px solid #d0843e ;
margin: 0 -1px -1px 0;
background-color: #dec79a ;
color: #513913 ;
}
.menu li ul a {
font-weight: normal;
}
.menu li {
float: left;
}
.menu li:hover {
position: relative;
z-index: 100;
}
.menu li:hover > a {
background-color: #624617 ;
color: #fff ;
border-color: #fc0 ;
}
.menu li:hover > ul {
top: 26px;
left: -20px;
z-index: -1;
}
.menu li:hover li:hover > ul {
left: 145px;
top: -20px;
z-index: 100;
}
.menu li.right:hover li:hover > ul {
left: -165px;
top: -20px;
z-index: 100;
padding: 20px 0 20px 20px;
}
[/HTML]
Vielen, vielen, vielen, vielen, … Dank ;D … Das Problem waren nicht die Grundlagen sondern das ich auf der Seite schon so viel herumgebastelt habe, dass ich mich einfach irgendwann nicht mehr auskannte … ^^
PS: Habe bereits ein Seitenlayout aber wegen des Problems mit dem IE wollte ich mich dann extra damit beschäftigen und habe mir deshalb diesen Ausschnitt herausgeholt …
MfG Chris