<ul><li> dropdown Menü Problem

  • geschlossen
  • HTML & CSS

  • jazzman
  • 5537 Aufrufe 7 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • &lt;ul&gt;&lt;li&gt; dropdown Menü Problem

    Moin,

    hab da ein Problem mit einem Dropdown Menü. Vielleicht kann mir wer den Fehler zeigen, sitze schon Stunden dran aber finde ihn nicht

    HTML-Quellcode

    1. <div id="full"><div id="nav">
    3. <p><ul><li><a href="#" title="Triesterstraße">Triesterstraße</a></li></p>
    4. <p><li><a href="#" title="Lageplan">Lageplan</a></li></p>
    5. <p><li><a href="#" title="Standort">Standort</a></li></p>
    6. <p><li><a href="#" title="Objektbeschreibung">Objektbeschreibung</a></li></p>
    7. <p><li><a href="#" title="Ausstattung">Ausstattung</a></li></p>
    8. <p><li><a href="#" title="Fotogallerie">Fotogallerie</a></li></p>
    9. <p><li><a href="#" title="Pläne">Gebäudepläne</a></p>
    10. <p><ul><li><a href="#" title="Kellergeschoss">Kellergeschoss</a></li></p>
    11. <p><li><a href="#" title="Erdgeschoss">Erdgeschoss</a></li></p>
    12. <p><li><a href="#" title="1. Obergeschoss">1. Obergeschoss</a></li></p>
    13. <p><li><a href="#" title="2. Obergeschoss">2. Obergeschoss</a></li></p>
    14. <p><li><a href="#" title="3. Obergeschoss">3. Obergeschoss</a></ul></li>
    15. </ul></li></div>
    Alles anzeigen


    Quellcode

    1. #full {position:relative; width:960px; left:0; z-index:2; margin:20px auto 0 auto; overflow:auto;}
    2. #nav {float:left; position:fixed;}
    4. #nav a#logo {padding:0 0 20px 0; height:100px; width:300px; display:block;}
    5. #nav ul {list-style:none;}
    6. #nav ul li {list-style:none;}
    7. #nav ul li a {color:#fff; font-size:16px; font-weight:bold; text-decoration:none;}
    8. #nav ul li ul {display:none;}
    9. #nav ul li ul li {padding:6px 0 2px 10px;}
    10. #nav ul li ul li.active a, #nav ul li a:hover {color:#ffcc00;}
    11. #nav ul li ul li a{font-weight:bold; font-size:15px;}
    12. #nav ul li.active ul {display:block;}
    13. #nav ul li {padding:0 0 8px 0;}
    Alles anzeigen


    Wenn man auf Gebäudepläne klickt, sollen sich die unteren Links aufklappen

  • Äh,

    wo ist denn dein Script zum auslösen des Dropdown Menüs?
    Entweder du nimmst jquer,
    oder du musst das Gebäude li Element beim pseudo-element :hover display:block; zuweisen.

    Anders wird es nichts!
    Bevorzugte: puck8, Big Dunker, t0b1, CrYstaLX, Kriss Kross, Tiger22, Abu N.

  • jquery ist vorhanden

    Quellcode

    1. <script src="gfx/jquery.js" type="text/javascript"></script>


    Ich bin gerade beim lernen von CSS. Hoffe der Rest kann nützlich sein.

    Quellcode

    1. #content #startlink {top:0; right:0; display:block; height:60px; text-indent:-10000px; width:200px; position:absolute;}
    2. #content #start {position:absolute; bottom:5px; left:23px}
    3. #content #start h1 {color:#fff !important; font-size:17px; text-align:0;}
    4. #content #start p {color:#fff !important; padding-right:55px; font-size:13px;}
    7. #content.start {background:none!important; position:relative;}
    8. #content {background:url(../gfx/bg_content.png) repeat; width:700px; float:right; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin:0 0 80px 0;}
    9. #content div#inner {padding:20px 20px 20px 20px;}
    10. #content h1 {font-size:30px; color:#006666; font-weight:bold; text-align:center; clear:both; padding:0 0 10px 0;}
    11. #content h2 {font-size:18px; color:#006666; padding:0 0 0 0;}
    12. #content h3 {font-size:13px; color:#000000; font-weight:normal;}
    13. #content p {padding:5px 0 15px 0; line-height:18px;}
    14. #content a {color:#960056; text-decoration:none;}
    15. #content a:hover {text-decoration:underline;}
    16. #content .col1, #content .col2 {padding:10px 0 0 0; float:left; width:50%;}
    17. #content table {padding:0;}
    18. #content table td {padding:0; border-bottom:0px dashed #960056;}
    19. #content ul {padding:0 0 0 15px;}
    20. #content li {padding:3px 0;}
    21. #content iframe {margin:0 0 10px 0;}
    Alles anzeigen

  • Ja,
    das die Jquery Bibliothek eingebunden ist sehe ich.

    Du musst aber schon eine Funktion schreiben, die den gewünschten DropDown Effect hervorruft.

    Schau dir doch einfach mal meinen Link an und pass diesen auf deinen Code hin an!

    Hier,

    ich hatte grad 5 Min.:

    Edit this Fiddle - jsFiddle
    Bevorzugte: puck8, Big Dunker, t0b1, CrYstaLX, Kriss Kross, Tiger22, Abu N.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Broken Sword () aus folgendem Grund: Doppelpost =&gt; Regeln lesn!