Mobile CSS Drop Down Navigation

HTML & CSS
1

Hi there.

I’m trying to create a mobile navigation bar that has a drop down menu. I have most of it set up already, but the only sub-menu link I can view is from the last main menu button, the other sub-menu button hides behind the main navigation. It might be a simple fix.

Here’s the link, I set it up so that the mobile side is viewable from your browser. The CSS is also temporarily included in the main HTML document:
http://www.louieswebsite.com/test/

Both the LOGIN and REGISTER buttons have a sub-menu button, but the one for LOGIN is not visible on roll-over.

Thank you.

2

Best guess:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>dropdown menu</title>
    <style>

ul {
    list-style-type:none;
    background-color:#000;
    padding:0;
    margin:0;
}
li {
    position:relative;
    font-family:Arial,Helvetica,sans-serif;
    font-weight:600;
    text-transform:uppercase;
    margin-left:0px;
}

ul.top_nav {
    border-top:1px solid #fff;
    position:relative;
    padding:0;
    margin-left:0px;
}
ul.top_nav li {
    border-bottom:1px solid #000;
    border-right:9px solid #000;
}
ul.dropdown {
    display:none;
    position:absolute;
    top:30px;
    left:0;
    width:100px;  /* ? */
}
li:hover ul.dropdown {
    display:block;
}

ul.dropdown li {
    z-index:1;
    margin-left:0px;
}
a {
    display:block;
    border-left:9px solid #000;
    border-top:1px solid #000;
    background:#000;
    color:#ecf873;
    text-decoration:none;
    padding:5px;
}
a:hover {
    text-decoration:none;
    color:#000;
    background:#ecf873;
}

    </style>
</head>
<body>

<ul class="top_nav">
    <li><a href="#">Exchange</a></li>
    <li><a href="#">Login</a>
        <ul class="dropdown">
            <li><a href="#">Help</a></li>
        </ul>
    </li>
    <li><a href="#">Register</a>
        <ul class="dropdown">
            <li><a href="#">Help</a></li>
            <li><a href="#">Yeah</a></li>
        </ul>
    </li>
</ul>

<!--
<ul class="dropdown">
    <li><a href="#">Help</a>
</ul>
-->

</body>
</html>
3

Hover navigation sucks on mobile, if it works at all (once you touch a hover menu, you can’t get rid of it again). You are better off trying something like these:

4

I managed to achieve this a different way by using a style from this website: http://astuteo.com/mobilemenu and went with @media only screen and (min-width: 480px) { } in CSS for the full screen browser.

Thanks anyway.