带悬停的导航栏下拉 [英] Navigation Bar with on hover drop down

问题描述

我无法在我的网站上创建此导航栏。

I'm having difficulty in creating this navigation bar on top of my site.

我在html atm上有以下内容。注意，这个导航栏是我的第二个navbar在那个页面，因此类和li和a。 （我还需要为子列表创建类/ id）

I have the following on my html atm. Note that this navigation bar is my 2nd navbar on that page, hence the classes for li and a. (Do I also need to make class/id for the sublist?)

<div id="navbar2">
      <ul>
          <li class="list"><a class="link" href="<?php echo base_url() ?>index.php/A">A</a></li>
          <li class="list"><a class="link" href="">B</a></li>
          <li class="list"><a class="link" href="">C</a></li>
          <li class="list"><a class="link" href="">D</a></li>
          <li class="list"><a class="link" href="">Browse</a>
              <ul>
                  <li><a href="">By Category</a>
                      <ul>
                          <li><a href="">k</a></li>
                          <li><a href="">l</a></li>
                          <li><a href="">m</a></li>
                          <li><a href="">n</a></li>
                          <li><a href="">o</a></li>
                          <li><a href="">p</a></li>
                          <li><a href="">q</a></li>
                          <li><a href="">r</a></li>
                      </ul>
                  </li>
                  <li><a href="">By Uploader</a></li>
              </ul>
          </li>
          <li class="list"><a class="link" href="">E</a></li>
      </ul>
 </div>

任何想法如何实现css？当我将鼠标悬停在浏览，我想它显示2下拉列表按类别和上传者，然后同时当鼠标悬停在'按类别'的顶部，我想要显示的子列表。当鼠标不在悬停时，我想要下拉/子列表消失。

Any idea how to implement the css? When I hover the mouse over to the 'Browse' I want it to show the 2 dropdown list 'By Category' and 'By Uploader', then at the same time when the mouse is hovering on top of 'By Category', I want the sublist to appear. When the mouse is not hovering, I want the the dropdown/sublist to disappear.

另外，当我在这个页面，我想列表'A

An additional, when I'm on this page, I would like the list 'A' to be darker background than the others (current link).

对不起，问一个newb问题，因为我是新建一个网站：）

Sorry for asking a newb question, as I'm quite new to building a website :)

感谢您的帮助！

推荐答案

c> position：relative 和 position：absolute ），我在 jsFiddle

Like mentioned before (position:relative and position: absolute), i've created a css example on jsFiddle

a { color: gray; }
#navbar2 li:first-child a { color: black } /* make the letter A black */
#navbar2 li li:first-child a { color: gray } /* all others gray */

#navbar2 {}

/* Level 1 */
#navbar2 ul { padding: 5px;}
#navbar2 li {
    display: inline;
    position: relative; /* set the li-elements to relative, so the child-elements will be positioned on the parent element */
    white-space: nowrap;
}

/* Level 2 */
#navbar2 ul ul {
    display: none;
    position: absolute;
    top: 15px;
    left: 0
}
#navbar2 li:hover ul { display: inline } /* show the second-level nav.. */
#navbar2 li:hover ul ul { display: none } /* but hide the 3rd */
#navbar2 li li {
    /* show the list, line after line */
    float:left;
    clear: left;
}

/* Level 3 */
#navbar2 ul ul ul {
    display: none; /* hide by default */
    width: 100px;
    background: #eee;
}
#navbar2 li li:hover ul {
    display: inline;
    left: 25px;
    z-index: 50;
}

jQuery是一个不错的选择，可以在IE6中使用，其中：hover不适用于除a-tag之外的元素。

jQuery is a good option, to get it work in IE6, where :hover doesn't work for elements except for the a-tag.

这篇关于带悬停的导航栏下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！