This simple example...
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
<style type="text/css" media="all">
nav ul {
display: inline-table;
}
nav ul li {
display: inline;
padding: 2px;
background-color: #EEEEEE;
border: 1px solid #000000;
float: left;
}
nav ul li:hover > ul {
display: block;
}
nav ul li ul {
position: absolute;
display: none;
padding: 0px;
}
nav ul li ul li {
display: block;
float: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Marx Brothers</a>
<ul>
<li><a href="#">Chico</a></li>
<li><a href="#">Harpo</a></li>
<li><a href="#">Groucho</a></li>
<li><a href="#">Gummo</a></li>
<li><a href="#">Zeppo</a></li>
</ul>
</li>
<li><a href="#">Stooges</a>
<ul>
<li><a href="#">Moe</a></li>
<li><a href="#">Larry</a></li>
<li><a href="#">Curly</a></li>
<li><a href="#">Shemp</a></li>
</ul>
</li>
</ul>
</nav>
<article>Other content to overlay with dropdowns...</article>
</body>
</html>
...behaves like so:
I emulated an Apple iPad 3 / 4 in Google Chrome's Developer Tools and the submenus open when the top list items are clicked but not without also triggering the links within the list items. I suppose there are other concerns to think about in supporting the iPad. Also, a submenu will just sit open until one opens a different submenu or clicks randomly elsewhere in the browser (which will close the submenu).
Addendum 9/29/2014: It turns out that this doesn't work in an iPad after all. See: this
No comments:
Post a Comment