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

    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

    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