title: nested css style on li element on hover
body: <p>I have my markup something like this.</p>
  
  <pre><code>&lt;div id="chromemenu" class="chromestyle"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a rel="dropmenu1" href="#" class=""&gt;Buy&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a rel="dropmenu2" href="#" class=""&gt;Sell&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a rel="dropmenu3" href="#" class=""&gt;Community&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a rel="dropmenu6" href="#" class=""&gt;Languages&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a rel="dropmenu4" href="#" class=""&gt;My Account&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I have put <code>jQuery</code> to add a class inside a class selected. So when user hover on alink(here on Buy link) the markup becomes like this</p>
  
  <pre><code>&lt;div id="chromemenu" class="chromestyle"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a rel="dropmenu1" href="#" class="selected"&gt;Buy&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a rel="dropmenu2" href="#" class=""&gt;Sell&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a rel="dropmenu3" href="#" class=""&gt;Community&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a rel="dropmenu6" href="#" class=""&gt;Languages&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a rel="dropmenu4" href="#" class=""&gt;My Account&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to give style only the li whose a class is selected.
  My style for the li is to just give border to the li element. So can someone tell me how to do this? Any help and suggestions will be really appreciable. Thanks....</p>
  
  <p><strong>Update</strong>
  I want to give border to my <code>li</code> element not the <code>a</code> so please help me in that field.Can this be achieved in simple css? Hey I am still for the answer...</p>