Question

我的导航栏有几个问题。第一个问题是我无法弄清楚如何使“活动”大小与我的悬停大小相同。您会注意到导航栏的整个高度在活动时突出显示。

其次，由于某些原因，它在codepen上并不明显，但在我的实际情况中，我的“主”div与导航栏位于同一平面上，导致阴影不均匀且清晰。希望您能从下图中看到我的意思。我试过玩z-index而没有运气。

图像是与主div一起使用的导航栏。阴影几乎“淡化”在边缘，我怎么能把阴影放在前面？

HTML

<body>
<nav class="navigation-bar">
<a href="index.html"><img class="logo" src="images/logo.png" alt="Logo" width="100" height="100"/></a>
    <ul>
        <li class="active"><a href="#">TAB 1</a></li>
        <li><a href="#">TAB 2</a></li>
        <li><a href="#">TAB 3</a></li>
        <li><a href="#">TAB 4</a></li>
        <li><a href="#">TAB 5</a></li>
    </ul>
</nav>

<main class="main">
    <article class="summary">
        <p></p>
    </article>
    <article id="image">
        <img src="images/map.png" alt="" width="80%" height="80%" />
    </article>
</main>
</body>

CSS

* {margin:0;padding:0;box-sizing:border-box}
html, body {text-align: center;}

body {
    background-image: url(../images/BG.jpg); background-size: 100% 100%; background-position: top left; background-repeat: repeat;
    justify-content: center; /* horizontal alignment / centering */
    align-items: flex-start; /* prevents the #menu to fill the remaining height of the body */
}

.navigation-bar {
    opacity: .9;
    text-align: center;
    width: 100%;
    height: 120px;
    background: #2A2A2A;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /*
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    */
}

.logo {
    float: left;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 10px;
}

/* used with 100% wrapper */
ul  {
    display: inline;
    display: flex; /* displays children inline */
    width: 60%;
    height: 120px;
    list-style: none;
    background: #2A2A2A;
}

li {
    flex: 1; /* each takes as much width as it can, i.e. 25% */
}

li:last-child {
    border-left: none;
    border-right: none;
}

li a {
    margin-top: 30px;
    display: block;
    text-align: center;
    font: Verdana;
    font-size: 16px;
    color: #EAEAEA;
    text-decoration: none;
    padding: 20px 0; /* This adjusts the height of the tabs */
}

li a:hover {
    background: linear-gradient(#404040, #3E3E3E);
}

.active {
    background: linear-gradient(#2B2B2B, #232323);
}

p {
    font-family: Verdana;
    font-size: 16px;
}

/* Used in Home */
.main {
    opacity: .75;
    color: #EAE0D2;
    margin: 0 auto;
    width: 85%;
    height: 1000px;
    margin-top: 0;
    background: linear-gradient(#2B2B2B, #232323);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Answer 1

如果我的理解是正确的，那么您的第一个问题就是

.active { background: linear-gradient(#2B2B2B, #232323); }

到

.active a{ background: linear-gradient(#2B2B2B, #232323); }

将解决问题。

NavBar的CSS问题

1 个答案: