I'm trying to add a dropdown menu to a website I'm building (HTML/CSS/JavaScript)

Question

I'm working on getting a personal website started and I downloaded a couple templates from HTML5 UP. There's one I really like, but I haven't been able to add dropdown lists to the menu items at the top.

Here's the URL to the site: zachdamit.cechire.com/five/

I'd like the dropdowns to be very similar to the ones on this example . I was following this tutorial , but after adding all the HTML and CSS elements in, it still wasn't working. I'm imagining it's conflicting with the JavaScript files associated with the page. I know a decent amount of HTML, but I'm still learning. CSS and JavaScript are still pretty new to me. Let me know if I can post anything else that could potentially help.

Any assistance is greatly appreciated!

EDIT: Here's the HTML I edited:

<div class="menu-wrap">
                <nav id="nav">
                    <ul class="clearfix">
                        <li><a href="#intro">Intro</a></li>
                        <li><a href="#one">What I Do</a></li>
                        <li><a href="#two">Who I Am</a>
                            <ul class="sub-menu">
                                <li><a href="biography/">Biography</a></li>
                            </ul>
                        </li>
                        <li><a href="#work">My Work</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>
            </div>

And here's the CSS I added:

<!--ADDED MENU BEGIN-->

.clearfix:after {
    display:block;
    clear:both;
}

/* Menu setup */

.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    /*background:#3e3436;*/
}

.menu {
    width:1000px;
    margin:0px auto;
}

.menu li {
    margin:0px;
    list-style:none;
    /*font-family:'Ek Mukta';*/
}

.menu a {
    transition:all linear 0.15s;
    /*color:#919191;*/
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    /*color:#be5b70;*/
}

/* Dropdown Arrow (optional) */

.menu .arrow {
    font-size:11px;
    line-height:0%;
}

/* Top Level */

.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:19px;
}

.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    /*background:#2e2728;*/
}

/* Bottom Level */

.sub-menu {
    width:160%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    /*background:#2e2728;*/
}

.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}

.sub-menu li {
    display:block;
    font-size:16px;
}

.sub-menu li a {
    padding:10px 30px;
    display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    /*background:#3e3436;*/
}

<!--ADDED MENU END-->

The CSS is pretty much straight from the site I linked above. I was imagining that I could edit the design and such one element after a time after I got it working, but after adding the code, it removed the first image on the site and formatted the menu bar weird. Like I said, I'd like it to look similar to the example linked above.

Thanks!

Answer 1

You are using id rather then class(according to your given css) so just replace <nav id="nav"> to <nav class="menu"> and your menu will work and also i have changed menu width from 1000px to 100% as for good look. Change it according to your need.

Here is demo . Hope it will help.