can someone please recommend a horizontal navigation bar with a horizontal second tier that uses images. When the user hovers over an image, a mouse over changes the image.Something similar to this....http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ but using images.i started off working on this and have gotten quite far , but since i used images for the secondary nav bar, i can only get my images to display as vertical rather than horizontal.I know the offending class is this one below, when the secondary nav is set to horizontal. As when i added different classes....boyLink and girlLink to the tag, it started displaying vertical. I'm not sure if i should be adding boyLink and girlLink to ul#topnav li span a ?
:
\[code\] /--Show subnav on hover--/ ul#topnav li span a { display: inline; } \[/code\] \[code\] ul#topnav { margin: 0; padding: 0; float: left; width: 970px; list-style: none; position: relative; font-size: 1.2em; }\[code\] ul#topnav li { float: left; margin: 0; padding: 0; background-color: Red; } ul#topnav li a { padding: 0px 0px 0px 0px; margin: 0px; display: block; text-decoration: none; } ul#topnav li span { float: left; margin: 0; padding: 0; position: absolute; left: 0; top: 25px; display: none; /*--Hide by default--*/ width: 970px; } ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/ ul#topnav li span a { display: inline; float:left; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/ ul#topnav li span a:hover { text-decoration: underline; display: inline; } img { border: none; } ul#topnav li #homeLink { width: 51px; height: 25px; display: block; background-repeat: no-repeat; background-image: url("Content/Images/Nav/nav01U.jpg"); } ul#topnav li:hover #homeLink:hover { background-image: url("Content/Images/Nav/nav01.jpg"); } ul#topnav li #collectionLink { width: 97px; height: 25px; display: block; background-repeat: no-repeat; background-image: url("Content/Images/Nav/nav02U.jpg"); } ul#topnav li:hover #collectionLink:hover { background-image: url("Content/Images/Nav/nav02.jpg"); } ul#topnav li:hover #contactUsLink:hover { background-image: url("Content/Images/Nav/nav06.jpg"); } ul#topnav li:hover span .girlLink { width: 38px; height: 31px; display: block; background-repeat: no-repeat; background-image: url("Content/Images/Nav/snav01U.jpg"); } ul#topnav li:hover span .girlLink:hover { background-image: url("Content/Images/Nav/snav01.jpg"); } ul#topnav li:hover span .boyLink { width: 37px; height: 31px; display: block; font-size: 10px; text-decoration: none; background-repeat: no-repeat; background-image: url("Content/Images/Nav/snav02U.jpg"); } ul#topnav li:hover span .boyLink:hover { background-image: url("Content/Images/Nav/snav02.jpg"); }</style>\[/code\]\[/code\]Html Code\[code\] [*] \[code\] <li> <a href="http://stackoverflow.com/questions/4178446/collection.aspx" id="collectionLink"> </a> <!--Subnav Starts Here--> <span> <a href="http://stackoverflow.com/questions/4178446/girl.aspx" class="girlLink"> </a> <a href="http://stackoverflow.com/questions/4178446/boy.aspx" class="boyLink"> </a> </span> <!--Subnav Ends Here--> </li></ul>\[/code\]\[/code\]
:
\[code\] /--Show subnav on hover--/ ul#topnav li span a { display: inline; } \[/code\] \[code\] ul#topnav { margin: 0; padding: 0; float: left; width: 970px; list-style: none; position: relative; font-size: 1.2em; }\[code\] ul#topnav li { float: left; margin: 0; padding: 0; background-color: Red; } ul#topnav li a { padding: 0px 0px 0px 0px; margin: 0px; display: block; text-decoration: none; } ul#topnav li span { float: left; margin: 0; padding: 0; position: absolute; left: 0; top: 25px; display: none; /*--Hide by default--*/ width: 970px; } ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/ ul#topnav li span a { display: inline; float:left; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/ ul#topnav li span a:hover { text-decoration: underline; display: inline; } img { border: none; } ul#topnav li #homeLink { width: 51px; height: 25px; display: block; background-repeat: no-repeat; background-image: url("Content/Images/Nav/nav01U.jpg"); } ul#topnav li:hover #homeLink:hover { background-image: url("Content/Images/Nav/nav01.jpg"); } ul#topnav li #collectionLink { width: 97px; height: 25px; display: block; background-repeat: no-repeat; background-image: url("Content/Images/Nav/nav02U.jpg"); } ul#topnav li:hover #collectionLink:hover { background-image: url("Content/Images/Nav/nav02.jpg"); } ul#topnav li:hover #contactUsLink:hover { background-image: url("Content/Images/Nav/nav06.jpg"); } ul#topnav li:hover span .girlLink { width: 38px; height: 31px; display: block; background-repeat: no-repeat; background-image: url("Content/Images/Nav/snav01U.jpg"); } ul#topnav li:hover span .girlLink:hover { background-image: url("Content/Images/Nav/snav01.jpg"); } ul#topnav li:hover span .boyLink { width: 37px; height: 31px; display: block; font-size: 10px; text-decoration: none; background-repeat: no-repeat; background-image: url("Content/Images/Nav/snav02U.jpg"); } ul#topnav li:hover span .boyLink:hover { background-image: url("Content/Images/Nav/snav02.jpg"); }</style>\[/code\]\[/code\]Html Code\[code\] [*] \[code\] <li> <a href="http://stackoverflow.com/questions/4178446/collection.aspx" id="collectionLink"> </a> <!--Subnav Starts Here--> <span> <a href="http://stackoverflow.com/questions/4178446/girl.aspx" class="girlLink"> </a> <a href="http://stackoverflow.com/questions/4178446/boy.aspx" class="boyLink"> </a> </span> <!--Subnav Ends Here--> </li></ul>\[/code\]\[/code\]