Question

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 ?
:

/--Show subnav on hover--/
ul#topnav li span a
{
display: inline;
}


ul#topnav
{
margin: 0;
padding: 0;
float: left;
width: 970px;
list-style: none;
position: relative;
font-size: 1.2em;
}

    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>

Html Code

    <li>
        <a href="collection.aspx" id="collectionLink">&nbsp; </a>

        <!--Subnav Starts Here-->
        <span>
            <a href="girl.aspx" class="girlLink">&nbsp; </a>
            <a href="boy.aspx" class="boyLink">&nbsp; </a>
        </span>
        <!--Subnav Ends Here-->

    </li>

</ul>

Answer 1

If you change your a’s display: inline to float: left it will work.