Autor |
Nachricht |
paddyuboot
Threadersteller
Dabei seit: 11.08.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 22.10.2010 17:36
Titel Problem mit Css Dropdownmenü |
|
|
Hallo, ich habe eine Frage bezüglich eines Dropdown Menüs, welches ich soeben erstellt habe. Das Menü funktioniert soweit, das heißt links, sowie der erste unterlink funktionieren. Ab dem dritten unterpunkt jedoch klappt das Menü wieder zu, weiß jemand, woran das liegen könnte :S ? Wäre echt nett, wenn ihr mir helft!
Hier die Codes:
Html Code:
Code: | <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4U @work</title>
<link rel="stylesheet" type="text/css" href="styles.css"/><style type="text/css">body {
background-color: #DE002E;
}
</style></head>
<body>
<div id="wrapper">
<div id="head">
</div>
<div id="navi">
<div id="navirahmen">
<div id="navmenu">
<ul>
<li><a href="index.html">Home</a></li>
</ul>
<ul>
<li><a href="unternehmen.html">Das Unternehmen</a>
<ul>
<li><a href="team.html">Das Team</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="service.html">Unser Service</a>
<ul>
<li><a href="qualitaet.html">Qualität</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="work4u.html">Jobbörse</a></li>
</li>
</ul>
<ul>
<li><a href="4unet.html">Intranet</a></li>
</li>
</ul>
<br class="clearfloat"/>
</div>
</div>
</div>
<div id="content">
<div id="inhalt">
<h2>Das Unternehmen</h2>
<br />
<br />
4U @work GmbH ... time to do!
<br />
<br />
Unser Unternehmensmotto setzen wir aktiv auf allen Unternehmensebenen in die Tat um!
<br />
<br />
Als bundesweit agierendes Unternehmen haben wir die Vorzüge von gut funktionierender Partnerschaft und die Effizienz von personellen Netzwerklösungen in Unternehmen kennen gelernt.
<br />
<br />
4U @work GmbH der starke Partner an Ihrer Seite. Unsere langjährige Erfahrung als Dienstleister des Handels bringt Ihnen Flexibilität und Ersparnis. Egal wo Sie Personal brauchen, wir sind für Sie da! Unser Serviceangebot wird Sie überzeugen!
<br />
<br />
Auch bei Ihren ganz speziellen Anforderungen ist 4U @work GmbH Ihr kompetenter Partner für Lösungen rund um den Handel!
<br />
<br />
<b>... testen Sie uns!</b>
</div>
<div id="foto">
<img src="images/foto.jpg" />
</div>
</div>
</div>
</body>
</html> |
und hier der Css Code:
Code: | @charset "utf-8";
/* CSS Document */
#links a:link {color:#FFFFFF;text-decoration: none;font-size:13px;}
#links a:visited {color:#FFFFFF;text-decoration: none;font-size:13px;}
#links a:hover {color:#FFFFFF;text-decoration: none;font-weight: bold;font-size:13px;}
#links a:active {color:#FFFFFF;text-decoration: none;font-weight: boldfont-size:13px;}
body{
background-image:url(images/bg.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background-repeat:repeat-x;
}
#wrapper {
top: 40px;
left: 25%;
height: 727px;
width:768px;
margin:20px auto;
}
#head {
background-image:url(images/head.jpg);
height:140px;
width:768px;
}
#navi {
background-image:url(images/navi.png);
height:55px;
width:764px;
}
#navirahmen
{
padding-top:24px;
padding-left:29%;
}
#navmenu {
margin:0;
padding:0;
}
#navmenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navmenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-image:url(images/buttonbg.png);
}
#navmenu ul li a {
text-align:center;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
height:30px;
width:100px;
display:block;
color:#FFFFFF;
border:1px solid;
}
#navmenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navmenu ul li:hover ul {
visibility:visible;
}
#navmenu li:hover {
background-color:#FF0000;
}
#content {
background-image:url(images/content.png);
height:511px;
width:764px;
margin-top:0px;
}
#inhalt {
position:absolute;
float:left;
width:350px;
height:465px;
margin-top:20px;
margin-left:45px;
overflow:auto;
}
#foto {
position:absolute;
float:left;
width:300px;
height:200px;
margin-top:32px;
margin-left:430px;
}
|
Wäre echt super, wenn mir jemand helfen könnte, habe schon alles probiert, komme aber iwie nich drauf
Danke !
[Bitte CODE-Tags verwenden]
Zuletzt bearbeitet von Kash am Fr 22.10.2010 19:12, insgesamt 2-mal bearbeitet
|
|
|
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Fr 22.10.2010 17:45
Titel
|
|
|
Kannst Du mal die Code Tags richtig setzen? Und welches 3te Untermenü ??
Tip! Display statt Visibility nutzen
|
|
|
|
|
Anzeige
|
|
|
paddyuboot
Threadersteller
Dabei seit: 11.08.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 22.10.2010 17:54
Titel
|
|
|
Sorry war ein Versehen !
Also
z.B.
Das Unternehmen
-Das Team
-Unser Service
Sobald ich auf Unser service gehe, klappt das Menü wieder ein, also das was quasi rausgedropt wird.
nachtrag: display geht nicht ...
Zuletzt bearbeitet von paddyuboot am Fr 22.10.2010 17:56, insgesamt 1-mal bearbeitet
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Fr 22.10.2010 19:06
Titel
|
|
|
An dem Punkt, an dem das Menü wieder zuklappt, beginnt #inhalt, das wegen pos. abs. und seiner späteren Position im Quelltext über der DD-Navi liegt. Abhilfe schafft z.B. z-index: 1; für #navmenu li, dann behält es die Oberhand.
Übrigens ist Deine Konstruktion nicht sonderlich gut - wieso eine eigene ul für jeden Menüpunkt? Es sollte nur eine Haupt-ul geben. Und vert. Zentrierung per line-height taugt nichts, denn dann reagiert der Text viel zu empfindlich auf Textzoom und er läuft schnell über, inkl. riesiger Zeilenabstände. Zoome den Text mal zweimal im FX, dann siehst Du die Katastrophe
Grundregel: line-height bei Menüs immer eher gering halten (z.B. 1.2) und per padding vert. zentrieren, und am besten eh ohne feste Höhe.
|
|
|
|
|
paddyuboot
Threadersteller
Dabei seit: 11.08.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 22.10.2010 19:12
Titel
|
|
|
DANKE!!!!
Also das mit z-index funktioniert schonmal. Ehrlich gesagt weiß ich nicht wieso es für jeden menüpunkt eine ul gibt, da ichs mithilfe eines tutorials bei youtube gemacht hab *Schäm* (also nur das menü!). Wie genau meinst du das?
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Fr 22.10.2010 19:30
Titel Re: Problem mit Css Dropdownmenü |
|
|
Wenn Du das rote rauswirfst, bleibt nur eine Haupt-ul übrig.
Zitat: | <ul>
<li><a href="index.html">Home</a></li>
</ul>
<ul>
<li><a href="unternehmen.html">Das Unternehmen</a>
<ul>
<li><a href="team.html">Das Team</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</li>
</ul>
usw. |
|
|
|
|
|
paddyuboot
Threadersteller
Dabei seit: 11.08.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 22.10.2010 19:34
Titel
|
|
|
stimmt, war irgendwie allein von der logik her total überflüssig ^^ . Vielen Dank, echt du hast mir sehr geholfen !!
|
|
|
|
|
paddyuboot
Threadersteller
Dabei seit: 11.08.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 01.12.2010 20:31
Titel
|
|
|
Hi,
wie ich eben gesehen habe, gibt es mit meinem Menü ein weiteres Problem. Und zwar spackt der Ie6 total ab, sobald man die Seite öffnet, weiß da einer Abhilfe, bzw worans liegen könnte? Hab schon einiges ausprobiert, leider ohne ERfolg
|
|
|
|
|
|
|
|
Ähnliche Themen |
Dropdownmenü für Downloadauswahl
Konflitkt mit CSS Dropdownmenü
DropdownMenü und Verlinkung
horizontales dropdownmenü verändern
Exell-> Dropdownmenü/Pulldownmenü ???
dropdownmenü per css spinnt! [solved]
|
|