Html 把菜单放在前面_Html_Css

Html 把菜单放在前面

html css

Html 把菜单放在前面,html,css,Html,Css,你能告诉我如何将菜单的黑色背景置于下图正文前吗以下是JSFIDLE链接：向下滚动时，菜单不正确可见 <body> <div class="uppersection"> <div class="menu" id="home"> <ul> <li> <a href="index.html">Home</a> </li> &

你能告诉我如何将菜单的黑色背景置于下图正文前吗

以下是JSFIDLE链接：

向下滚动时，菜单不正确可见

<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解决此问题

谢谢。

如果父

li

悬停，您也需要为

添加背景：

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

演示：

或者更好的解决方案是将

背景色默认设置为

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 */
}

演示：

如果父

li

悬停，您也需要为

添加背景：

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

演示：

或者更好的解决方案是将

背景色默认设置为

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 */
}

演示：

您的菜单

的黑色背景显示在

li

的蓝色背景之上

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

从

.menu ul li a

定义

jsIDLE:

您的菜单

有一个黑色背景，显示在

li

的蓝色背景之上

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

从

.menu ul li a

定义

jsiddle:

使用属性“z-index:1000；“in”.menu”。因此，无论滚动内容如何，都要将菜单固定在顶部

.menu {
   background-color: black;
   min-height: 77px;
   width: 100%;
   position: fixed;
   z-index: 1000;
}

再见

使用属性“z-index:1000；“in”.menu”。因此，无论滚动内容如何，都要将菜单固定在顶部

.menu {
   background-color: black;
   min-height: 77px;
   width: 100%;
   position: fixed;
   z-index: 1000;
}

再见

z指数：1000；解决了问题，谢谢你这么多赫兹指数：1000；解决了问题，非常感谢