Question

我正在努力开设个人网站，并从HTML5 UP下载了几个模板。我非常喜欢这个，但我还没有能够在下方的菜单项中添加下拉列表。

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

我希望下拉菜单与this example上的下拉菜单非常相似。我关注this tutorial，但在添加了所有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而不是类（根据你给定的css）所以只需将<nav id="nav">替换为<nav class="menu">，你的菜单就可以了，我也将菜单宽度从1000px改为100％好看。根据您的需要进行更改。

这是demo。希望它会有所帮助。

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

1 个答案: