Hallo Leute,
hab hier so ein css menu, das auch soweit funktioniert...
jedoch verlier ich auf den submenus den Focus, könntet ihr mal bitte darüber schauen?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>List Region</title>
<script type="text/javascript">
function IEHoverPseudo()
{
var ulElements = document.getElementsByTagName("ul");
for (var i = 0; i < ulElements.length; i++)
{
liElements = ulElements[i].getElementsByTagName("li");
for (var j = 0; j < liElements.length; j++)
{
if (liElements[j].className == "menuparent")
{
liElements[j].onmouseover = function() { this.className += " over"; }
liElements[j].onmouseout = function() { this.className = "menuparent"; }
}
}
}
}
function Initialize()
{
AJAX_REQUEST_HANDLER_URL = "/AjaxReqHandler.aspx";
ProcessCategoryItemsInPage();
IEHoverPseudo();
}
window.onload = Initialize;
</script>
<style type="text/css">
/* Style elements for dynamic category menu */
ul.categorymenu, ul.categorymenu ul
{
margin: 0;
padding: 0;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
background: #fff; /* IE6 Bug */
font-size: 100%;
}
ul.categorymenu li
{
position: relative;
list-style: none;
}
ul.categorymenu li a
{
display: block;
text-decoration: none;
color: #777;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */
ul.categorymenu ul
{
position: absolute;
display: none;
left: 149px; /* Set 1px less than menu width */
top: 0;
}
ul.categorymenu li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
ul.categorymenu li:hover ul ul,
ul.categorymenu li:hover ul ul ul,
ul.categorymenu li.over ul ul,
ul.categorymenu li.over ul ul ul { display: none; } /* Hide sub-menus initially */
ul.categorymenu li:hover ul,
ul.categorymenu li li:hover ul,
ul.categorymenu li li li:hover ul,
ul.categorymenu li.over ul,
ul.categorymenu li li.over ul,
ul.categorymenu li li li.over ul { display: block; } /* The magic */
ul.categorymenu li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }
ul.categorymenu li.menuparent:hover,
ul.categorymenu li.over { background-color: #f9f9f9; }
ul.categorymenu li a:hover { color: #E2144A; }
</style></head><body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRDr1Ek+zeffL/UpDhNDGKzDebD2Q==" type="hidden">
</div>
<div>
<center><h1>List Region</h1></center>
</div>
<div>
<table style="width: 638px; height: 296px;">
<tbody><tr>
<td style="width: 100px;">
<ul class="categorymenu">
<li id="CAT001" class="menuparent"><a href="#">Food & Bread</a>
<ul class="categorymenu"><li class="menuparent" id="DPT001"><a href="#">Main Office</a></li><li class="menuparent" id="DPT002"><a href="#">Dev Office</a></li><li class="menuparent" id="DPT003"><a href="#">Dev Office</a></li></ul></li>
</ul>
</td>
<td style="width: 100px;">
<ul class="categorymenu">
<li id="CAT002*" class="menuparent"><a href="#">Travel</a>
<ul>
<li id="Li1" class="menuparent"><a href="#">Indian</a>
<ul class="categorymenu">
<li id="SLi4" class="menuparent"><a href="#">Fry</a></li>
<li id="SLi5" class="menuparent"><a href="#">Curry</a></li>
</ul>
</li>
<li id="Li2" class="menuparent"><a href="#">Chinese</a></li>
<li id="Li3" class="menuparent"><a href="#">European</a></li>
</ul>
Loading...</li>
</ul>
</td>
<td style="width: 100px;">
<ul class="categorymenu">
<li id="CAT003*" class="menuparent"><a href="#">Sport</a>
Loading...</li>
</ul>
</td>
</tr>
<tr>
<td style="width: 100px;">
<ul class="categorymenu">
<li id="CAT004*" class="menuparent"><a href="#">Music</a>
Loading...</li>
</ul>
</td>
<td style="width: 100px;">
<ul class="categorymenu">
<li id="CAT005*" class="menuparent"><a href="#">Movies</a>
Loading...</li>
</ul>
</td>
<td style="width: 100px;">
</td>
</tr>
<tr>
<td style="width: 100px;">
</td>
<td style="width: 100px;">
</td>
<td style="width: 100px;">
</td>
</tr>
</tbody></table>
</div>
</form>
</body></html>
Also das Problem ist wenn ich auf ein Hauptmenu klicke erscheint das Submenu, wie es auch sein soll
, aber wenn sich nun etwas unter dem
Submenu befindet, dann kriegt der automatisch den focus und mein submenu verschwindet....
ich hoffe ich konnte mein Problem etwas verständlich darlergen, ansonsten einfach mal den code in eine HTML datei kopieren
1000 Dank im voraus,
Omid