Question

我正在尝试使用此导航菜单。主菜单工作正常，并按预期工作。但是，当您将鼠标悬停在下拉元素上时，无论我尝试做什么，子菜单中都会丢失图像。

这是我的代码：

    #navbar {
        height: 50px;
        border: 0px solid #ffffff;
        border-radius: 8px 8px 0px 0px;
        line-height: 100%;
        list-style: none;
        text-align: center;
        background: transparent url("http://www.elhrodin.com/wow/test/images/navmenu.gif") repeat-x;
        background-size: 100% 100%;
    }

    #navbar a:hover {
        background: transparent url("http://www.elhrodin.com/wow/test/images/navmenu_h.gif") repeat-x;
        background-size: 100% 100%;
        text-decoration: none;
        text-shadow: 0px 2px 0px rgba(0,0,0,1);
    }

    /* Dropdown menu */
    .dropdown, .dropdown * { margin: 0; padding: 0; list-style: none; }
    .dropdown { line-height: 1.0; }
    .dropdown ul { position: absolute; top: -999em; width: 160px; /* left offset of submenus need to match (see below) */ }
    .dropdown ul li { width: 100%; }
    .dropdown li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
    .dropdown li { float:left; display:inline;  position: relative; }
    .dropdown a {  position: relative; }
    .dropdown li:hover ul,
    .dropdown li.sfHover ul { left: 0; top:50px; /* match top ul list item height */ z-index: 99; }
    ul.dropdown li:hover li ul,
    ul.dropdown li.sfHover li ul { top: -999em; }
    ul.dropdown li li:hover ul,
    ul.dropdown li li.sfHover ul { left: 160px; /* match ul width */ top: 0; }
    ul.dropdown li li:hover li ul,
    ul.dropdown li li.sfHover li ul { top: -999em; }
    ul.dropdown li li li:hover ul,
    ul.dropdown li li li.sfHover ul { left: 160px; /* match ul width */ top: 0; }

    .dropdown {
        text-align: center;
    }

    .dropdown a {
        padding: 8px 10px;
        margin:0 5px 0 0;           
        text-decoration: none;
        text-shadow: 0px 1px 0px rgba(0,0,0,1);
        line-height:1.5;
        font-size: 24px;
        color: #faa100;
        display:block;
    }

    .dropdown a:hover {
        color:#faa100;
    }

    .dropdown ul { 
        text-align: left;
        margin: 0;
        border-top: none;
        z-index:999;
        padding:5px 0;
    }

    .dropdown ul ul { 
        top:0;
        padding:0 0 5px;
    }

    .dropdown .current_page_item a,
    .dropdown .current-cat a,
    .dropdown .current-menu-item a,
    .dropdown .current_page_item a,
    .dropdown .current-cat a,
    .dropdown .current-menu-item a {
        outline:0;
        color: #faa100;
        font-weight:bold;           
        text-decoration: none;
        text-shadow: 0px 2px 0px rgba(0,0,0,1);
     }
    .dropdown .current_page_item ul a,
    .dropdown .current-cat ul a,
    .dropdown .current-menu-item ul a,
    .dropdown .current_page_item ul a,
    .dropdown .current-cat ul a,
    .dropdown .current-menu-item ul a {
        outline:0;
        font-weight:normal;
        color:#faa100;          
        text-decoration: none;
        text-shadow: 0px 2px 0px rgba(0,0,0,1);
    }

    .dropdown li ul li {
        color:#faa100;
        float:left;
        margin:0;
        padding:0;          
        text-decoration: none;
        text-shadow: 0px 2px 0px rgba(0,0,0,1);
     }

    .dropdown li ul li a {
        color:#faa100;
        margin:0;
        padding:7px 10px;
        font-size:24px;         
        text-decoration: none;
        text-shadow: 0px 2px 0px rgba(0,0,0,1);
    }

    .dropdown li:hover a { 
        color:#faa100;          
        text-decoration: none;
        text-shadow: 0px 2px 0px rgba(0,0,0,1);
    }

    .dropdown li:hover ul a {
        color:#faa100;          
        text-decoration: none;
        text-shadow: 0px 2px 0px rgba(0,0,0,1);
    }

    .dropdown li ul a:hover {       
        color:#faa100;          
        text-decoration: none;
        text-shadow: 0px 2px 0px rgba(0,0,0,1);
    } 

    .dropdown a.sf-with-ul {
        min-width:1px; 
    }

    .dropdown .arrow {
        font-size: 15px;
        line-height: 0%;
        background: transparent;            
        text-decoration: none;
        text-shadow: 0px 2px 0px rgba(0,0,0,1);
    }

基础html：

    <div id="navbar">
                <ul id="mainmenu" class="dropdown">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="bio.html">Biography</a></li>
                        <li><a href="stats.html">Statistics</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li><a href="#">Adventures <span class="arrow">&#9660;</span></a>
                                <ul id="sub-menu">
                                    <li><a href="#">Coming Soon to a Reader</a></li>
                                    <li><a href="#">Coming Soon</a></li>
                                    <li><a href="#">Coming Soon</a></li>
                                    <li><a href="#">Coming Soon</a></li>
                                </ul>
                        </li>
                </ul>
    </div>

谢谢！

Answer 1

您没有为下拉列表元素指定图像背景，请将其添加到您的代码中：

.dropdown li:hover ul li{
  background: transparent url("http://www.elhrodin.com/wow/test/images/navmenu_h.gif") repeat-x;
}

如何在导航菜单的下拉列表中显示图像

1 个答案: