Question

有人可以推荐一个水平导航栏，其水平第二层使用图像。当用户将鼠标悬停在图像上时，鼠标会改变图像。

与此类似的东西.... http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/但是使用图像。

我开始研究这个并且已经走得很远，但由于我使用了二级导航栏的图像，我只能将我的图像显示为垂直而不是水平。

当次要导航设置为水平时，我知道下面的违规类。当我添加不同的类.... boyLink和girlLink到标签时，它开始显示垂直。我不确定我是否应该将menLink和girlLink添加到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>

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代码

    <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

您不再需要javascript鼠标悬停图片：

a:link { /* normal stuffs */ }
a:hover { /* "mouseover" stuffs */ }

至于结构，我没有看到你在我的帖子上发布的CSS有任何问题...也许你正试图在锚点中放置一个img标签：这是一个坏主意。您应该将图像作为背景css属性加载，这样它就不会影响您的格式。

Answer 2

如果你改变你的显示：内联到浮动：左边它会起作用。

水平导航栏，带有使用图像的水平第二层

2 个答案: