Problem with struts-menu for second level submenu

Greenhorn

Posts: 20

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello all,

I am developing a database driven struts menu for our application. I followed code examples from
http://demo.raibledesigns.com/struts-menu/cssVertical.jsp.

The menu items were retrieved from database and code written for rendering menu in a JSP page. When the mouse pointer moved over a parent level menu item, its submenu is shown. Now for the first level submenu also, when mouse moved over an item on first level sub menu, the second level sub menu shown. Now the problem is such that when I move pointer over any second level menu item, the selection over parent level menu item and first level sub menu item vanishes. I am very new to CSS and I could not figure out any problem with CSS. I am attaching my code files.

MenuPage.jsp

<%@ taglib uri="/WEB-INF/struts-html" prefix="html" %>
<%@ taglib uri="http://struts-menu.sf.net/tag" prefix="menu" %>
<%@ taglib uri="http://struts-menu.sf.net/tag-el" prefix="menu-el" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html:html>
<head>	
	<title></title>
	<script type="text/javascript" src="mb.js"></script>
	<link rel="stylesheet" href="newmb.css" />
	
	<script>
 		function keytest(){
   			callBlock();
 		}		
	</script>
</head>

<html:form action="MenuPageAction.do"> 
	 
 	
 	<table   border=0  
		  >
		<TBODY>
	  		<tr>
	    		<td  ></td>
	  		</tr>
		</TBODY>
	</table>
	
	<table   border=0    >
	  	<tr>
	  		<td >
			
				<menu:useMenuDisplayer name="TabbedMenu" id="primary-nav" repository="repository">
    				<c:forEach var="menuItem" items="${repository.topMenus}">
        				<menu-el:displayMenu name="${menuItem.name}"/>
    				</c:forEach>
				</menu:useMenuDisplayer>
				
			</td>
			<td >
				<a  target="middleFrame"  rel="nofollow"><img    border="0"/></a>
			</td>
		
			<td >
	      		<img        />
	    		</td>
	   
	    		<td >
	      		<img       />
	    		</td>
	  	</tr>
	 	<tr>
	 		<td ></td>
	 	</tr>
 	</table>
	
</html:form>   
</body>
</html:html>

mb.js

newmb.css

body { font: normal 80% verdana; }

ul#primary-nav,
        ul#primary-nav ul {
            width: 150px;
            margin: 0;
            padding: 0;            
            font-size: 100%;
        }

ul#primary-nav {
            float: left;
            width: 900px;
        }

ul#primary-nav:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

ul#primary-nav li {
            position: relative;
            list-style: none;
            float: left;
            width: 120px; /* Width of Menu Items */
        }

ul#primary-nav li a,
        ul#primary-nav li li a {
            display: block;
            text-decoration: none;
            color: #FFFFFF;
            padding: 5px;
            /*border: 1px solid #ccc;*/
        }

/* 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#primary-nav ul {
            position: absolute;
            display: none;
        }

ul#primary-nav ul ul {
            left: 150px;
            top: 0;
        }

ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

ul#primary-nav li:hover ul ul,
        ul#primary-nav li:hover ul ul ul,        
        ul#primary-nav li.over ul ul,
        ul#primary-nav li.over ul ul ul { display: none; }  /* Hide sub-menus initially */

ul#primary-nav li:hover ul,
        ul#primary-nav li li:hover ul,
        ul#primary-nav li li li:hover ul,        
        ul#primary-nav li.over ul,
        ul#primary-nav li li.over ul,
        ul#primary-nav li li li.over ul { display: block; } /* The magic */

ul#primary-nav li.menubar { background: transparent url(../images/arrow-down.gif) right center no-repeat; }
        ul#primary-nav li li.menubar { background: transparent url(../images/arrow-right.gif) right center no-repeat; }
 
	  ul#primary-nav li:hover,		
        ul#primary-nav li.over { background-color: #009BCE !important; }

ul#primary-nav li a:hover { color: #E2144A; }

Please help.

Thanks and have a great day!!

roshni.>