html - Drop-down menus and the <li> tag -

i modifying css of existing web page. navigation menu in form of list in items have background color under normal circumstances , color when active or hovered-over. css code follows:

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

some of menu items (list items, in case) have drop-down menus links sub-pages. i'm trying make navigation menu items have "active" background color not if active, if 1 of sub-pages open. there way implement this? code drop-down menus looks follows:

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

i suspect way bring modify first of 2 above blocks of code read follows:

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

or similar, can't figure out exact syntax. there way open child page can make parent page active in navigation menu?

the html 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;"> 

... , on, there number of list items. guess should create separate span imparts active background color list item, and, on each child page, put span around list item responsible page's parent's menu item.

you didn't show html, made of own. didn't use tags of 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 {   text-decoration: none;   color:#fff; }  nav li div.dropdown {   display:block;   position:absolute }  nav li div.dropdown .dropdown-inner {   right:20px; /* equal li padding y */   width:100px; /* equal li width */   padding:10px 20px; /* equal li padding x */   background:#333;   top:10px;   position:relative }  nav li span.dropdown {   display:block; } 

codepen: http://codepen.io/anon/pen/bzigl