Forum Moderators: not2easy
<li><a href="#">Team</a>
<ul>
<li><a href="#" class="name">Lucy</a> <a href="#" class="img"><img src="lucycard.jpg alt="Lucy"></a></li>
<li><a href="#" class="name">Hannah</a> <a href="#" class="img"><img src="hannahcard.jpg" alt="Hannah"></a></li>
<li><a href="#" class="name">Phil</a> <a href="#" class="img"><img src="philcard.jpg" alt="Phil"></a></li>
<li><a href="#" class="name">Clare</a> <a href="#" class="img"><img src="clarecard.jpg" alt="Clare"></a></li>
<li><a href="#" class="name">Carly</a> <a href="#" class="img"><img src="carlycard.jpg" alt="Carly"></a></li>
</ul> <!--end inner ul-->
</li> <!-- end team LI -->
#siteNavigation ul ul { /**this is the thing I used to hide the drop down menu**/
position:absolute;
visibility:hidden;
top:32px;
}
#siteNavigation ul ul li {/* so the absolute img takes position fromm it */
position: relative;
}
#siteNavigation ul ul a.name {
display: block;
background: #dad;
width: 100px;
height: 28px;
border: 1px solid #000;
border-width: 1px 0;
line-height: 30px
}
#siteNavigation ul ul a.name:hover {
background: #eee;
}
#siteNavigation ul ul a.img {
visibility:hidden; /* hide the image until name is hovered on */
position: absolute;
left: 100px;
top: 0;
background: #eee;
width: 100px;
height: 100px;
}
#siteNavigation ul li:hover ul,
#siteNavigation ul ul li:hover a.img { /* first one shows drop down list, second one shows hidden image link when name is hovered on */
visibility:visible;
}
:hoverul li {position: relative;}ul li:hover {
z-index: 1000;
}ul li ul {
position: absolute: top: 0; left: 0;
display: none;
}
ul li:hover ul {
display: block;
}li:hover
Lol yeah I noticed that too, at least I gave you credit for your coding though
I've just kinda cheated atm and whacked z-index in pretty much everywhere. Kind of in a funny mood cos all my work for the last year has gone bye bye so just doing the quick way and will fix it later after I've sorted out encryption issues and grrr rraaarrrr anyone got vodka?
I'm new here, why would it better to open a new discussion?
...but I can't find anything with #name and #img.there is nothing with them as ID's # is the symbol for a CSS ID, however there is for them as classes (.) notation in the CSS
#siteNavigation ul ul a.name {}
#siteNavigation ul ul a.name:hover {}
#siteNavigation ul ul a.img {}
#siteNavigation ul ul li:hover a.img {}
....
<li><a href="#">Team</a>
<ul>
<li>
<a href="#" class="name">Lucy</a>
<a href="#" class="img"><img src="lucy.jpg" alt="Lucy"></a>
</li>
...<div id= "siteNavigation">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Team</a>
<ul>
<li><a href="#"><img src="lucy.jpg" alt="Lucy"></a></li>
<li><a href="#"><img src="hannah.jpg" alt="Hannah"></a></li>
<li><a href="#"><img src="phil.jpg" alt="Phil"></a></li>
<li><a href="#"><img src="phil.jpg" alt="Phil"></a></li>
<li><a href="#"><img src="Carly.jpg" alt="Carly"></a></li>
<li><a href="#"><img src="James.jpg" alt="James"></a></li>
</ul> <!--end inner ul-->
</li> <!-- end team LI -->
<li><a href="#">Trainees</a></li>
</ul><!-- End main UL -->
</div> <!-- //siteNavigation -->
#siteNavigation ul {
width: 250px;
background: #eee; /* grey */
}
#siteNavigation ul li {/* so the second level takes position from it */
position: relative;
}
#siteNavigation ul li a {
display: block;
height: 40px;
}
#siteNavigation ul ul {
visibility:hidden; /* to initially hide the drop down menu */
position:absolute;
top:0;
left: 100px;
width: 150px;
background: #fee; /* pink */
}
#siteNavigation ul li:hover ul { /* reveals second level when hovering on the first */
visibility:visible;
}
#siteNavigation ul ul li {
height: 50px; /* height of second level list element matched to image height */
}
#siteNavigation ul ul a img { /* image dimensions */
display: block;
width: 100px;
height: 50px;
}
