css - 使菜单中的单个项目超过其父项的高度

Question

我需要进行设计，其中首页分为 3 个部分。首先是标题，标题下方是边框，此边框下方是菜单。问题是突出显示菜单上方的边框部分应该改变颜色。

现在，我花了一整天的时间在这件小事上，我没有更多的想法如何才能完成这项工作。我知道如果我把包含所有这些图层的背景图像放在那里，我可以让它工作，但我认为这不是最好的方法。这个例子当然比实际设计简单得多。你有更好的想法吗？

为了清楚起见，这里是菜单现在悬停时的外观和外观的图像：

HTML：

<div class="header"></div>
<div class="head_menu">
    <div class="menu">
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>
    </div>
</div>

CSS：

.header {
    background-color: #AC3123;
    height: 70px;
}
.head_menu {
    background-color: #972B1E;
    border-bottom: 7px solid #E8E8E8;
    position: relative;
    height: 55px;
}
.menu {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: #4d5057
}
.menu ul {
    overflow: hidden;
    max-width: 300px;
    margin: auto;
    padding: 0;
    }
.menu ul li {
    float: left;
    list-style: none;
}
.menu ul li a {
    display: block;
    padding: 15px 12px 14px 12px;
    color: #fff;
}
.menu ul li a:hover {
    color: #000;
    background: #e8e8e8;
}

Answer 1

你可以做很多事情来解决这个问题。

一件简单的事情是不要为你的深红色条使用边框。相反，您可以使用伪元素，并li使用正确的 z-index 将其分层。这是一个 jsFiddle：http: //jsfiddle.net/rgthree/4BWNB/

HTML：

<div class="header"></div>
<div class="head_menu">
    <div class="menu">
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>
    </div>
</div>

CSS：

.header {
    background-color: #AC3123;
    height: 70px;
}
.menu ul {
    position:relative;
    background: #4d5057;
    border-bottom: 7px solid #E8E8E8;
    text-align:center;
    list-style: none;
    padding:0px;
    margin:0px;
}
.menu ul:before {
    content:''; display:block; font-size:0px;
    position:absolute; left:0px; top:0px; right:0px; height:7px; z-index:1;
    background:#972B1E; 
}
.menu ul li {
    position:relative; z-index:2;
    display:inline-block;
    padding:0px;
    margin:0x;
}
.menu ul li a {
    display: block;
    padding: 22px 12px 14px 12px;
    color: #fff;
}
.menu ul li a:hover {
    color: #000;
    background: #e8e8e8;
}

Answer 2

我怀疑这是正确的方法，但我只使用 css 让它工作

我span在您的列表项中添加了一个

<ul>
   <li><span></span><a href="#">Menu 1</a>
   </li>
   <li><span></span><a href="#">Menu 2</a>
   </li>
   <li><span></span><a href="#">Menu 3</a>
   </li>
</ul>

并添加了这个 CSS

.menu ul li:hover span {
    color: #000;
    background: #e8e8e8;
}
.menu ul li span:hover {
    background: #972B1E;
}
.menu li span {
    position: absolute;
    top: -8px;
    height: 8px;
    width: 73px;
}

http://jsfiddle.net/JR3xR/2/