Question

I am trying to show hide div blocks depending on the link on which it hovers. I have main category and sub-categories. I would like show the sub-category (of the relevant main category) only when someone hovers on maincategory.I tried the following but dont seem to work.
All helps are appreciated.

Code

      <style type="text/css">
      <!--
      .series-wrapper
      { display:none;}


      .brandcat li a:hover .series-wrapper 
       { display:block;}
      -->
      </style>    


    <div class="brandcat">
    <h3>Most Popular Brands</h3>
    <ul class="brands">
    <li><a href='showbrand.php?bd_id=1'>Apple</a>
        <div class='series-wrapper'><h5>Select your Apple Series</h5>
            <a href='showseries.php?s_id=1'>Apple Mainseries1</a>
            <a href='showseries.php?s_id=3'>Test2</a>
        </div>
    </li>
    <li><a href='showbrand.php?bd_id=2'>Ball</a>
        <div class='series-wrapper'><h5>Select your Ball Series</h5>
            <a href='showseries.php?s_id=1'>Ball Mainseries1</a>
            <a href='showseries.php?s_id=3'>Ball Test2</a>
        </div>
    </li>

          </ul>
         </div>

Answer 1

Your .series-wrapper is not a descentor of anchor.It’s with anchor . Write like this

.brandcat li a:hover + .series-wrapper { display:block;}