Autor |
Nachricht |
seestern78
Threadersteller
Dabei seit: 05.10.2007
Ort: Wien
Alter: -
Geschlecht: -
|
Verfasst Di 02.09.2008 19:03
Titel Problem CSS Menü ausklappen |
|
|
Hallo!
Ich habe hier den Code für eine horizontale textbasierte css navigation mit Ausklappmenü eingefügt. Die einzelnen links des Ausklappmenüs klappen sich vertikal untereinander auf.
Nun zu meiner Frage: Was muss ich im Quelltext ändern, damit sich die Links des Ausklappmenüs nicht untereinander sondern nebeneinander (horizontal) öffnen??
Habe jetzt schon ziemlich lange herumprobiert, aber es will einfach nicht klappen.
Grüße
Maria
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" lang="en">
<head>
<title>Navigation</title>
<style type="text/css" media="screen">
body { font-size:90%; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; margin:0; padding:0; }
/*###################*/
/* Beginn Navigation */
/*###################*/
#navi, #navi ul { list-style-type:none; margin:0; padding:0; } /* Style-Reset */
#navi li { width:128px; float:left; } /* Horizontale Anordnung */
#navi li ul { display:none; } /* Normalzustand eingeklappt */
#navi li:hover ul { display:inline;} /* Ausgeklappt */
/*###################*/
/* Styles fuers Auge */
/*###################*/
#navi { position:absolute; }
#navi li { border:none; margin:0 32px 0 0; }
#navi ul li { border:none; margin:0; }
#navi a { font-weight:bold; text-align:center; display:inline; padding:0.1em; }
#navi a:link, #navi a:visited { color:red; text-decoration:none; }
#navi a:active, #navi a:hover { color:#000; background:#FFF; text-decoration:none; }
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen">#navi { behavior:url("csshover.htc"); }</style>
<![endif]-->
</head>
<body>
<ul id="navi">
<li><a href="#">Willkommen</a></li>
<li><a href="#">Über uns</a>
<ul>
<li><a href="#">Angebot</a></li>
<li><a href="#">Geschichte</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</li>
<li><a href="#">Projekte</a>
<ul>
<li><a href="#">Alpha</a></li>
<li><a href="#">Beta</a></li>
<li><a href="#">Gamma</a></li>
</ul>
</li>
<li><a href="#">Impressum</a></li>
</ul>
</div>
</body>
</html> |
|
|
|
|
|
Benutzer 80255
Account gelöscht
Ort: -
|
Verfasst Di 02.09.2008 19:07
Titel
|
|
|
hallo, versuch mal
Code: | #navi ul li ul li { border:none; margin:0; float:left;} |
Zuletzt bearbeitet von am Di 02.09.2008 19:07, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
seestern78
Threadersteller
Dabei seit: 05.10.2007
Ort: Wien
Alter: -
Geschlecht: -
|
Verfasst Di 02.09.2008 19:12
Titel
|
|
|
hallo!
danke für die Antwort! Habs probiert-hat sich aber nichts getan!
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Di 02.09.2008 19:41
Titel
|
|
|
du mußt dem umschließenden ul feste dimensionen zuweisen, sonst ist es nur so breit wie sein längster eintrag.
demnach sowas wie:
Code: |
#navi li:hover ul { display:block; width: 1000px; height: 100px;} /* Ausgeklappt */ |
dazu den listenpunkten einfach ein display: inline, dann stehen sie auch nebeneinander:
Code: | #navi li:hover ul { display:block; width: 1000px; height: 100px;} /* Ausgeklappt */
#navi li:hover ul li { display: inline; } /* Ausgeklappt */ |
Zuletzt bearbeitet von sahnemuh am Di 02.09.2008 19:43, insgesamt 1-mal bearbeitet
|
|
|
|
|
seestern78
Threadersteller
Dabei seit: 05.10.2007
Ort: Wien
Alter: -
Geschlecht: -
|
Verfasst Di 02.09.2008 19:47
Titel
|
|
|
Vielen Dank!
Jetzt hat es geklappt!
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS Menü ausklappen Vertikal
[CSS] Menü nach oben ausklappen
CSS Dropdown Menü nach oben ausklappen
CSS MEnü Problem
Problem mit JS/CSS-Menü
JS Menü Problem
|
|