Question

首先，here is a Fiddle这里是HTML＆amp; CSS：

<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li class="current-item"><a href="#">Home</a>
            </li>
            <li>    <a href="#">Info <span class="arrow">&#9660;</span></a>

                <ul class="sub-menu">
                    <li><a href="#">Rehearsal Dinner</a>
                    </li>
                    <li><a href="#">Wedding</a>
                    </li>
                    <li><a href="#">Reception</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Photos</a>
            </li>
            <li><a href="#">Directions</a>
            </li>
            <li><a href="#">RSVP</a>
            </li>
        </ul>
    </nav>
</div>
<img src="http://placekitten.com/g/800/600" alt="Snow" class="background">
<footer></footer>

CSS：

body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: rgb(231, 242, 208);
    width: 960px;
    padding-top: 0;
    margin: 0 auto;
}

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

h1 {
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 10px;
    margin: 0px;
    width: 100%;
    height: 50px;
    background-color: #3300EE;
}

.background {
    width: 100%;
    margin-left: 0%;
    margin-top: 100px;

}

/* Menu Outline */
.menu-wrap {
    width: 100%;
    background-color: rgb(150, 150, 150);
    text-align: center;
    position: fixed;
    top: 0px;
    left: 0px;

}

.menu {
    width: 100%;
    margin: 0 auto;
}

.menu li {
    margin: 0px;
    list-style: none;
    display: inline;
}

.menu a {
    transition: all linear 0.15s;
    color: black;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration: none;
    color: black;
}

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

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

.menu > ul > li > a {
    padding: 10px 40px;
    display: inline-block;
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background: rgb(120, 214, 126);
}

.sub-menu {
    width: 160%;
    padding: 5px 0px;
    position: absolute;
    text-align: left;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    trasition: opacity linear 0.15s;
    background: rgb(120, 214, 126);
}

.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: gray;
}

footer {
    height: 1000px;
}

我想做的是让屏幕上方的菜单在屏幕中央，而不是从当前的左侧缩进一定量。此外，是否可以垂直居中菜单？我暂时通过将padding-bottom增加到10px来捏造那个，但我确信有一个更好，更可靠的解决方案。

如果您希望在稍微更改之前看到菜单的设置，我会从this blog post获取菜单栏的代码。

Answer 1

只需从float:left规则中删除.menu > ul > li。

<强> jsFiddle example

将菜单放在网页顶部

1 个答案: