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

fuliaoli — Tue, 18 Feb 2014 19:32:34 GMT

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

topic How can I set a menu list so that it can show on the top of the map div? in ArcGIS JavaScript Maps SDK Questions

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