我正在尝试向正在构建的网站（HTML / CSS / JavaScript）添加下拉菜单

Question

我正在努力启动个人网站，并从HTML5 UP下载了几个模板。 我真的很喜欢，但是我无法将下拉列表添加到顶部的菜单项中。

以下是网站的网址：zachdamit.cechire.com/five/

我希望下拉菜单与本示例中的下拉菜单非常相似。 我遵循了本教程 ，但是在添加了所有HTML和CSS元素之后，它仍然无法正常工作。 我在想它与与页面关联的JavaScript文件冲突。 我知道很多HTML，但是我仍在学习。 CSS和JavaScript对我来说还是很新的。 让我知道我是否可以发布可能有用的其他任何内容。

非常感谢您的协助！

编辑：这是我编辑的HTML ：

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

这是我添加的CSS ：

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

CSS与我上面链接的站点差不多。 我以为我可以在一段时间后编辑设计和一个元素，但是添加代码后，它删除了网站上的第一张图片，并对菜单栏进行了格式化。 就像我说的，我希望它看起来类似于上面链接的示例。

谢谢！

Answer 1

您使用的是id而不是class（根据给定的CSS），因此只需将<nav id="nav">替换为<nav class="menu"> ，您的菜单即可使用，并且我将菜单宽度从1000px更改为100 ％看起来好。 根据需要进行更改。

这是演示 。 希望它会有所帮助。