css menu funktioniert nicht

Omid · #1 (**permalink**) 01.06.2007, 10:56

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 &amp; 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

RoToRa · #2 (**permalink**) 01.06.2007, 13:08

Als ersten Schritt, bitte das XHTML validieren. Spontan fallen mir IDs mit "*" auf, die nicht erlaubt sind, aber das ist noch mehr.

Robin

Omid · #3 (**permalink**) 05.06.2007, 06:55

Hallo RoToRa und danke für die Antwort,
die Sternchen sind da weil ich nach einen JavaScript benutze der die Menus lädt und der schaut nach diesen Sternchen

Der Script ist im Anhang.

natürlich muß der dann in den Html einfügt werden..

Code:

...
<script type="text/javascript" src="Sample_files/DynamicMenu.js">
    </script>
    <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 ....

was könnte noch falsch sein???

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Rollout Menü	Hiead	CSS	0	15.08.2010 19:50
CSS Problem mit Menu	Alomaman	CSS	2	19.06.2010 14:58
Kindelement eines ausgeblendeten Elternelementes ansprechen	wandler	CSS	7	19.06.2010 01:32
Css Tree Fly Menu	thiagojonas	CSS	7	30.12.2008 20:10
Horizontale Leiste mit Css und xhtml formatieren	bettina	CSS	1	06.01.2007 12:49