div on top of div with Google Maps API

Question

How do I float a div "menu" on top of my Google Maps API "map" div. And maybe possibly add a transparency of 50% on the menu div. Can this be done?

#map {width: 835px; height 540px; float: left;}
#menu {width: 145px; float: right; padding-top: 10px;}

<div id="map"></div>
<div id="menu"></div>

Answer 1

Can't you changed the positions of the DIVs like this:

<div id="menu"></div>
<div id="map"></div>

If not you could go something like this:

<div id="map"></div>
<div id="menu"></div>

#menu
{
    position: absolute;
    top: 10px;  /* adjust value accordingly */
    left: 10px;  /* adjust value accordingly */
}

Update 2

Cross-browser transparency style:

.dropSheet
{
    background-color: #000000;
    background-image: none;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Just apply the class dropSheet to the element you want to make transparent.

Answer 2

Well, the basic structure of a float should contain a wrapping element that has its position property set to something else than the default, and an element that clears the float in the end.
Like this:

#wrapper {
  position:relative;
}
#menu {
  float:right;
}

<div id="wrapper">
  <div id="map"></div>
  <div id="menu"></div>
  <br clear="both" />
</div>

The code provided has not specifically been tested, but the float and the fact that the menu is the higher layer than the map, should make the menu on top of the map in the right side. For the transparency issue, see this fantastic resource.

Hope that helped you out.