Javascript 如何在选项卡中添加下拉菜单？

我在网站上完成了一个标签的创建，现在我想在我的任何标签上添加下拉菜单，我该怎么做

我的Jsf代码：

 var tabLinks = new Array();
    var contentDivs = new Array();
    document.getElementsByTagName('body')[0].onload = basla();

    function basla() {

      var tabListItems =  document.getElementById('anatablar').children;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName1( tabListItems[i], 'A' );
          var id = getHash1( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab1;
        tabLinks[id].onfocus = function() { this.blur(); };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabIcerik hide';
        i++;
      }
    }

    function showTab1() {
      var selectedId = getHash1( this.getAttribute('href') );

      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
            console.log("Put a message here."+id);
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabIcerik';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabIcerik hide';
        }
      }      
      return false;
    }

    function getFirstChildWithTagName1( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash1( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

如何将下拉菜单添加到此表格？如“DOZ”选项卡中的站点所示

---

提前感谢。：）

使用库更容易做到这一点。 尝试引导。看一个例子

www.vademcumonline.com使用相同的方法；）

嘿，

这可以通过使用纯css，通过使用显示属性

在JSFIDLE上检查以下代码：

ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}

   body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
      ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
      ul#tabs li { display: inline; }
      ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
      ul#tabs li a:hover { background-color: #f1f0ee; }
      ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
      div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
      div.tabContent.hide { display: none; 

ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}