Question

这是我的第一篇文章。希望我足够具体，可以得到一些帮助：）

我在导航栏中为我的clanwebsite创建了一个下拉菜单。但是我不能以与导航栏中的其他标题相同的方式更改css。

当我用光标检查它时，正在移动登录按钮。当我进入下拉菜单中的主要团队页面时，导航的CSS不同。

谢谢！

注意不要介意php。仍在努力。

我的主页HTML

<html>
<head>
<link rel="stylesheet" href="Opmaak.css">
<title>WKG</title>
</head>
<body>
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="Line-up.html">Line-ups</a></li>
    <li><div class="dropdown">
    <button class="dropbtn">Teams</button>
    <div class="dropdown-content">
        <a href="Mainteam.html">Main Team</a>
        <a href="Team2.html">Team 2</a>
        </div>
<li><a href="Matchen.html">Matchen</a></li>
<li><a href="About.html">About</a></li>
<li><a href="Games.html">Games</a></li>
</ul>
</body>
</html

我的CSS

p {
font-size: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #444;
}

li {
float: left;
box-shadow: 15px 15px 50px #888888;
font-size: 20px;
}

li a {
display: block;
color: darkgray;
text-align: center;
padding: 20px 50px;
text-decoration: inherit;
box-shadow: 3px 3px 3px crimson;
border-color: crimson;
position: relative;
display: inline-block;
}

.dropdown-content a {
display: block;
background-color: slategray;
}

.dropdown-content {
display: none;
position: inherit;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropbtn {
overflow: hidden;
background-color: slategray;
color: darkgray;
text-align: center;
padding: 20px 50px;
text-decoration: inherit;
box-shadow: 3px 3px 3px crimson;
border-color: crimson;
font-size: 20px;
position: relative;
display: inline-block;
}

. dropbtn:hover {
background-color: crimson;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: crimson;
padding: 20px 50px;
}

和我的主要团队页面

<html>
<head>
<link rel="stylesheet" href="Opmaak.css">
<title>WKG</title>
</head>
<body>
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="Line-up.html">Line-ups</a></li>

    <div class="dropdown">
    <button class="dropbtn">Teams</button>
    <div class="dropdown-content">
        <a href="Mainteam.html">Main Team</a>
        <a href="Team2.html">Team 2</a>
        </div>
<li><a href="Matchen.html">Matchen</a></li>
<li><a href="About.html">About</a></li>
<li><a href="Games.html">Games</a></li>
</ul>
</body>
</html

没有正确布局的CSS下拉菜单

0 个答案: