drop down menu Wordpress

[jacobboersma]

Ik krijg het niet voor elkaar om een drop down menu te krijgen. Hij maakt er grote knoppen van met de sub knoppen er standaard onder getoond. Ik wil ze pas zichtbaar krijgen na een mouse over.

Header.php

<div id="menu">
                <ul>
               <?php wp_nav_menu(array('container' => '', 'menu_id' => 'menu', 'menu_class' => 'headerfix', 'fallback_cb' => 'produccion_musical_menu', 'depth=1&title_li=', 'theme_location' => 'Header Menu')); ?>

CSS

#menu { 
	margin: 0px auto;
	font: 1.25em "Tahoma", "Geneva", sans-serif;
	text-align:justify;
	width: 760px;
	height: 30px;
}

#menu ul{
	padding: 0 0 0 20px;
	list-style: none;
	list-style-type: none;
}

#menu ul li{
	float: left;
	margin: 5px 10px 5px 10px;
	font-size: 14px;
	background: #799F04;
}

#menu ul li a{
	display: block;
	padding: 5px 8px 8px 9px;
	text-decoration: none;
	color: #cddec6;
	font-weight: bold;
}

#menu ul li a:hover{
	background: #222;
}

#menu ul li.current_page_item{
	float: left;
	margin: 5px;
	font-size: 14px;
   /* border:5px #222 solid; Got some estructural problem with this*/
	background: #222;
}

Wat doe ik fout?

 

[Sevo]

De php code verwijst niet naar je CSS. Als dit aanpast moet het wel lukken.

 

[csshunter]

In de css staat nu wel wat de <ul>'s, de <li>'s en de <a>'s van het menu moeten doen, maar dat geldt dan zowel voor de items van het hoofdmenu als voor de items van de submenu's. Oftewel: alles wordt altijd getoond, en de submenu-items hebben dezelfde gedaante als de hoofdmenu-items.

De submenus's kunnen in de css bereikt worden met #menu ul ul {...}.
Er moet dus aparte css voor die submenu's bij komen, in de geest van:

#menu ul ul {
    display: none; /* in normale toestand geen submenu's tonen */
    ...
    }
#menu ul ul li {
    ...
    }
#menu ul ul li a {
    ...
    }

Plus een bediening ervan bij een hover over een hoofdmenu-item, in de geest van:

#menu ul li:hover ul { /* het submenu onder een bepaald be-hoverd hoofdmenu-item wel tonen */
    display: block;
    }