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

包裹您想要子菜单显示的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>

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

创建带图像的导航菜单？

1 个答案: