css Menüproblem im NS7

marysol · #1 (**permalink**) 23.07.2006, 15:42

Hallo,

habe gemäß dem folgenden Beispiel von
http://www.cssplay.co.uk/menus/final_drop.html

das Menü gemäß meinen Bedürfnissen etwas umgebaut.
Im Firefox ist alles 100% korrekt.
Im IE 6 ist die 1.Ebene verschoben.

Im NS 7 flutscht beim hovern die 2.Ebene nach oben.

Hat jemand eine Idee was da los ist?
Im Original ist übrigens das gleiche Problem.

Noch ne Frage.
Habe gesehen, daß es die ein oder andere Software gibt mit der
man solche Menüs herstellen kann.
Die sind nur alle in English.
Gibt es da auch was in Deutsch?

Gruß
Thomas

Hier der CSS Code:

/* common styling */
.menu {
font-family: tahoma, verdana, arial, sans-serif;
width:720px;
position:relative;
font-size:11px;
padding-bottom:350px;
z-index:100;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:130px; /*Breite der HauptlinkButtons */
height:22px;
color:#000;
margin:0 1px 1px 0;
border-top:0;
border-bottom:8px solid #888;
border-right:0;
border-left:0;
background:#dfc184;
padding-left:10px;
line-height:1.5em; /* Gesamthöhe der inneren Links */
}
* html .menu ul li a, .menu ul li a:visited {
width:130px;
w\idth:130px;
}

.menu ul li ul {
display: none;
}
table {
margin:-1px;
border-collapse:collapse;
font-size:11px;
}

/* specific to non IE browsers */
.menu ul li:hover a,
.menu ul li a:hover {
color:#fff;
background:#bd8d5e;
}

.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;
position:absolute;
top:31px; /Abstand der Dropdownliste von der Hauptlinkliste*/
left:0;
width:130px;
}
* html .menu ul li a:hover ul {
margin-top:0;
marg\in-top:0px;
}

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;
}

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block;
background:#faeec7;
color:#000;
height:auto;
line-height:1.2em;
padding:5px 10px;
width:120px; /* Breite der Dropdownliste 1.Ebende */
border-bottom:0px;
}
* html .menu ul li a:hover ul li a {
width:120px;
w\idth:120px;
}

.menu ul li:hover ul li a.drop,
.menu ul li a:hover ul li a.drop {
background:#c9c9a7 url(menu_flyout.gif) bottom right no-repeat;
}

.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#c9c9a7;
color:#000;
}

.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
left:141px; /*Abstand der 2.Ebene zu 1.Ebene*/
top:0px;
width:120px;
}

.menu ul li:hover ul li:hover ul.left,
.menu ul li a:hover ul li a:hover ul.left {
left:-141px;
}

Hier der HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>DEMOS</title>
<link rel="stylesheet" type="text/css" href="final_drop.css">

</head>

<body>

<div class="menu">

<ul>
<li><a class="drop" href="#">STARTSEITE

</a>


<table><tr><td>

<ul>
<li><a href="#" title="">zero dollars advertising page</a></li>
<li><a href="#" title="">wrapping text around images</a></li>
<li><a href="#" title="">styled form</a></li>
<li><a href="#" title="">active focus</a></li>

<li><a class="drop" href="#" title="#">hover/click with no borders

</a>


<table><tr><td>
<ul>
<li><a href="#" title="">styled form</a></li>
<li><a href="#" title="">removing active/focus borders</a></li>
<li><a href="#" title="">hover/click</a></li>
</ul>
</td></tr></table>



</li>

<li class="upone"><a href="#" title="#">shadow boxing</a></li>
<li><a href="#" title="#">image map for detailed information</a></li>
<li><a href="#" title="#">fun with background images</a></li>
<li><a href="#" title="#">fade scrolling</a></li>
<li><a href="#" title="#">em image sizes compared</a></li>
</ul>

</td></tr></table>



</li>

<li><a href="#">UNTERNEHMEN

</a>


<table><tr><td>

<ul>
<li><a href="#" title="">a coded list of spies</a></li>
<li><a href="#" title="">vertical menu</a></li>
<li><a href="#" title="">enlarging unordered list</a></li>
<li><a href="#" title="">link images</a></li>
<li><a href="#" title="">non-rectangular</a></li>
<li><a href="#" title="">jigsaw links</a></li>
<li><a href="#" title="">circular links</a></li>
</ul>

</td></tr></table>



</li>

<li><a href="../mozilla/index.html">PRODUKTE

</a>


<table><tr><td>

<ul>
<li><a href="#" title="">drop down menu</a></li>
<li><a href="#" title="">cascading menu</a></li>
<li><a href="#" title="">content:</a></li>
<li><a href="#" title="">mozzie box</a></li>
<li><a href="#" title="">I can build a rainbow with transparent borders</a></li>
<li><a href="#" title="">a snooker cue using border art</a></li>
<li><a href="#" title="">target practise</a></li>
<li><a href="#" title="">two tone headings</a></li>
<li><a href="#" title="">shadow text</a></li>
</ul>

</td></tr></table>



</li>

<li><a href="#">NEWS

</a>


<table><tr><td>

<ul>
<li><a href="#" title="">the first example for Internet Explorer</a></li>
<li><a href="#" title="">weft fonts</a></li>
<li><a href="#" title="">vertically aligning text</a></li>
</ul>

</td></tr></table>



</li>

<li><a href="#">KONTAKT

</a>


<table><tr><td>

<ul>
<li><a href="#" title="">a colour wheel using opaque colours</a></li>
<li><a href="#" title="">a menu using opacity</a></li>
<li><a href="#" title="">partial opacity</a></li>
<li><a href="#" title="">partial opacity II</a></li>

<li><a class="drop" href="#" title="">HOVER/CLICK

</a>


<table><tr><td>

<ul class="left">
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>

</td></tr></table>



</li>
</ul>

</td></tr></table>



</li>
</ul>

</div>

</body>

</html>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 13:25
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 17:09
MYspace mehr als nur CSS oder ?	Vinceone	CSS	0	12.07.2007 03:21
Eric Meyer's CSS	Petty	Ressourcen	0	21.11.2005 09:18
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 12:39