如何解决此按钮菜单的跨浏览器显示问题？

Question

我设置了一个菜单，该菜单使用带有链接、ul 和 li 的按钮。它在 Chrome、Android、Safari 和 Opera 中运行良好。在 Firefox 中，当 ul 出现时，导航会向下跳转。在 IE 中，ul 不显示。在这两种情况下，链接都不会出现。

编辑：我选择使用按钮来执行此操作，因为我认为它为我提供了常规 ul 菜单所没有的灵活性 - 背景图像、其中的图像、附加 javascript 事件。当然，它还会创建一个布局，该布局是一排按钮，没有任何额外的样式。

http://codepen.io/briligg/pen/emwXaw?editors=110

nav {       position: fixed;
            top: 0px;
            right: 0px;
            width: 70%;
            float: right;
            padding: 2%;
            height: 34px;
            max-height: 34px;
            margin: 5px 0;
            }
nav button {
            border: 1px solid #666666;
            border-radius: 10px;
            background-color: #3b4c6d;
            color: white;
            padding: 0 4px;
            height: 32px;
            font: 16px;
}

nav button ul {
            position: relative;
            display: none;
}
nav button:hover ul, nav button:focus ul {
            display: block;
            z-index: 7;
            list-style: none;
            background-color: #3b4c6d;
            border: 1px solid #666666;
            border-radius: 10px;
      margin-top: 9px;
            padding: 6px 2px;
}
nav button:hover li, nav button:focus li {
            padding: 8px 2px;
}
nav a {
        text-decoration: none;
        color: white;
}
nav a:hover, nav a:focus {
            color: #52cbff;
}

然后在 html 中，ul 嵌套在按钮中，带有链接，如下所示：

<button tabindex="4"><a href="beingthere.html">Being There</a>
<ul tabindex="5">
        <li><a href="beingthere.html#domination">World Domination</a></li>
        <li><a href="beingthere.html#chickens">Chickens</a></li>
        <li><a href="beingthere.html#gravity">Down with Gravity</a></li>
        <li><a href="beingthere.html#moonstar">The Moonstar</a></li>
        </ul>
</button>

在创建这个东西时，我已经达到了我的知识极限。我不知道如何着手寻找解决方法，或者在这种情况下是否可能。帮助甚至知道去哪里解决这个问题将不胜感激，更不用说问题的实际解决方案了。我一直在寻找资料，但没有找到。

Answer 1

IE默认有button {overflow:hidden;}风格，你可以按如下方式休息。

nav button {
    overflow: visible;
}

编辑： 为了使链接正常工作，我们必须重做标记，我还针对 HTML 更改调整了 CSS .请参阅以下代码片段。

nav {
  position: fixed;
  top: 0px;
  right: 0px;
  width: 70%;
  float: right;
  padding: 2%;
  height: 34px;
  max-height: 34px;
  margin: 5px 0;
  white-space: nowrap;
}
nav > ul > li {
  display: inline-block;
  position: relative;
  font-size: 16px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #666666;
  border-radius: 10px;
  background-color: #3b4c6d;
  color: white;
  padding: 0 4px;
}
nav > ul > li > ul {
  display: none;
  list-style: none;
  background-color: #3b4c6d;
  border: 1px solid #666666;
  border-radius: 10px;
  padding: 6px;
  position: absolute;
  z-index: 7;
  top: 32px;
  left: 0;
}
nav > ul > li:hover > ul {
  display: block;
}
nav a {
  text-decoration: none;
  color: white;
}
nav a:hover {
  color: #52cbff;
}

<nav>
    <ul>
        <li tabindex="1"><a href="futuremoon.html#begin">Purpose</a></li>
        <li tabindex="2">
            <a href="moonvsmars.html">Moon vs Mars</a>
            <ul tabindex="3">
                <li><a href="moonvsmars.html#ambiance">Ambiance</a></li>
                <li><a href="moonvsmars.html#communication">Communication</a></li>
                <li><a href="thereandback.html">There and Back</a></li>
            </ul>
        </li>
        <li tabindex="4">
            <a href="beingthere.html">Being There</a>
            <ul tabindex="5">
                <li><a href="beingthere.html#domination">World Domination</a></li>
                <li><a href="beingthere.html#chickens">Chickens</a></li>
                <li><a href="beingthere.html#gravity">Down with Gravity</a></li>
                <li><a href="beingthere.html#moonstar">The Moonstar</a></li>
            </ul>
        </li>
    </ul>
</nav>

问题一定是这个Link inside a button not working in Firefox（和IE）引起的。

完整演示： http://codepen.io/anon/pen/KwOqKv

Answer 2

不是将 <a> 放在 <button> 中，而是将所有 <a> 放在 <li> 中。另外，正如您所做的那样，将辅助链接放在 <li>.

中的另一个 <ul> 中

<ul class='primary-links'>
    <li class='primary'><a href='#'>Primary link</a></li>
    <li class='primary'>
        <a href='#'>Another primary link</a>
        <ul class='secondary-links'>
            <li class='secondary'><a href='#'>Secondary Link</a></li>
            <li class='secondary'><a href='#'>Another secondary link</a></li>
        </ul>
    </li>
</ul>

主要链接是 display:inline-block 以便它们水平显示，而次要链接是 display:none 以便最初隐藏它们。将鼠标悬停在主链接上时，次级链接就会变得可见。 position:absolute 从文档流中删除次级链接，防止次级链接可见时主链接跳转。

.primary {
    display: inline-block;
}

.secondary-links {
    display: none;
    position: absolute;
}

.primary:hover > .secondary-links {
    display: block;
}

body {
     font: 1em/1.5 sans-serif;
}

a:link,
a:visited {
    color: #08f;
    text-decoration: none;
}

a:hover,
a:active,
a:focus{
    color: #f80;
}

ul {
    list-style: none;
    margin: 0;
  
    padding: .25em;
    border-radius: .25em;
    background: #fff;
    border: thin solid #ccc;
    box-shadow: 0 0 .25em #ccc;
}

li {
    margin: .5em;
}

nav > ul > li {
    display: inline-block;
}


li > ul {
    display: none;
    position: absolute;
}

li:hover > ul {
    display: block;
}

<nav>
    <ul>
        <li><a href='#'>One</a></li>
        <li>
            <a href='#'>Two</a>
            <ul>
                <li><a href='#'>Two One</a></li>
                <li><a href='#'>Two Two</a></li>
                <li><a href='#'>Two Three</a></li>
            </ul>
        </li>
        <li>
            <a href='#'>Three</a>
            <ul>
                <li><a href='#'>Three One</a></li>
                <li><a href='#'>Three Two</a></li>
                <li><a href='#'>Three Three</a></li>
                <li><a href='#'>Three Four</a></li>
            </ul>
        </li>
    </ul>
</nav>

如何解决此按钮菜单的跨浏览器显示问题？

How do i tackle cross-browser display problems with this button menu?

html

css

button

cross-browser