This is something I have been wanting to do for ages, I can';t find any good guides and I have spent the weekend messing with the CSS to no good end result. The best way to describe what I want is to have a drop down menu look just like the drop down on the WP admin site bar.

I have no idea how to achieve this, the CSS menu section is so confusing I just don't know where to start.

Here is an example of how I want the menu to look, slight transparency with same colors, border and shadow.


Here is a link to my site : http://lakewooditsupport.co.uk/

Does anyone know how I could just put a border around the drop down menu? and just for the selected page to turn grey on hover?

The menu's are the most complicated CSS with over 400 lines of CSS. this thread 'Juggledad's colored menu cheat sheet ' might help you figure it out.

I've used that code and got it to style the same as I have now, the problem I have is the sub menu uses the same style as the page menu. I want the page menu to stay the same and the sub page menu to have different style.

I have also tried to implement a transparent background but for some reason the text goes transparent.

I have used this code.

/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
	margin-top:0px; 
	background: #ffffff;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
	height: 20px; 
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	background: #ffffff;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
	border: none 0px; 

}

the sub menus are a <li> in a <ul> that is in a <li> that is in a <ul> for example

<div id="menu1">
	<ul id="rmenu2" class="clearfix rMenu-hor rMenu">
		<li class="page_item current_page_item"><a href="http://yourdomain.com/" title="ZOM WP-3.1.1 testing"><span>Home</span></a></li>
		<li class="rMenu-expand page_item page-item-3"><a href="http://yourdomain.com/?page_id=3" ><span>Directions</span></a>
 			<ul class="rMenu-ver">
				<li class="page_item page-item-5"><a href="http://yourdomain.com/?page_id=5" ><span>West</span></a></li>
				<li class="page_item page-item-42"><a href="http://yourdomain.com/?page_id=42" ><span>North</span></a></li>
				<li class="page_item page-item-1192"><a href="http://yourdomain.com/?page_id=1192" ><span>South</span></a></li>
				<li class="page_item page-item-1321"><a href="http://yourdomain.com/?page_id=1321" ><span>East</span></a></li>
			</ul>
		</li>
		<li class="page_item page-item-1189"><a href="http://yourdomain.com/?page_id=1189" ><span>Calendar</span></a></li>
	</ul>
</div>

Remember that CSS stands for CASCADING Style Sheet. CSS for an element effects all it's children, so if you want to set something for a parent and have the child different, you have to create CSS to change the child.

(This is why there is so much CSS for the menu's)

So I would have to aim the CSS the li parts being the child of the ul?

for example

li.rMenu a:hover {
	color: #1B9DC9 !important;
	background: #000000 !important;
}

I'm starting to understand a little more.

right but

li.rMenu a:hover {
	color: #1B9DC9 !important;
	background: #000000 !important;
}

won't work because the class 'rMenu' isn't part of the <li> it is part of the <ul> so you would need

ul.rMenu li a:hover {
	color: #1B9DC9 !important;
	background: #000000 !important;
}

Actually since you are talking about the children, I think you want to use the ul.rMenu-ver

Thank you so much,

I finally have it working as needed.

Here is the CSS insert that I used for other to see.

/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu a:link, 
ul.rMenu a:visited, 
ul.rMenu a:active, 

ul.rMenu {
	color: #969A9D !important;
}

ul.rMenu a:hover {
	color: #1B9DC9 !important;
}

ul.rMenu-ver a:link,
ul.rMenu-ver a:visited,
ul.rMenu-ver a:active,

ul.rMenu-ver {
	color: #575a5d !important;
	background: #F5F5F5 !important;
}

ul.rMenu-ver a:hover {
	color: #ffffff !important;
	background: #575a5d !important;
}

Is there anyway of putting a border around the drop down menu? I have tried but it borders each page link.

didi you try putting it on the ul?

I just used it on the modified li sub-menus, it achieved what I was after.