Question

我想将子导航或下拉菜单添加到现有导航中。

导航具有包含文本的png图像，即＆＃34; Home＆＃34;。我希望它，当用户鼠标悬停在其中一个上时，下拉更多页面，我希望下拉项目继续使用png，因为png允许透明背景，它可以只是没有盒子的文本，或背景。

对于下拉菜单，我可能会添加一个低不透明度的黑色背景，以便可以看到可能位于下拉列表下方的任何内容，但是我可以这样做吗，是否可以只使用html和css？

HTML：

<div id="container">
  <div id="header">
    <ul class="menu">
      <li class="btn_1"><a href="index.html">home</a></li>
      <li class="line"></li>
      <li class="btn_2"><a href="listen.html">listen</a></li>
      <li class="line"></li>
      <li class="btn_3"><a href="top20.html">top 20</a></li>
      <li class="line"></li>
      <li class="btn_4"><a href="ourteam.html">our team</a></li>
      <li class="line"></li>
      <li class="btn_5"><a href="sponsor.html">sponsor</a></li>
      <li class="line"></li>
      <li class="btn_6"><a href="articles.html">articles</a></li>
      <li class="line"></li>
      <li class="btn_7"><a href="contactus.html">contactus</a></li>
      <li class="line"></li>
      <li class="btn_8"><a href="contactus.html">downloads</a></li>
    </ul>
    <img style="padding-left:150px;" src="images/logo.jpg" alt="" name="logo" width="244" height="52" id="logo"/>

的CSS：

#header ul.menu{position:absolute; top:27px; left:30px; width:1000px}
#header ul.menu li{height:51px; margin-right:15px; float:left}
#header ul.menu li a{height:51px; display:block; text-indent:-20000px; }
#header ul.menu li a:hover{height:51px;}

#header ul.menu li.btn_1 a{width:58px; background:url(../images/btn_1.png) 0 14px no-          repeat; }
#header ul.menu li.btn_1 a:hover{width:58px; background:url(../images/btn_1_over.png) 0 14px no-repeat;}

#header ul.menu li.btn_2 a{width:65px; background:url(../images/btn_2.png) 0 14px no-repeat; }
#header ul.menu li.btn_2 a:hover{width:65px; background:url(../images/btn_2_over.png) 0 14px no-repeat;}

#header ul.menu li.btn_3 a{width:58px; background:url(../images/btn_3.png) 0 14px no-repeat; }
#header ul.menu li.btn_3 a:hover{width:58px; background:url(../images/btn_3_over.png) 0 14px no-repeat;}

#header ul.menu li.btn_4 a{width:95px; background:url(../images/btn_4.png) 0 14px no-repeat; }
#header ul.menu li.btn_4 a:hover{width:95px; background:url(../images/btn_4_over.png) 0 14px no-repeat;}

#header ul.menu li.btn_5 a{width:95px; background:url(../images/btn_5.png) 0 14px no-repeat; }
#header ul.menu li.btn_5 a:hover{width:95px; background:url(../images/btn_5_over.png) 0 14px no-repeat;}

#header ul.menu li.btn_6 a{width:95px; background:url(../images/btn_6.png) 0 14px no-repeat; }
#header ul.menu li.btn_6 a:hover{width:95px; background:url(../images/btn_6_over.png) 0 14px no-repeat;}

#header ul.menu li.btn_7 a{width:118px; background:url(../images/btn_7.png) 0 14px no-repeat; }
#header ul.menu li.btn_7 a:hover{width:118px; background:url(../images/btn_7_over.png) 0 14px no-repeat;}

#header ul.menu li.btn_8{margin-right:0}
#header ul.menu li.btn_8 a{width:118px; background:url(../images/btn_8.png) 0 14px no-repeat; }
#header ul.menu li.btn_8 a:hover{width:118px; background:url(../images/btn_8_over.png) 0 14px no-repeat;}

#header ul.menu li.line{width:1px; background:url(../images/linem.gif) 0 0 no-repeat}

如何使用图像作为按钮制作下拉导航菜单

0 个答案: