patternhtmlMinor

CSS3 Dropdown Menu (touch device or mouse compatible)

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

dropdowncompatibledevicemenucss3mousetouch

Problem

This may be rather basic, but I wanted to experiment and learn with some of the upcoming CSS3 techniques. I wasn't able to come up with an HTML/CSS only solution, and I had to work longer than I'd like to admit to get to a point where this menu works as intended on desktop or mobile.

The main lesson I learned is forget about using :hover to control actions. It's worthless on mobile, and having the function on click in desktop isn't that bad, and is probably the better practice anyway.

I haven't tested in a lot of env, but more than a few. It seems to work pretty well in modern browsers. Let me know how I can improve!

GitHub

Working demo

//click to open menu
$('.follow button').click(function(){
    $('.addClass').toggleClass("profile-container");
});

`/RESET/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/ HTML5 display-role reset for older browsers /
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*{
letter-spacing: normal;
}
/ END RESET /

/Disables text selection/
body{
-webkit-touch-callout: no

Solution

Your HTML formatting is messy.

Too much Vertical White Space

inconsistent indentation

inconsistent new line usage

I almost thought that you were missing an end tag because the indentations weren't consistent.

Changing that, this is what it looks like:

Code Snippets

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta CHARSET="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">        
        <title>Title</title>
        <meta name="Keywords" content="">
        <meta name="Description" content="">

        <link rel="stylesheet" href="css/style.css">
    </head>
    <body id="profileDropdown">   
        <div class="container">
            <div class="profile">
                <img id="profilePicture" class="avatar" src="#" alt="Your Name Portrait" height="416" width="370" >
                <span id="portraitCaption">Your Name</span>
            </div><!-- END PROFILE SECTION -->
            <div class="addClass">
                <div class="follow">
                    <button id="dropdownButton">Follow</button>
                </div>  
                <nav id="dropDown" class="profile-list">
                    <ul class="center">
                        <li id="gitHubProfile" class="first" >
                            <a href="https://github.com/agraymd" title="Follow me on GitHub!" target="_blank">GitHub</a>
                        </li>
                        <li class="second">
                            <a href="" title="Connect on LinkedIn" target="_blank">LinkedIn</a>
                        </li>
                        <li class="third">
                            <a href="" title="Email Me" target="_blank">Google</a>
                        </li>
                        <li class="fourth">
                            <a href="" title="My Resume" target="_blank">Resume</a>
                        </li>
                    </ul>
                </nav>          
            </div>
        </div>
        <script src="js/jquery.js" type="text/javascript"></script> 
        <script src="js/main.js" type="text/javascript"></script> 
    </body>
</html>

Context

StackExchange Code Review Q#124800, answer score: 2

Revisions (0)

No revisions yet.