fuliaoli

How can I set a menu list so that it can show on the top of the map div?

Discussion created by fuliaoli on Feb 18, 2014
Hi,
I use dojo bordercontainer in which set top region as my menu holder, and the center is map.
I put a menu built on a list I copied from online. It works if I put the menu inside the map div, but it doesn't if it's in the top region.  I want to show on the top of the map as a dojo dropdown menu bar. [ATTACH=CONFIG]31564[/ATTACH]
I tried changing some settings of the css, but it doesn't work. CSS is as following:
#menuBar{
   display: block;
  position:absolute;
  z-index:5000;
  right:250px; 
  top:5px;
  height: 20px;
  overflow:visible;
}
  #nav li {
  border-top: 1px solid blue;
  border-bottom: 1px solid blue;
  list-style: none;
  float: left;
  font: bold 10px arial;
  overflow:visible;
}
  #nav li a.menu {
    display: block;
    text-align: center;
    background: #2175bc;
    padding: 4px 5px;
    margin: 0 1px 0 0;
    color: #FFF;
    width: 80px;
    text-decoration: none;
  }
  #nav li a.menu:hover {
   background: #2586d7;
  }
  .submenu {
    background: #2175bc;
    visibility: hidden;
    position: absolute;
  }
  .submenu a {
  display: block;
  font: 10px arial;
  text-align: left;
  text-decoration: none;
  color: #ffffff;
  width: 80px;
  padding: 4px 10px;
  text-align: center;
  }
  .submenu a:hover {
    background: #2586d7;
    color: yellow;
    text-align: right;
  }
and html is like:
        <div id="cwiMenuBar">
       <ul id="nav">
         <li><a href="#" class="menu" id="mmenu1" onmouseover="mopen(1);" onmouseout="mclosetime();">Zoom To</a>
          <div class="submenu" id="menu1" onmouseover="mcancelclosetime()" onmouseout="cwiMenu.mclosetime();">
            <a href="#" onClick="Dispatcher('tr');">Township Range</a>
            <a href="#" onClick="Dispatcher('city');">City</a>
            <a href="#" onClick="Dispatcher('township');">Township Name</a>
            <a href="#" onClick="Dispatcher('latlon');">Latitude Longitude</a>
          </div>
        </li>
        <li><a href="#" class="menu" id="mmenu2" onmouseover="mopen(2);" onmouseout="mclosetime();">Tools</a>
         <div class="submenu" id="menu2" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
            <a href="#">SUB 2-1</a>
            <a href="#">SUB 2-2</a>
            <a href="#">SUB 2-3</a>
            <a href="#">SUB 2-4</a>
         </div>
        </li>

Please help.
Thanks in advance.
li

Attachments

Outcomes