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's嵌套在按钮中，带有链接，如下所示：

<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;
}

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

问题必须由此Link inside a button not working in Firefox（和IE）引起。

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

Answer 2

不要将<a>放入<button>，而是将所有<a>放入<li>。此外，正如您所做的那样，将辅助链接放在<ul>中的另一个<li>内。

<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>

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

2 个答案: