Hi everyone,
I've been working at this for a while now and it's time to get some help :nono:
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: