CODEWITHSUNDEEP
htmlcssdrop-down-menuhtml-listsparent-child
Mhoram
Mhoram

Reputation: 431

Drop-down menus and the <li> tag

I am modifying the CSS of an existing web page. The navigation menu is in the form of a list in which the items have a certain background color under normal circumstances and another color when active or hovered-over. The CSS code for this is as follows: 

#navigation li a:hover,
#navigation li#active a {
    background: #104E91;
}

Some of the menu items (list items, in this case) have drop-down menus with links to sub-pages. I'm trying to make the navigation menu items have the "active" background color not only if they are themselves active, but also if one of their sub-pages is open. Is there any way to implement this? The code for the drop-down menus looks as follows:

#wsite-menus .wsite-menu li:first-child {
    border-top: 1px solid #000;
}

#wsite-menus .wsite-menu li a {
    padding: 8px;
    color: #fff;
    background: #2f2f2f;
    border: 1px solid #4b4b4b;
    border-top: none;
}

#wsite-menus .wsite-menu li a:hover {
    background: #4b4b4b;
}

I suspect that the way to bring this about would be to modify the first of the two above blocks of code to read as follows:

#navigation li a:hover,
**#navigation li#active child,**
#navigation li#active a {
    background: #104E91;
}

or something similar, but I can't figure out the exact syntax. Is there a way an open child page can make the parent page look active in the navigation menu?

The HTML is as follows:

<div id = "navigation">
    <ul class = "wsite-menu-default">
        <span id = "Span1" class = "wsite-nav-handle"> style="display:                 inline;">
          <li class="w-menu-item  wsite-nav-0" style="position: relative;">

... and so on, there are a number of list items. I guess I should create a separate span that imparts an active background color to a list item, and, on each child page, put that span around the list item that is responsible for the page's parent's menu item.

Upvotes: 0

Views: 7510

Answers (2)

Hynes
Hynes

Reputation: 3424

The problem you're having is because you're assigning the background color to the <a> tag instead of <li> tag. When you exit a parent <li> item and move down to a child <li> element, you've technically left the <a> and so the background color reverts correctly. If however you apply the background color to the <li> tag, rolling over any child list items will keep the active state on the parent <li> item.

Upvotes: 1

Jonas Rothmann Hjalager
Jonas Rothmann Hjalager

Reputation: 49

You didn't show any HTML, so I made up some of my own. I didn't use your tags of the same reason.

HTML:

<nav>
  <a href="#"><li>Home</li></a>
  <a href="#">
    <li>Dropdown
    <div class="dropdown">
      <div class="dropdown-inner">
        <a>Menu</a>
        <a>Number</a>
        <a>3</a>
    </div>
    </li>
  </a>
  <a href="#"><li>About</li></a>
</nav>

CSS:

nav li {
  list-style:none;
  display:inline-block;
  text-align:center;
  background:#222;
  color:#FFF;
  width:100px;
  padding:10px 20px
}

nav a {
  text-decoration: none;
  color:#FFF;
}

nav li div.dropdown {
  display:block;
  position:absolute
}

nav li div.dropdown .dropdown-inner {
  right:20px; /* Equal to li padding Y */
  width:100px; /* Equal to li width */
  padding:10px 20px; /* Equal to li padding X */
  background:#333;
  top:10px;
  position:relative
}

nav li span.dropdown a {
  display:block;
}

Codepen: http://codepen.io/anon/pen/bzIGl

Upvotes: 2

Related Questions