如何实现子菜单效果？

我试图实现用户悬停在F.A.Q上的子菜单效果。链接和一个子菜单下降，并显示另外两个选项 - 但我似乎甚至没有得到正确的HTML（没关系jQuery），任何人都可以帮助我？出于某种原因，子菜单中的列表项不会单独显示，尽管我添加了“display：block”元素，而且我无法让子菜单真正出现在F.A.Q的下面。链接= \如何实现子菜单效果？

http://jsfiddle.net/Kk8uw/

<nav id="navigation"> 
    <ul> 
     <li><a href="/">Home</a> 

     </li> 
     <li><a href="/catalog.php">Catalog</a> 

     </li> 
     <li><a href="/build.php">Create A Sword</a> 

     </li> 
     <li><a href="/about.php">About Us</a> 

     </li> 
     <li><a href="/faq.php">F.A.Q.</a> 

     </li> 
     <ul id="submenu"> 
      <li><a href="/measurement.php">Measuring</a> 

      </li> 
      <li><a href="/terminology.php">Terminology</a> 

      </li> 
     </ul> 
     <li><a href="/contact.php">Contact Us</a> 

    </ul> 
</nav>

CSS

#navigation { 
    background: #000; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    position: relative; 
    height: 36px; 
} 
#navigation ul { 
    list-style-type: none; 
    margin-left: 10px; 
    padding: 0px; 
} 
#navigation ul li { 
    float: left; 
    display: block; 
    border-right: 1px solid #444; 
} 
#navigation ul li a { 
    display: block; 
    padding: 10px; 
    font-size: 13px; 
    text-decoration: none; 
    color: #ffffff; 
    text-transform: uppercase; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
} 
#navigation ul li a:hover { 
    color: maroon; 
} 
#navigation ul li:first-child a { 
    padding-left: 0px; 
} 
#submenu { 
    position: absolute; 
    left: 90px; 
    list-style: none; 
    top: 30px; 
    background: #222222; 
} 
#navigation ul#submenu li a { 
    display: block; 
    padding: 5px 5px 13px 0px; 
} 
#navigation ul#submenu li { 
    display: block; 
    border: none; 
}

来源

2013-08-06 Tai M.

：http://jsfiddle.net/techsin/FtPvf/1/embedded/result/我正想回答，但samething一直回答已经三次了。 –

入住此演示：http://jsfiddle.net/kP4jt/

HTML代码

<ul> 
    <li><a href='#'>One</a></li> 
    <li><a href='#'>Two</a></li> 
    <li><a href='#'>Three</a></li> 
    <li><a href='#'>Four</a></li> 
    <li><a href='#'>Five</a> 
     <ul> 
      <li><a href='#'>Sub Menu 1</a></li> 
      <li><a href='#'>Sub Menu 2</a></li> 
      <li><a href='#'>Sub Menu 3</a></li> 
     </ul> 
    </li> 
</ul>

CSS代码

* { padding: 0; margin : 0; } 
ul li { 
    float : left; 
    list-style-type : none; 
    position : relative; 
} 
ul li a { 
    display : block; 
    padding : 5px 20px; 
    background-color : #eee; 
    text-decoration : none; 
    border-right : 1px solid #ccc; 
    border-bottom : 1px solid #ccc; 
} 
ul ul { 
    display : none; 
    position : absolute; 
    left : -1px; 
} 
ul ul li { float : none; } 
ul li:hover ul { display : block; } 
ul ul a { 
    border-left : 1px solid #ccc; 
    width : 80px; 
}

在HTML需要把子菜单 - <ul>一个<li>标签内。

根据需要添加效果。

来源

2013-08-06 01:49:14

添加到您的风格，应该让你在正确的方向前进：

#navigation ul#submenu{ 
display:none; 
} 
#navigation ul:hover ul#submenu 
{ 
display:block; 
}

来源

2013-08-06 01:51:29 chiliNUT

问题是你继承了#navigation UL里选择float属性。选择器的目标是#navigation容器中包含的任何li元素。所以你可以添加一个新的选择器来将float值设置为none。

#navigation #submenu li { 
    float: none; 
}

但是，使用id的样式将导致一个臃肿的样式表和！重要的指令覆盖。我建议使用类选择器来避免设置css选择器的特殊性并最大限度地重用代码。

我注意到的另一件事是，你错过了最后一个菜单项上的结束标记。我为你做一个快速的jsfiddle：使用下面的问题提到的技术

http://jsfiddle.net/beyondhyper/wMpgJ/3/

来源

2013-08-06 02:17:26 Derick

同意这种情况并不需要任何ID – chiliNUT

如何实现子菜单效果？

回答

相关问题