Ergebnis 1 bis 9 von 9

Thema: Horizontales Dropdown menu

  1. #1
    HTML Newbie
    Registriert seit
    10.03.2018
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Horizontales Dropdown menu

    Hallo
    Ich habe ein Horizontales Dropdown Menu erstellt und möchte, dass die Untermenüs beim Darüberfahren der Maus aufklappen.
    Das klappt nicht ganz. Die 2. Ebene (Untermenu) klappt erst auf, wenn ich auf die 1. Menuebene klicke, also wenn es aktiv ist.
    Meine Homepage ist leider noch nicht aufgeschaltet, es sollte aber so aussehen: http://proverzasca.ch/it/

    Hier die CSS der Navigation:

    #navigation { width: 1000px; height:55px; background-color: #4c4c4c; }

    #nav { float: left; width: 100%; font-size: 20px; }
    #nav ul { margin: 0; padding: 0; }

    #nav a { display: block; color: #fff; text-decoration: none;}
    #nav ul li { position: relative; float: left; list-style: none; }
    #nav ul li ul{ display:none; }

    #nav ul li:hover { background: #7aaba0; }

    #nav ul li a { padding: 20px 50px 10px 30px; }
    #nav ul ul { position: absolute; background: #4c4c4c; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); }

    #nav ul ul li { float: none; width: 200px; border-bottom: 1px solid #fff; }

    #nav ul ul li a { padding: 10px 20px; font-size:16px;}
    #nav ul li:hover > ul { top: 100%; left: 0; display: block; z-index:1;}
    #nav ul ul li:hover > ul { top: 0; left: 200px; }

    #nav ul li.submenu > a:after { position: relative; float: right; content: '';
    margin-left: 10px; margin-top: 5px; border-left: 5px solid transparent;
    border-right: 5px solid transparent; border-top: 5px solid #fff; border-bottom: 5px solid transparent; }

    #nav ul ul li.submenu a:after { margin-left: auto; margin-right: -10px;
    border-left: 5px solid #fff; border-right: 5px solid transparent;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

    #nav ul ul li:last-child { border-bottom: none; }

    Was habe ich falsch gemacht.
    Vielen Dank für eure Hilfe
    Chantal
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Teeny
    Registriert seit
    23.01.2018
    Beiträge
    48
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Horizontales Dropdown menu

    hast du auch ein html teil dafür?

  3. #3
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.211
    Danke
    15
    Bekam 69 mal "Danke" in 67 Postings

    Standard AW: Horizontales Dropdown menu

    Naja, der Link zum Schrott steht oben drin.
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  4. #4
    Teeny
    Registriert seit
    23.01.2018
    Beiträge
    48
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Horizontales Dropdown menu

    Habe mal html dazu gebaut
    https://codepen.io/basti1012/pen/ZxYgLa

    Läuft das so wie es soll?

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    10.03.2018
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Horizontales Dropdown menu

    Ja dein Code läuft so wie ich es möchte. Ich denke etwas anderes in der CSS blokiert das Hover bei mir. DIe Homepage (Schrott) von oben http://proverzasca.ch/it/ wurde mit Wordpress gemacht und ich baue das ganze mit Joomla um.
    Wenn du Zeit hast, hier wäre der ganze Code.

    Index.php

    <?php

    defined('_JEXEC') or die;

    /* The following line loads the MooTools JavaScript Library */
    JHtml::_('behavior.framework', true);

    /* The following line gets the application object for things like displaying the site name */
    $app = JFactory::getApplication();
    ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="<?php echo $this->language; ?>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/print.css" type="text/css" media="Print" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template1.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/shop.css" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    </head>
    <body>
    <!-- start #container -->
    <div id="container">
    <!-- start #header -->
    <div id="header">
    <jdoc:include type="modules" name="email" style="xhtml" />
    </div>
    <!-- end #header -->
    <!-- start #navigation -->
    <div id="navigation">
    <!-- start #nav -->
    <div id="nav">
    <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
    <!--end #nav -->
    </div>
    <!--end #navigation -->
    <!-- start #main -->
    <div id="main">
    <!-- start #left -->
    <div id="left">
    <jdoc:include type="message" />
    <jdoc:include type="modules" name="debug" />
    <jdoc:include type="component" />
    </div>
    <!-- end #left -->
    <!-- start #right -->
    <div id="right">
    <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
    <!-- end #right -->
    </div>
    <!-- end #main -->
    <!-- start #footer -->
    <div id="footer">
    &copy; <?php echo date('Y'); ?> <?php echo $app->getCfg('sitename'); ?>
    </div>
    <!-- end #footer -->
    </div>
    <!-- end #container -->
    </body>
    </html>

    template1.css
    html { height:100.1%; }
    body { font-size: 16px; font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #697075; }
    a { outline:none; }
    a:link { color: #000000; text-decoration: underline; }
    a:visited { text-decoration: none; color: #000000; }
    a:hover, a:active, a:focus { text-decoration: underline; color: #7aaba0; }

    #container { width: 1000px; text-align: left;margin:20px auto; background-color: #fff; border: 2px solid #000000; }

    #header { height:150px; background: url(../images/bg/oben.jpg); background-repeat: no-repeat; }

    #navigation { width: 1000px; height:55px; background-color: #4c4c4c; }

    #nav { float: left; width: 100%; font-size: 20px; }
    #nav ul { margin: 0; padding: 0; }
    #nav a { display: block; color: #fff; text-decoration: none;}
    #nav ul li { position: relative; float: left; list-style: none; }
    #nav ul li ul{ display:none; }
    #nav ul li:hover { background: #7aaba0; }
    #nav ul li a { padding: 20px 50px 10px 30px; }
    #nav ul ul { position: absolute; background: #4c4c4c; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); }
    #nav ul ul li { float: none; width: 200px; border-bottom: 1px solid #fff; }
    #nav ul ul li a { padding: 10px 20px; font-size:16px;}
    #nav ul li:hover > ul { top: 100%; left: 0; display: block; z-index:1;}
    #nav ul ul li:last-child { border-bottom: none; }

    #main { min-height: 450px; height: auto !important; height: 450px; padding: 20px 0 20px 0;
    background: #fff; }

    #left { padding: 10px 20px 30px; float:left;width:700px;border-right: 1px solid black;}

    #right { width: 200px; float:left; background: #fff; padding:10px; }

    #footer { padding: 10px; background: #424242; position: relative; clear: both; text-align: center; color: #a8a8a8;border-color:1px solid #39668A; }

    Vielen Dank für deine Hilfe
    Chantal

  6. #6
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    475
    Danke
    0
    Bekam 52 mal "Danke" in 52 Postings

    Standard AW: Horizontales Dropdown menu

    Warum bleibst du nicht bei WP? WP lässt sich auch als CMS nutzen.

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    10.03.2018
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Horizontales Dropdown menu

    Weil ich mich mit Joomla besser auskenne.
    Findet denn niemand den Fehler?
    Danke

  8. #8
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    475
    Danke
    0
    Bekam 52 mal "Danke" in 52 Postings

    Standard AW: Horizontales Dropdown menu

    Zitat Zitat von chantalkueng Beitrag anzeigen
    Weil ich mich mit Joomla besser auskenne.
    Alles klar.

  9. #9
    Teeny
    Registriert seit
    23.01.2018
    Beiträge
    48
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Horizontales Dropdown menu

    Du müsstest mal deinen ganzen Code posten.Weil den Teil den du geschickt hast(CSS)der Funktioniert ja ,das siehst du ja in mein Script ,der ist meiner deiner CSS gemacht. Den Code den du da geschrieben hast kann man nicht viel mit anfangen weil mit den Code fetzen kein Menü zusammenbau bar ist.
    Schick mal deinen vollständigen Code ,der das Menü erstellt mit den Fehler.
    Oder du machst ein Codepen fertig oder eine Test Seite bei blaced.net oder wo anders.
    Nur so kann ich kein Fehler finden weil wohl in den Codeteil kein Fehler ist

Ähnliche Themen

  1. Dropdown Menu
    Von magic.dave im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.08.2013, 16:51
  2. DropDown Auswahl Menu
    Von Rönix im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 11.04.2010, 17:17
  3. LINK um ein "Horizontales CSS Rollover Menu inkl. weiterem DIV"
    Von SnakeSnoke im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 14.04.2009, 09:08
  4. Dropdown-Menu mit Javascript
    Von visitor im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 16.01.2009, 19:56
  5. HTML DropDown Menu
    Von Bash im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 09.04.2007, 03:55

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •