这是我的codepen.
问题1
如何更改网页上导航栏下拉菜单的背景和文字颜色？仅仅为了回答目的，我希望文本为白色，背景颜色为灰色。 （我并没有要求任何人为我做这件事只是为了让事情变得清晰）
问题2
在我的编码中，当我将鼠标悬停在框底部下拉菜单中的导航栏文本上时，会出现下划线。但是，当用户将鼠标悬停在每个网页的每个文本上时，我希望下划线显示在导航栏下拉菜单框的底部。
有识别类的任何有用链接吗？
此外，就导航栏html而言，我发现很难识别出类名，因此，当我使用CSS时，我可以轻松识别出我需要编写的类。因此，我想知道是否有人有任何有用的教程链接可以帮助我。
HTML代码
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#contact-me">Contact Me</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="section1">
<div class="hero"></div>
<a href= "#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a>
</section>
<section class="section2" id = "section2">
<a href = "#contact-me"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>
</section>
<section id="contact-me" class="contact_section">
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer></footer>
</html>
CSS代码
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color:red;
border-radius: 9px;
transition:all .2s;
}
.navbar.navbar-default ul li a:hover {
color: red;
}
.nav.navbar-nav, .nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
a:hover {
color:red;
text-decoration:none;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
}
.section1 {
height: 90vh;
background-color: #FFFFFF;
text-align: center;
}
.section2 {
height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.contact_section {
height: 93vh;
background-color: grey;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
footer {
height: 5vh;
}
</style>
答案 0 :(得分：0)
在元素中添加颜色时，您需要确保具体了解详细信息。比如你给我的东西，我想出来了。 将其插入CSS文档中，告诉我这是不是您的意思。如果是这样，只需确保为背景颜色选择了一个元素（例如菜单），然后选择下一个元素（导航栏或另一个示例的链接。）为下一个元素着色。
同样对于enter code here轻松修复字体加下划线，只需使用text-decoration命令即可。坚固的边框底部1px等我希望这有帮助。
.dropdown .dropdown-menu {
background-color: grey;
}
.dropdown .dropdown-menu a{
color: white;
}
.dropdown .dropdown-menu a:hover{
text-decoration: underline;
text-decoration-color: black;
-moz-text-decoration-color:black;
}
答案 1 :(得分：0)
问题1答案：
对于问题1的答案，请阅读https://stackoverflow.com/users/7650566/rcruey的答案。通过该系统，您可以添加背景颜色和文本颜色。
注意： 背景颜色和颜色是CSS的基础。如果你有足够的时间，你需要先了解更多关于CSS的信息。
问题2答案：
当用户将鼠标悬停在每个网页的每个文本下方时，为其添加下划线。这很简单。只需为您的段落和链接制作代码。
p, a{
text-decoration: none;
}
p:hover, a:hover{
text-decoration:none;
}
并且避免使用此导航栏代码只需将其添加到导航栏菜单中，这在问题1中完成：
.dropdown .dropdown-menu {
background-color: grey;
}
.dropdown .dropdown-menu a{
color: white;
}
.dropdown .dropdown-menu a:hover{
text-decoration: underline;
text-decoration-color: black;
}
最后提出建议：
我想说，您可能会尝试覆盖代码中的bootstrap类。
为此，请使用Chrome或Firefox的inspect元素。单击上面的字段，然后单击Inspect元素。然后，您将看到上述样式表使用了哪个类或ID。
要在index.html页面中使用bootstrap over-righting ...获得完美结果，请正确链接样式。首先尝试链接 bootstrap.min.css ，然后添加自己的 style.css 。这将给你一个完美的结果。