Drop Down Menu

Replacing images with text

[wa9578]

Hi all,

I have a drop down menu (with the help of Suzy) which appears fine :) I am however trying to alter the code to make it so the sub drop down menu, is a list again (at the minute it shows an image(and just one in the list))

the code I have is;

<li><a href="#" class="name">Basics</a> <a href="/shared/sdahsfftx0" class="img"><img style="width: 100px; height: 20px;src="#" alt="Keyboard"></a></li> <---although this apears fine it needs to be words and able to be in a list but adding <ul><li> didn't seem to work :S ---->
<li><a href="#" class="name">Word</a></li>
<li><a href="#" class="name">Excel</a></li>
<li><a href="#" class="name">Ancestry</a></li>
<li><a href="#" class="name">Crafts</a></li>
<li><a href="#" class="name">Internet</a></li>
<ul>
<li><a href="#" class="name">eBay</a> <a href="/shared/sv3j2nttmp" class="img"><img style="width: 100px;height: 20px;src="#" alt="Ebay"></a></li><---although this apears fine it needs to be words and able to be in a list but adding <ul><li> didn't seem to work :S this will have at least 7 options to choose from---->
</ul></li>
<li><a href="#" >News</a></li>

and the css is (I think this is what you need);

#pageHeader
{
background-color: #ffffff;
color: #000000;
position: relative;
top: -10px;
}


#siteNavigation {

top:80px;
left: 0px;
width: 100%;
min-width: 960px;
background-color: #ffffff;
border-bottom: 1px solid #ff0000;
border-top: 1px solid #ff0000;
text-align:center;

 
}
#siteNavigation a.active, #siteNavigation a.active:hover, #siteNavigation a.active:visited
{
background-color: #ffffff;
color: #ff0000;
cursor: default;}

 
#siteNavigation ul {
margin:0px;
padding:0px;
line-height:30px;
text-align:center;
z-index: 1;

 
}
#siteNavigation li {
margin:0px;
padding:0px;
list-style:none;
display: inline-block;
position:relative;
background: #FFF;
z-index: 1;

}
 
#siteNavigation ul li a {
text-align:center;
font-family: "Comic Sans MS", cursive;
text-decoration:none;
height: 30px;
width: 90px;
display: inline-block;
color:#000;
border-top: 0px solid #ff0000;
border-bottom: 0px solid #ff0000;
z-index: 1;

 
}
#siteNavigation ul ul { /**this is the thing I used to hide the drop down menu**/
position:absolute;
visibility:hidden;
top:32px;
z-index: 1;

}

#siteNavigation ul ul li {/* so the absolute img takes position fromm it */
position: relative;
z-index: 1;

}

#siteNavigation ul ul a.name {
display: block;
background: #ffffff;
width: 100px;
height: 28px;
border-bottom: 1px solid #ff0000;
line-height: 30px
z-index: 1;

}

#siteNavigation ul ul a.name:hover {
background: #fff;
z-index: 1;
}

#siteNavigation ul ul a.img {
visibility:hidden; /* hide the image until name is hovered on */
position: absolute;
left: 100px;
top: 0;
background: #000;
width: 100px;
height: 28px;
border-bottom: 1px solid #ff0000;
z-index: 1;
}

#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;
background:none;
z-index: 1;}
/*****************************************/
 
#siteNavigation li:hover {
background:#fff;
z-index: 1;
 
}
 
#siteNavigation ul li:hover ul li a:hover {
background:#F33;
color:#FFF;
z-index: 1;

}

Many thanks in advance, it might not seem it but I am learning and Suzy sorry to be a proper pain in the perverbial :)

[wa9578]

I've tried changing the last lot of lists to class="name2" (figured it wouldn't work if left at class="name") not sure if it even exists.

I've tried a number of other things too extra ul/li but for the life of me can't remember

I obviously then added in #name2 to the css and used the same stuff as the hover.img thing

sorry tired so might not make much sense to some but hoping I am to some lol am still playing with it

[webprutser]

I have been busy lately with the same sort of menu like you and think I can help, but maybe you can let me know if this problem is still unsolved, since your post is dated Jan. 27th.

[wa9578]

Hi Pruster... yeah its resolved now :) with many pain staking hours with me trying to understand the coding and why things do what ever... and Many hours of Suzy's patience trying to dumb things down for me :)

[webprutser]

I'm glad things are working. You can get real puzzled every now and then, why does it act the way it acts ....
Good luck.