Question

我有两个链接是导航栏的一部分，它们有下拉列表。我想要的是每个下拉的背景图像;仙女的图像，颅骨的不同图像。我认为，我非常接近，但我不确定如何设置它。在阅读了几篇文章后，Ryan Rahif于5月19日18:58发布的文章非常接近我想要的内容。我需要创建另一个悬停div吗？我是否需要为每个下拉菜单创建一个悬停？

谢谢你

<!Doctype HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <title>Fairies - Tabbed Dropdown</title>

    <link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="container">

        <div id="nav">
            <ul>
                <li><a href="#">World of Fairies</a></li>
                <li><a href="#">Fairihabitants</a>
                    <ul>
                        <li><a href="#">Fairies</a></li>
                        <li class="cranlink"><a href="#">Craniums</a></li>
                    </ul>
                </li>
                <li><a href="#">Fairi-bitats</a>
                    <ul>
                        <li><a href="#">Dreams</a></li>
                        <li><a href="#">Tinkling Bells</a></li>
                        <li><a href="#">Rain Drops</a></li>
                    </ul>
                </li>
                <li><a href="#">Fairy Dust</a></li>
            </ul>
        </div><!--/#nav-->

    </div><!--/#container-->

</body>
</html>

/* CSS Document - Stylesheet.css */

/* BODY AND CONTAINER
-------------------------------------- */
body {
    font-size: 76%;
    padding: 0px;
    margin: 0px;
}

#container {
    width: 650px;   
    padding: 0px;
    margin: 0 auto 0 auto;
}


/* MAIN NAVIGATION
-------------------------------------- */
#nav {
    float: left;
    width: 650px;
    height: 50px;
    border-bottom: 2px solid #000;
    padding: 0px;
    margin: 100px 0 0 0;
}

#nav ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

#nav ul li {
    float: left;
    padding: 0px;
    margin: 0px;
}

#nav ul li a {
    float: left;
    width: 150px;
    height: 50px;
    background-image: url(../images/fairy-gate.jpeg);
        background-repeat: repeat-x;
    font-family: Arial, Helvetica, sans-serif;
        font-size: 1.4em;
        line-height: 50px;
        color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 0px;
    margin: 0 0 0 10px;
}

#nav ul li a:hover {
    background-image: url(../images/bg-nav-hover.png);
        background-repeat: repeat-x;
}





/* DROPDOWN MENU - MAIN NAVIGATION
-------------------------------------- */
#nav li ul {
    display: none;
}

#nav li:hover ul {
    width: 150px;
    display: block;
    visibility: visible;
    position: relative;
        top: 0px;
    clear: both;
    z-index: 1;
}


.cranlink {
    background-image:url(../images/craniums.jpg);

如何为每个悬停链接设置不同的背景图像

0 个答案: