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

Question

I set up a menu that uses buttons with links, ul's, and li's inside them. It works fine in Chrome, Android, Safari, and Opera. In Firefox, when the ul's appear the nav jumps down. In IE, the ul's don't display. In both, the links don't appear.

Edit: I chose to do this with buttons because i thought it gave me flexibility a regular ul menu wouldn't - background images, images inside them, attaching javascript events. It also of course creates a layout that is a row of buttons without any extra styling.

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

Then in the html, the ul's are nested in the buttons, with links, like this:

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

In even creating this thing i was already at the limits of my knowledge. I don't know how to go about finding work-arounds, or if that is even possible in this case. Help with even knowing where to go to figure this out would be appreciated, never mind an actual solution to the problem. I've been looking for information and haven't found any.

Answer 1

IE has button {overflow:hidden;} style by default, You can rest that as follows.

nav button {
    overflow: visible;
}

Edit: In order to get the links working we'll have to redo the markup, I also adjusted the CSS for the HTML changes. see the following code snippet.

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>

The problem must be caused by this Link inside a button not working in Firefox (and IE).

Full Demo: http://codepen.io/anon/pen/KwOqKv

Answer 2

Instead of putting <a> in <button>, put all <a> inside <li>. Also, as you had, put the secondary links inside another <ul> in the <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>

The primary links are display:inline-block in order for them to display horizontally while the secondary links are display:none to initially hide them. The secondary links become visible when the primary links are hovered over. position:absolute removes the secondary links from the document flow preventing the primary links from jumping down when the secondary links become visible.

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