Question

您能否告诉我如何将菜单的黑色背景放在下图中的正文文本前面。

这是JSFiddle链接：

https://jsfiddle.net/johnking/j58cubux/6/

向下滚动时，菜单显示不正确

<body>
<div class="uppersection">
<div class="menu" id="home">
    <ul>

        <li>
        <a href="index.html">Home</a>
        </li>


        <li class="drop">
        <a href="google.ca">About</a>
            <ul class="haha">
                <li><a href="www.google.ca">Who am I?</li></a>
                <li><a href="www.google.ca">Accomplishments</li></a>
                <li><a href="www.google.ca">Academic Work</li></a>
                <li><a href="www.google.ca">Future Plans</li></a>
            </ul>
        </li>

        <li>
        <a href="google.ca">Resume</a>
        </li>

        <li>
        <a href="google.ca">Portfolio</a>       
        </li>

        <li>
        <a href="google.ca">Contact</a>
        </li>

    </ul>
</div>
<div class=textupper>Hello, I am John <br><br>Welcome To My Website!<br>    <br>Feel Free To Navigate Around</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Hi</body>

如何使用css解决问题？

感谢。

Answer 1

如果父a被悬停，您还需要为li添加背景：

.menu ul li:hover a {
    background-color: #00AFF0;
}

演示： https://jsfiddle.net/j58cubux/7/

或者更好的解决方案是默认情况下将a背景颜色设置为transparent：

.menu ul li a {
    text-decoration: none;
    color: white;
    font-size: 21px;
    text-align: center;
    font-family: Segoe UI Local;
    background-color: transparent; /* make it transparent */
}

演示： https://jsfiddle.net/j58cubux/8/

Answer 2

您的菜单a的背景为黑色，显示在li的蓝色背景上方。

只需删除该黑色背景（删除此行）：

background-color: black;

来自.menu ul li a定义。

JSFiddle：https://jsfiddle.net/j58cubux/10/

将菜单放到前面

2 个答案: