创建带有图像的导航菜单？

Question

我使用notepad ++尝试创建一个带有图像的导航菜单，但是我似乎遇到了麻烦，因为当我将鼠标悬停在下拉列表上时，下拉列表不会弹出，我的代码如下：

<div id="banner" class="Banner"><div id="nav" class="navigation"><div id="Logo" Class="Logo"><div id="title" class="title">

<div id="nav_wrapper">
<ul>
<li><a href="index.html"><img src="home_pressed.png" class="home" alt="home"></a></li>
<li><a href="chalets.html"><img src="chalets_unpressed.png" class="chalets" alt="chalets"></a></li>
<li><a href="index.html"><img src="yourstay_unpressed.png" id="yourstay" class="yourstay" alt="yourstay"></a></li>
    <ul>
    <li class="item"><a href="upgrades.html"><img src="upgrades.png" class="upgrades"></a></li>
    <li class="item1"><a href="cancellation.html"><img src="cancellations.png" class="cancellation"></a></li>
    </ul>
<li><a href="index.html"><img src="news_unpressed.png" class="news" alt="news"></a></li>
<li><a href="index.html"><img src="specialoffers.png" class="specialoffers" alt="specialoffers"></a></li>
<li><a href="index.html"><img src="sitedetails_Unpressed.png" class="sitedetails" alt="sitedetails"></a></li>
<li><a href="index.html"><img src="aboutus_unpressed.png" class="aboutus" alt="about us"></a></li>
</ul>
</div>

http://jsfiddle.net/27hHY/

尽管您在本地化后看不到图像，但我希望您能提供有关如何解决此问题的建议？

您可以在jsfiddle上查看css，因此更具可读性，更容易查看其工作方式。

Answer 1

Wrap You subnav在希望子菜单显示在LI中的UL列表中。 像这样

<ul>
<li><a href="/stuff">stuff</a></li>
<li><a href="/stuff2">stuff2</a></li>
<li class="dropdown"><a href="/drop">drop</a>
    <ul class="subnav">
    <li><a href="/stuff">dropdown1</a></li>
    <li><a href="/stuff">dropdown2</a></li>
    <ul>
</li>
<li><a href="/contact>contact</a></li>
</ul>

这样，当您将鼠标悬停在列表项上时，您希望子导航包含在节点内。