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
