mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 02:40 Benutzername: Passwort: Auto-Login

Thema: Problem CSS Menü ausklappen vom 02.09.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Problem CSS Menü ausklappen
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

Antworten mit Zitat Zum Seitenanfang

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="#">&Uuml;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>
  View user's profile Private Nachricht senden
Benutzer 80255
Account gelöscht


Ort: -

Verfasst Di 02.09.2008 19:07
Titel

Antworten mit Zitat Zum Seitenanfang

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
Anzeige
seestern78
Threadersteller

Dabei seit: 05.10.2007
Ort: Wien
Alter: -
Geschlecht: -
Verfasst Di 02.09.2008 19:12
Titel

Antworten mit Zitat Zum Seitenanfang

hallo!

danke für die Antwort! Habs probiert-hat sich aber nichts getan!
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Di 02.09.2008 19:41
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
seestern78
Threadersteller

Dabei seit: 05.10.2007
Ort: Wien
Alter: -
Geschlecht: -
Verfasst Di 02.09.2008 19:47
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen Dank!

Jetzt hat es geklappt!
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.