Submenu – hover dropdowns

  • Hey,

    I’m trying to get the submenus on this website to show up when you hover over the main menu items (somebody else very kindly designed the site for us but only set it up with one level of menu). I’ve been playing around with it for ages, but I don’t fully understand it and I seem to be getting nowhere fast. Ideally I would like it to show a submenu underneath the current one, on hover, with some sort of background so that the submenu can be differentiated from the body of the site. It would also be good to have a a hover font colour too.

    At the moment, where it says ‘About’ currently, it should also have a dropdown saying ‘Our Patron’ (with many more to be added once we have sorted this issue!).

    This is the current code, which probably shows just how much I’ve been messing around with it and how little I know!! Any help would be hugely appreciated. Thanks!

    div#menustrip{
	height: 60px;
	width: 100%;
	background: transparent url('../images/menu_unfilled_film.png') top center repeat-x;
}

div#menucentre{
	height: 60px;
	background: transparent url('../images/menu_filled_film.png') top center repeat-x;
	padding: 0px 25px;
	margin: 0px auto;
	z-index: 999;
}
div#menucentre ul{
	margin: 0px;
	height: 60px;
	list-style: none;
	font-family: Interstate, Impact, sans-serif;
}

div#menucentre ul li{
	padding: 0px;
	margin: 0px;
	text-align: center;
	display: inline;
	height: 60px;
	font-size: 30px;
	color: #E7F1E2;
	text-transform: uppercase;
}
div#menucentre ul li a{
	position: relative;
	top: 15px;
	padding: 10px 20px;
	margin: 0px;
	color: #E7F1E2;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: normal;
}
div#menucentre ul li a:hover, div#menucentre ul li a:active{
	color: #A3C1AD;
	text-shadow: #231f20 2px 2px 2px;
	text-decoration: none;
}

div#menucentre ul li ul{
	padding: 0px;
	margin: 0px;
	text-align: left;
	display: none;
	font-size: 30px;
	color: #000;
	text-transform: uppercase;
}

div#menucentre ul li ul a{
	position: relative;
	top: 15px;
	padding: 10px 20px;
	margin: 0px;
	color: #A3C1AD;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: normal;
}

div#menucentre ul li:hover .div#menucentre ul li ul{
	display: block;
	color: #000;
	background: #CCC;
	text-shadow: #231f20 2px 2px 2px;
	text-decoration: none;
}
Viewing 6 replies - 1 through 6 (of 6 total)

  • I don’t see anything overly out of place in your css. It’s possible the wp_nav_menu() function call in your header.php has a depth setting of 0 but it’s also possible there is a piece of javascript that’s supposed to dynamically set display:block on mouseover that isn’t.

    Thread Starter ellinoz

    (@ellinoz)

    <div id="menustrip">
			<div id="menucentre" class="restrictor">
				<?php wp_nav_menu( array( 'theme_location' => 'main', 'items_wrap' => '<ul><li id="dash" class="last"><a href="'.home_url().'" title="Watersprite Home">Home</a></li>%3$s</ul>' ) ); ?>
			</div>

    Is that the one?

    I did – at one point – get the sub menus to show up, but only permanently, and with a grey background all the way across the menu strip, rather than just behind the block of text itself.

    (And thanks for the quick reply!)

    EDIT: Nevermind. The default depth value is 0, which means all.

    My best guess is that there’s some javascript related to the menu that’s not doing its job reversing the display:none property on those submenus.

    Thread Starter ellinoz

    (@ellinoz)

    Doesn’t seem to have done the trick unfortunately.

    Have I done broked the CSS?

    Have I done broked the CSS?

    It’s possible, unfortunately. You may need to (if possible) get in touch with your site’s designer and see if they can help you troubleshoot your issue.

    Thread Starter ellinoz

    (@ellinoz)

    OK. Thank you anyway!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Submenu – hover dropdowns’ is closed to new replies.