title: Modifying an li:hover a class to be different from the rest of the same li:hover
body: <p>I'm trying to make the far right "Store" button on FlynnTec.com have rounded lower corners. I've tried all of the selectors that I know but for some reason "#menu li:hover .menu_right" doesn't work, which obviously means I'm not using the right selector.</p>
  
  <p>Please help! I'm new!!</p>
  
  <p>Thanks...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;li class="menu_right"&gt;&lt;a href="store.html" class="align_right"&gt;Store&lt;/a&gt;  
  &lt;/li&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#menu .menu_right {  
  float:right;  
  margin-right:0px;  
  }  
  #menu li:hover  {
  background: #F4F4F4;  
  background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
  border: 1px solid #777777;  
  padding: 4px 9px 4px 9px; 
  -moz-border-radius: 5px 5px 0px 0px;  
  -webkit-border-radius: 5px 5px 0px 0px;  
  border-radius: 5px 5px 0px 0px;  
  }
  #menu li .align_right {  
  /* Rounded Corners */  
  -moz-border-radius: 5px 0px 5px 5px;  
  -webkit-border-radius: 5px 0px 5px 5px;  
  border-radius: 5px 0px 5px 5px;  
  }  
  #menu li:hover .align_right {  
  left:auto;  
  right:-1px;  
  top:auto;  
  }  
  </code></pre>