logo标签列表

使用子菜单添加子子菜单到带有子菜单的CSS菜单

htmlcssmenu
3
我有一个CSS菜单，其中包含子菜单。我想知道如何添加子菜单的子菜单。例如，当我悬停在主菜单项上时，子菜单弹出，然后当我悬停在子菜单项上时，另一个子菜单弹出。这是我现在正在使用的JS Fiddle链接：http://jsfiddle.net/PrinceofVegas/Dg3yQ/4/。以下是我正在使用的CSS：
.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
}
.menu ul{
    background:#006633;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
}
.menu li{
    float:left;
    padding:0px;
}
.menu li a{
    background:#006633 url("../images/seperator.gif") bottom right no-repeat;
    color:#ffffff;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
    background: #003f20 url("../images/hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}
.menu li ul{
    background:#006633;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
}
.menu li:hover ul{
    display:block;
}
.menu li li {
    background:url('../images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
}
.menu li:hover li a{
    background:none;
}
.menu li ul a{
    display:block;
    height:30px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
    background:#003f20 url('../images/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
}
.menu p{
    clear:left;
}

以下是我所使用的 HTML 代码：
<div class="menu">
    <ul>
        <li><a href="#" target="_self" >Main Item 1</a></li>
        <li><a href="#" target="_self" >Main Item 2</a>
            <ul>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
            </ul>
        </li>
        <li><a href="#" target="_self" >Main Item 3</a></li>
        <li><a href="#" target="_self" >Main Item 4</a>
            <ul>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
            </ul>                
        </li>
    </ul>
</div>
2个回答
11

我会如何处理您所需的内容： http://jsfiddle.net/Dg3yQ/26/

我对CSS进行了一些修改，减少了几百个字符的代码，并且我相信它实现了你想要的功能。希望这可以帮到您。

编辑：在此答案中添加了一个带有注释的简化代码示例，说明如何完成这些子菜单。

#nav {
    list-style:none inside;
    margin:0;
    padding:0;
    text-align:center;
    }

#nav li {
    display:block;
    position:relative;
    float:left;
    background: #006633; /* menu background color */
    }

#nav li a {
    display:block;
    padding:0;
    text-decoration:none;
    width:200px; /* this is the width of the menu items */
    line-height:35px; /* this is the hieght of the menu items */
    color:#ffffff; /* list item font color */
    }
        
#nav li li a {font-size:80%;} /* smaller font size for sub menu items */
    
#nav li:hover {background:#003f20;} /* highlights current hovered list item and the parent list items when hovering over sub menues */



/*--- Sublist Styles ---*/
#nav ul {
    position:absolute;
    padding:0;
    left:0;
    display:none; /* hides sublists */
    }

#nav li:hover ul ul {display:none;} /* hides sub-sublists */

#nav li:hover ul {display:block;} /* shows sublist on hover */

#nav li li:hover ul {
    display:block; /* shows sub-sublist on hover */
    margin-left:200px; /* this should be the same width as the parent list item */
    margin-top:-35px; /* aligns top of sub menu with top of list item */
    }
<ul id="nav">
  <li><a href="#">Main Item 1</a></li>
  <li><a href="#">Main Item 2</a>
    <ul>
      <li><a href="#">Sub Item</a></li>
      <li><a href="#">Sub Item</a></li>
      <li><a href="#">SUB SUB LIST &raquo;</a>
        <ul>
          <li><a href="#">Sub Sub Item 1</a>
          <li><a href="#">Sub Sub Item 2</a>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Main Item 3</a></li>
</ul>

这正是我一直在寻找的，谢谢！也感谢您进行了仔细的清理，看到这样的更改有助于我成为更好的程序员 :) - Jeff Thomas
1
我很高兴能帮到你。这里还有一个稍微更干净的版本http://jsfiddle.net/Dg3yQ/29/。之前贴出来的jsFiddle中有一些无关的属性。祝你在项目中好运。 - IMI
在最新版本的Firefox中可以工作，但在IE 10中却无法工作，原因不明。链接（http://sdrv.ms/11tEsgN） - ablaze
它在IE10中可以工作。您的<html>标签缺少“！DOCTYPE”，这会导致IE出现问题。它应该是<!DOCTYPE html>。此外，此菜单是纯html / CSS，不需要jquery。如果您没有将其用于其他任何内容，则可以安全地从代码中删除<script src="jquery-1.10.2.min.js">。 - IMI
很好的例子。它運作得很好。我該如何修改上述內容以允許菜單項目的文本換行？我已嘗試在CSS / nav的許多不同級別使用word-wrap：break-word，但似乎無法使其正常工作？ - user3138025
你好，抱歉。我在 CSS 中漏掉了一个分号。我的错。上面的 CSS 带有 display:block，运行得非常好。 - user3138025
0

如果您想使用CSS过渡效果（这在display属性上不起作用），可以将display替换为opacity。为了解决元素即使隐藏也占用空间的问题，您可以将整个菜单放入一个单独的div中，该div被绝对定位并处于最高的z-order（菜单本来就应该是这样）。然后，没有任何东西会挡住菜单，因为菜单将是顶层中唯一的项目。

这是我修改后的原始示例，用于CSS过渡效果：

#menu {
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
}

#nav {
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    text-align:center;
    

    }

#nav li {
    display:inline-block;
    position:relative;
    float:left;
    background: #006633;
    }

#nav li a {
    display:inline-block;
    width:200px;
    line-height:35px;
    padding:0;
    text-decoration:none;
    color:#ffffff;
    }
    
#nav li li {float:left; #006633;}
    
#nav li li a {
    display:block;
    font-size:12px;
    
    opacity:1;
    transition: opacity 1s;
}
    
#nav li:hover {background:#003f20;}

/*--- Sublist Styles ---*/
#nav ul {
    position:absolute;
    padding:0px;
    left:0;
    /* display:none; */
    opacity:0;
    transition: opacity 1s;
    }

/*--- Hide Sub Sublists ---*/
#nav li:hover ul ul {
    /* display:none; */
    opacity:0;
    transition: opacity 1s;
}

/*--- Sublevel UL's display and position on hover ---*/
#nav li:hover ul {
   /* display:block; */
   opacity:1;
   transition: opacity 1s;
   } 
   
/* had to make the position NOT based on hover, but permanent 
for the transition to work , thus moved it from POS_001 */
#nav li li  ul {
   margin-left:200px;
   margin-top:-35px;

}

#nav li li:hover ul {
   /* POS_001 */

   
   /* display:block; */
   opacity:1;
   transition: opacity 1s;
}
<div id="menu">
        <ul id="nav">
            <li><a href="#" target="_self" >Main Item 1</a></li>
            <li><a href="#" target="_self" >Main Item 2</a>
                <ul>
                    <li><a href="#" target="_self" >Test Sub Item</a></li>
                    <li><a href="#" target="_self" >SUB SUB LIST 1 &gt;&gt;</a>
                        <ul>
                            <li><a href="#" target="_self" >Sub Sub Test Item 1</a>
                            <li><a href="#" target="_self" >Sub Sub Test Item 2</a>
                        </ul>
                    </li>
                    <li><a href="#" target="_self" >SUB SUB LIST 2 &gt;&gt;</a>
                        <ul>
                            <li><a href="#" target="_self" >Sub Sub Test Item 3</a>
                            <li><a href="#" target="_self" >Sub Sub Test Item 4</a>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#" target="_self" >Main Item 3</a></li>
        </ul>
    </div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接