menu control css based on childitems

Question

Hi

I need to set the css on some menu items on its hover based on whether they have childitems or not.

"Home"    "Manage Customer"          "Manage Employee"
                "Customer List"              "Employee List"
                "Customer Detail"            "Employee Detail"

The sample menuitems are shown above. I want "Home","Customer List","Customer Detail","Employee List","Employee Detail" to have one css on hover (as they do not have any children)

and "Manage Customer","Manage Employee" should have a different css.

How do I achieve that.

Code

protected void Page_Load(object sender, EventArgs e)
        {
            MenuItem miHome = new MenuItem("Home", "0");
            miHome.NavigateUrl = "http://www.google.com";

            MenuItem miManageCustomer = new MenuItem("Manage Customer", "1");
            miManageCustomer.NavigateUrl = "javascript:void(0)";

            MenuItem miCustomerList = new MenuItem("Customer List", "2");
            miCustomerList.NavigateUrl = "http://www.google.com";
            miManageCustomer.ChildItems.Add(miCustomerList);

            MenuItem miCustomerDetail = new MenuItem("Customer Detail", "3");
            miCustomerDetail.NavigateUrl = "http://www.google.com";
            miManageCustomer.ChildItems.Add(miCustomerDetail);

            MenuItem miManageEmployee = new MenuItem("Manage Employee", "4");
            miManageEmployee.NavigateUrl = "javascript:void(0)";

            MenuItem miEmployeeList = new MenuItem("Employee List", "5");
            miEmployeeList.NavigateUrl = "http://www.google.com";
            miManageEmployee.ChildItems.Add(miEmployeeList);

            MenuItem miEmployeeDetail = new MenuItem("Employee Detail", "6");
            miEmployeeDetail.NavigateUrl = "http://www.google.com";
            miManageEmployee.ChildItems.Add(miEmployeeDetail);

            menu1.Items.Add(miHome);
            menu1.Items.Add(miManageCustomer);
            menu1.Items.Add(miManageEmployee);
        }

Answer 1

Assuming a HTML structure like this:

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Manage Customer</a>
      <ul>
        <li><a href="#">Customer List</a></li>
        <li><a href="#">Customer Detail</a></li>
      </ul>
  </li>
</ul>

You can actually use the .not function together with the :only-child selector, like this:

$('#menu > li > a').not(':only-child')

See: http://jsfiddle.net/KWHf6/. However, if you're only doing this to style them, then I'd suggest you add a class to each of the li that have the submenus, so as to remove the Javascript dependency.

Answer 2

You could add a cssClass property to the MenuItem class (if one doesn't already exist), and set it when populating the menu. Then you'd have to use that cssClass property when rendering menu items to html.

Now, i don't know what does the MenuItem class look like so this is a pretty generic solution.