Question

我想在侧边栏中添加导航，但没有空间。

我想设置它，以便当我将鼠标悬停在诸如（链接）之类的单词上时，将出现一个列表。但我不确定我应该使用什么代码来实现这一目标。

这里可以看到一个例子：http://www.colourlovers.com/当你将鼠标悬停在浏览器上时，它会显示其他链接的列表。

<div id="navigation">

  <a href="http://aftermidnightworkouts.tumblr.com/tagged/healthyrecipes">Dear         
    Charlie</a><br>

   <a href="http://aftermidnightworkouts.tumblr.com/tagged  
    /healthyrecipes">Portfolio</a><br>

   <a href="http://aftermidnightworkouts.tumblr.com/tagged    
  /healthyrecipes">Aftermidnightworkouts</a><br>

   <a href="http://aftermidnightworkouts.tumblr.com/tagged  
     /healthyrecipes">Writings</a>   
         </div>

Answer 1

只需google for CSS下拉菜单，关于它的大量页面，您甚至可以生成它然后自己检查代码（例如here）。您只需要使用:hover选择器的一些css代码。

Answer 2

这里有一些代码可以帮助您入门：

http://jsfiddle.net/jonigiuro/ZsAQb/

<ul id="navigation">

  <li>
      <a href="http://aftermidnightworkouts.tumblr.com/tagged/healthyrecipes">Dear Charlie</a>
      <ul class="subnav">
          <li class="item">
              subnav item1
          </li>
          <li class="item">
              subnav item2
          </li>
      </ul>
  </li>
</ul>

最好使用像你这样的导航菜单列表，将它包装在导航标签（html5）中会更好。

诀窍是您在主导航的列表项中插入子导航的子列表，并将其默认设置为隐藏的css。当您将鼠标悬停在主导航项目上时，您只需将其定位为子导航并显示它

悬停时显示的导航列表。

2 个答案: