title: CSS Menu Layout in Sub-List Parent
body: <p>I have been using my free time to improve my HTML knowledge during my holiday.</p>
  
  <p>During the time I was designing a CSS Menu. I face some problem and don't know how to solve them.</p>
  
  <p>I tried to search from Google. Because of my poor English, I was unable to find a solution, so I seek help here.</p>
  
  <p><strong>Problem:</strong></p>
  
  <p>I tried to design a CSS Menu with Expandable sub-menu.
  Why doesn't the sub-menu's parent list change?</p>
  
  <p>As you can see from the screenshot. The <strong>Product</strong> menu is different with others.</p>
  
  <p>Is there any solution?</p>
  
  <p><strong>ScreenShot</strong></p>
  
  <p>Due to my reputation I can't provide a screenshot, so I'll provide a link:</p>
  
  <p><a href="http://i151.photobucket.com/albums/s155/HongJaiz/CSSMenu.jpg" rel="nofollow">http://i151.photobucket.com/albums/s155/HongJaiz/CSSMenu.jpg</a></p>
  
  <p><strong>CSS3 Coding</strong></p>
  
  <pre><code>body{
      position: relative;
      height: 100%;
      background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
  
  }
  
  .navbox {
      position: relative;
      float: left;
  }
  
  ul#expList {
      list-style: none;
      display: block;
      width: 200px;
      position: relative;
      padding: 60px 0 60px 0;
      background: url(shad2.png) no-repeat;
      -webkit-background-size: 50% 100%;
  }
  
  li#expList {
      list-style: none;
      display: block;
      width: 200px;
      position: relative;
      padding: 60px 0 60px 0;
      background: url(shad2.png) no-repeat;
      -webkit-background-size: 50% 100%;
  }
  
  ul li {
      list-style: none;
  }
  
  li {
      margin: 5px 0 0 0;
  }
  
  ul#expList li a {
      -webkit-transition: all 0.3s ease-out;
      background: #cbcbcb url(border.png) no-repeat;
      color: #174867;
      padding: 7px 15px 7px 15px;
      -webkit-border-top-right-radius: 10px;
      -webkit-border-bottom-right-radius: 10px;
      width: 100px;
      display: block;
      text-decoration: none;
      -webkit-box-shadow: 2px 2px 4px #888;
  }
  
  ul#expList li a:hover {
      background: #ebebeb url(border.png) no-repeat;
      color: #67a5cd;
      padding: 7px 15px 7px 30px;
  }
  </code></pre>
  
  <p><strong>HTML Coding</strong></p>
  
  <pre><code>&lt;ul id="expList"&gt;
      &lt;li class="home"&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="freebies"&gt;Product
          &lt;ul&gt;
              &lt;li&gt;&lt;a href=""&gt;List 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;List 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;List 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="about"&gt;&lt;a href=""&gt;Register&lt;/a&gt;&lt;/li&gt;
      &lt;li class="about"&gt;&lt;a href=""&gt;About Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>