CSS Forum

**Whathadiv** · 02-08-2011, 10:52 PM

Hi everyone,

I've been working at this for a while now and it's time to get some help

:

I'm building a sort of navigation with pure CSS and CSS3. My problem has to do with CSS selectors.

I need to show an image that is behind two other elements when hovering over a menu <li> that is above those two elements. (Simply using z-index doesn't work)

Now I can use selectors like

Code:

 ul.menuBuild li .img1{display:none;}
    
    ul.menuBuild li:hover + .img1{display:block;}

to show the image but that only works if the image is a child of the hovered element. I need to select and element that is not a child of the hovered element.

Here is my HTML:

Code:

<body>
<div id="menu-wrap">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<div class="wrap4"> 
<span class="img1"><img class="orbit orbit-frame" src="images/card08.jpg" alt="card08" /></span>
<div class="completer"></div>
<div class="completer2"></div>
<div class="wrap5">
<div class="nav-holder">

<!-- start menu !-->

<ul class="menuBuild">

  <li id="menu1"><a href="#">Lips</a>
    <ul class="submenu sub1">
      <li class="first"><a href="cat.html">Cat</a></li>
      <li class="second"><a href="rabbit.html">Rabbit</a></li>
      <li><a href="dingo.html">Dingo</a></li>
      <li class="third"><a href="cat.html">Cat</a></li>
      <li class="last"><a href="dingo.html">Dingo</a></li>
    </ul>
  </li>
  
  <li id="menu2"><a href="#">Ears</a>
    <ul class="submenu sub2">
      <li class="first"><a href="monkey.html">Monkey</a></li>
      <li class="second"><a href="dog.html">Dog</a></li>
    </ul>
  </li>
  
  <li id="menu3"><a href="#">Eyes</a>
    <ul class="submenu sub3">
      <li class="first"><a href="pig.html">Pig</a></li>
      <li class="second"><a href="bird.html">Bird</a></li>
      <li><a href="worm.html">Worm</a></li>
    </ul>
  </li>
  
  <li id="menu4"><a href="accessibleLink.html">Noses</a>
    <ul class="submenu sub4">
      <li class="first"><a href="bat.html">Bat</a></li>
      <li class="second"><a href="fish.html">Fish</a></li>
      <li><a href="panther.html">Panther</a></li>
    </ul>
  </li>
  
</ul>

<!-- end menu !-->

</div><!-- nav holder !-->
</div><!-- wrap5 !-->
</div><!-- wrap4 !-->
</div><!-- wrap3 !-->
</div><!-- wrap2 !-->
</div><!-- wrap1 !-->
</div><!-- menu-wrap !-->


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</body>

The image MUST stay between the wrap 4 and completer divs.

The menu MUST stay under the nav-holder div.

I hope I've explained my okay. Thanks a bunch :eye:

**stbuchok** · 02-09-2011, 07:32 AM

When using z-index, do you have the position set to absolute? If not I don't believe it'll work.

**Whathadiv** · 02-09-2011, 12:25 PM

Yes I have positions set but it doesn't work on the image alone because it's inside the menuBuild so I would have to use z-index on the whole menu.

**chrishirst** · 02-09-2011, 01:10 PM

Quote:

Originally Posted by Whathadiv

Yes I have positions set but it doesn't work on the image alone because it's inside the menuBuild so I would have to use z-index on the whole menu.

elements that are positioned absolutely are not necessarily constrained by the parent element.