Question

好的，所以这里我做了这个导航栏的交易，感谢在线教程，下面的代码，一切正常但是下拉菜单，我盘旋，没有任何反应，我一直在奴役过了好几个小时！非常感谢您的帮助！我知道我已经接近正确但但我无法弄清楚！再次感谢您的帮助。

<style>

header { font-family: 'blades_gf_freeregular', Futura, Arial, sans-serif; }
nav { height: 41px; background: linear-gradient( #1e7995, #1c2c3f); }
nav ul { margin: 0; }
nav, ul.submenu { background: linear-gradient( #1e7995, #1c2c3f); border-radius: 5px; padding: 0; }
nav ul li { display: block; width: 150px; text-align: center; float: left; margin: 0; padding: 0; }
nav li:hover { background: rgba(0,0,0,0.4); }
nav a { color:#fff; text-decoration: none; display: block; padding: 10px; }
nav ul.submenu { background: rgba(0,0,0,0.8); position: relative; boredr-radius: 0 0 5px 5px; height: 0px; overflow: hidden; }
nav ul.submenu li { float: none; text-align: left; border-bottom: 1px solid rbga(0,0,0,0.3); }

nav ul li { transition: .3s all linear; }
nav ul li:hover ul.submenu { height: 126px; }

</style>


<header>
<p><img src="assets/images/header32.png" alt="before and after effects title image"/></p>
<nav role="navigation" aria-label="Main menu">

<ul role="menubar">
<li role="menuitem" tabindex="0"><a href="#">Home</a></li>
<li role="menuitem" aria-haspopup=true tabindex="0"><a href="#">Tutorials</a></li>

<ul class="submenu" role="menu" aria-hidden=true>

<li role="menuitem" tabindex="-1"><a href="pre-pro.html">Pre-Production</a></li>
<li role="menuitem" tabindex="-1"><a href="production.html">Production</a></li>
<li role="menuitem" tabindex="-1"><a href="post.html">Post</a></li>

</ul>
<li role="menuitem" tabindex="0"><a href="#">Films</a></li>
</ul>
</nav>
</header>

Answer 1

您过早关闭了子菜单应属于的父<li>元素。

http://jsfiddle.net/GL87s/

<header>
<p><img src="assets/images/header32.png" alt="before and after effects title image"/></p>
<nav role="navigation" aria-label="Main menu">

<ul role="menubar">
<li role="menuitem" tabindex="0"><a href="#">Home</a></li>
<li role="menuitem" aria-haspopup=true tabindex="0"><a href="#">Tutorials</a>

<ul class="submenu" role="menu" aria-hidden=true>

<li role="menuitem" tabindex="-1"><a href="pre-pro.html">Pre-Production</a></li>
<li role="menuitem" tabindex="-1"><a href="production.html">Production</a></li>
<li role="menuitem" tabindex="-1"><a href="post.html">Post</a></li>

    </ul></li>
<li role="menuitem" tabindex="0"><a href="#">Films</a></li>
</ul>
</nav>
</header>

修复它。

<ul>应该拥有的唯一孩子是<li>。不是另一个<ul>。

Answer 2

您需要在菜单sub menu ul

中移动li

<header>
<p><img src="assets/images/header32.png" alt="before and after effects title image"/></p>
<nav role="navigation" aria-label="Main menu">

<ul role="menubar">
<li role="menuitem" tabindex="0"><a href="#">Home</a></li>
<li role="menuitem" aria-haspopup=true tabindex="0"><a href="#">Tutorials</a>

<ul class="submenu" role="menu" aria-hidden=true>

<li role="menuitem" tabindex="-1"><a href="pre-pro.html">Pre-Production</a></li>
<li role="menuitem" tabindex="-1"><a href="production.html">Production</a></li>
<li role="menuitem" tabindex="-1"><a href="post.html">Post</a></li>

</ul>
  </li>
<li role="menuitem" tabindex="0"><a href="#">Films</a></li>
</ul>
</nav>
</header>

<强> DEMO

Answer 3

你真的很亲密。根据您的CSS判断，ul.submenu应该在其所属的<li>内。只需将其移到<li>内即可。这是改变的一个方面：

http://jsfiddle.net/8WGKU/

Answer 4

将submenu保留在<li>

中

<li role="menuitem" aria-haspopup=true tabindex="0"><a href="#">Tutorials</a>           
    <ul class="submenu" role="menu" aria-hidden=true>
        <li role="menuitem" tabindex="-1"><a href="pre-pro.html">Pre-Production</a></li>
        <li role="menuitem" tabindex="-1"><a href="production.html">Production</a></li>
        <li role="menuitem" tabindex="-1"><a href="post.html">Post</a></li>
    </ul>
</li>

Fiddle here.

CSS Drop Down Broken

4 个答案: