HTML/CSS 下拉问题答案

【问题标题】：HTML/CSS Dropdown problemsHTML/CSS 下拉问题
【发布时间】：2016-07-18 20:28:03
【问题描述】：

所以我的导航遇到了很大的问题。我正在尝试添加一个下拉菜单，但无论我尝试什么都无法解决。以下是我当前的 HTML/CSS 代码，如果您知道如何修复它，请帮忙！！我还附上了一张我实际上试图让它看起来像的图片。

这是 HTML

    <div class="logo"><a href="index.html"><img src="images/original/xlablogoheader.gif" width="auto" height="130"/></a><span> experimental social science laboratory</span></div>



    <div class="menu">
        <ul>
            <li><a href="page.html">About</a>
                <ul> 
                    <li><a href="page.html">Mission</a></li>
                    <li> <a href="page.html">Staff</a></li>

                </ul>
            </li>

            <li><a href="page.html">Participants</a>
            </li>

            <li><a href="page.html">Researchers</a>
            </li>

            <li><a href="page.html">Connect</a>
            </li> 
        </ul>
     </div> 

    </div>

这是 CSS

/* Menu */
.menu{float:right; padding:0 20px 0 0;}
.menu ul {list-style:none; margin:0; padding:0px;}
.menu ul * {margin:0; padding:0;}
.menu ul li {float:left; padding:0 20px 0 20px; height:35px;}
.menu ul li a{font-family: 'Source Sans Pro', sans-serif;color:#fff; font-size:16px;}
.menu ul li.selected a{color:#000;}
.menu ul li a:hover{color:#000;} 
.menu  ul ul { display: none; position: absolute; top: 25px }  
.menu ul li:hover > ul { display: inherit; color:#000;}

【问题讨论】：

这到底是怎么回事？
下拉菜单实际上并没有出现。我只能正确地看到主导航，但是当我将鼠标悬停在它们上时，看不到下拉菜单。
有一个fiddle。将鼠标悬停在About 上应该很明显问题出在哪里。我本来会编辑这个以获得可运行的代码，但我似乎已经达到了当天问答的编辑限制，哼哼。
是的，我看到了问题，但我不知道如何解决它。我也尝试将其更改为按钮，但没有成功！

标签： html css drop-down-menu hover

【解决方案1】：

我稍微修改了你的代码，在菜单类中添加了position: relative;，还有一些其他的小改动，所以它可以工作，请检查这个https://jsfiddle.net/ysmr364m/

【讨论】：