Selector de precedente

by kseso

HTML

<ul class="menu">
  <li class="p1"><a href="index.html"><span>Promotional Items</span></a></li>
  <li class="p2"><a href="index.html"><span>Digital SLR Cameras</span></a></li>
  <li class="p3"><a href="index.html"><span>Zoom Lenses and Filters</span></a></li>
  <li class="p4"><a href="index.html"><span>Tripods and Monopods</span></a></li>
  <li class="p5"><a href="index.html"><span>Flashguns and Accessories</span></a></li>
  <li class="p6"><a href="index.html"><span>Photo Framing</span></a></li>
  <li class="p7"><a href="index.html"><span>Wedding Photography</span></a></li>
  <li class="p8"><a href="index.html"><span>Photograph Albums</span></a></li>
  <li class="icons">
      <b class="m1">Promotional Items</b>
      <b class="m2">Digital SLR Cameras</b>
      <b class="m3">Zoom Lenses and Filters</b>
      <b class="m4">Tripods and Monopods</b>
      <b class="m5">Flashguns and Accessories</b>
      <b class="m6">Photo Framing</b>
      <b class="m7">Wedding Photography</b>
      <b class="m8">Photograph Albums</b>
  </li>
</ul>

CSS

/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

Copyright (c) Stu Nicholls www.cssplay.co.uk. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.

Lo traslado aquí para ilustrar un artículo en mi blog
=================================================================== */
.menu {padding:0; list-style:none; width:250px; position:relative; z-index:100; margin:0 auto; height:320px;}
.menu li {width:250px; height:40px; float:left;}
.menu li a {display:block; width:250px; height:100%; background:url(trans.gif);}
.menu li a span {position:absolute; left:-9999px;}
.menu li.icons {position:absolute; left:0; top:0; width:250px; height:240px; z-index:-1;}
.menu li.icons b {display:block; width:220px; height:40px; padding-left:20px; line-height:40px; font:normal 14px/40px arial, sans-serif; color:#d8d8d8; text-shadow:0 -1px 1px rgba(0,0,0,0.8); background-color:#800; border-radius:5px;
-webkit-transition:0.2s;
-moz-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
transition:0.2s;
}

.menu li:hover {height:48px;  margin:-5px 0 0 0; width:276px; position:relative; z-index:100;}
.menu li.p2:hover {margin:-3px 0 0 0;}
.menu li.p3:hover {margin:-2px 0 0 0;}
.menu li.p4:hover {margin:-2px 0 0 0;}
.menu li.p5:hover {margin:-2px 0 0 0;}
.menu li.p6:hover {margin:-2px 0 0 0;}
.menu li.p7:hover {margin:-2px 0 0 0;}
.menu li.p8:hover {margin:-2px 0 0 0;}

.menu li.icons:hover {position:absolute; left:0; top:0; margin:0; width:250px; height:240px; z-index:-1;}

.menu li.p1:hover ~ li.icons b.m1,
.menu li.p2:hover ~ li.icons b.m2,
.menu li.p3:hover ~ li.icons b.m3,
.menu li.p4:hover ~ li.icons b.m4,
.menu li.p5:hover ~ li.icons b.m5,
.menu li.p6:hover ~ li.icons b.m6,
.menu li.p7:hover ~ li.icons b.m7,
.menu li.p8:hover ~ li.icons b.m8 {font-size:17px; height:48px; width:240px; line-height:48px; margin:-5px 0 -5px...