Horizontales Dropdown menu

chantalkueng

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

basti1012

hast du auch ein html teil dafür?

Gastl

Naja, der Link zum Schrott steht oben drin.

basti1012

Habe mal HTML dazu gebaut
https://basti1012.bplaced.net/index.php?ordn…um-hilfe&id=520

Läuft das so, wie es soll?

chantalkueng

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>

<div id="container">

<div id="header">
<jdoc:include type="modules" name="email" style="xhtml" />
</div>


<div id="navigation">

<div id="nav">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>

</div>


<div id="main">

<div id="left">
<jdoc:include type="message" />
<jdoc:include type="modules" name="debug" />
<jdoc:include type="component" />
</div>


<div id="right">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>

</div>


<div id="footer">
© <?php echo date('Y'); ?> <?php echo $app->getCfg('sitename'); ?>
</div>

</div>

</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

djheke

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

chantalkueng

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

djheke

Zitat von chantalkueng

Weil ich mich mit Joomla besser auskenne.

Alles klar.

basti1012

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

Tags