Question

<div class="navbar-header"></div>
<div class="navbar-header"></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 class="smoth-scroll" href="#home">Home</a></li>
        <li><a class="smoth-scroll" href="#aboutus">About Us</a></li>
        <li><a class="smoth-scroll" href="#services">Services</a></li>
        <li><a class="smoth-scroll" href="#ourteam">Our Team</a></li>
        <li><a class="smoth-scroll" href="#testimonial">Testimonials</a></li>
        <li><a class="smoth-scroll" href="#portfolio">Portfolio</a></li>
        <li><a class="smoth-scroll" href="#contactus">Contact Us</a></li>
    </ul>
</div>
<!-- /.navbar-collapse --></nav>

================================================
7. Navigation
================================================
*/
.menu-bg {
    z-index: 999;
}
.menu-bg .basement-logo {
    padding-top: 5px;
    transition: all 0.3s ease 0s;
}
.navbar-default {
    background-color: inherit;
    border-color: inherit;
}
.navbar {
    border-radius: 0;
    min-height: auto;
    margin: 0;
    border: none;
    z-index: 9;
}
.navbar-collapse {
    float: right;
    margin: 0;
    padding: 0;
}
.navbar-brand {
    padding: 0;
    height: auto;
}
.navbar-nav > li {
    padding: 0;
    margin: 0 0 0 1px;
}
.navbar-default .navbar-nav li a {
    color: #000;
    font-size: 13px;
    font-weight: 600;
    padding: 30px 13px;
    transition: all 0.3s ease 0s;
    text-transform: uppercase;
    background-color: inherit;
    font-family: "Roboto",sans-serif;
    letter-spacing: 1px;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    background-color: #DC143C !important;
    color: #000;
}
.menu-bg .navbar-default .navbar-nav li a {
    padding: 20px 10px;
    transition: all 0.3s ease 0s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color: #DC143C !important;
    color: #000;
}
/*

我通过我的Cpanel帐户从文件管理器中的CSS代码编辑器复制并粘贴它。我正在尝试将悬停颜色更改为红色（＃DC143C），但我失败了。我非常感谢您的帮助，所以提前感谢！我认为很明显我是一个新手，我仍然在试图弄清楚CSS，JavaScript和HTML之间的关系，所以请耐心等待。我终于找到了基本的网络，但这是一个全新的球赛。再次，非常感谢你的帮助。

Answer 1

你忘记在css中添加ul之前的li。使用下面的代码就可以了。

<html>
<head>
<style>
.menu-bg {
	z-index: 999;
}
.menu-bg .basement-logo {
	padding-top: 5px;
	transition: all 0.3s ease 0s;
}
.navbar-default {
	background-color: inherit;
	border-color: inherit;
}
.navbar {
	border-radius: 0;
	min-height: auto;
	margin: 0;
	border: none;
	z-index: 9;
}
.navbar-collapse {
	float: right;
	margin: 0;
	padding: 0;
}
.navbar-brand {
	padding: 0;
	height: auto;
}
.navbar-nav > li {
	padding: 0;
	margin: 0 0 0 1px;
}
.navbar-default .navbar-nav li a {
	color: #000;
	font-size: 13px;
	font-weight: 600;
	padding: 30px 13px;
	transition: all 0.3s ease 0s;
	text-transform: uppercase;
	background-color: inherit;
	font-family: "Roboto",sans-serif;
	letter-spacing: 1px;
}
.navbar-default .navbar-nav > ul > li > a:focus, .navbar-default .navbar-nav > ul > li > a:hover {
	background-color: #DC143C !important;
	color: #000;
}
.menu-bg .navbar-default .navbar-nav ul li a {
	padding: 20px 10px;
	transition: all 0.3s ease 0s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
	background-color: #DC143C !important;
	color: #000;
}

</style>
</head>
<body>
    <div class="navbar-default">
	     <div class="navbar-nav" >
		        <ul>
				  <li style="height:50px;">  
                       <a href="#">dfsdgdsgs </li> </a>
				  
		 </div>
	</div> 
</body>
</html>

Answer 2

只需将以下css代码插入CSS文件即可。我已经为您提供了Codepen链接 https://codepen.io/anon/pen/dePmEY

.navbar-collapse ul li a:hover{
  color:black;
  background-color:#DC143C;
}

如需进一步查询，请提供您的HTML代码。

＆＃13;

.menu-bg {
	z-index: 999;
}
.menu-bg .basement-logo {
	padding-top: 5px;
	transition: all 0.3s ease 0s;
}
.navbar-default {
	background-color: inherit;
	border-color: inherit;
}
.navbar {
	border-radius: 0;
	min-height: auto;
	margin: 0;
	border: none;
	z-index: 9;
}
.navbar-collapse {
	float: right;
	margin: 0;
	padding: 0;
}
.navbar-brand {
	padding: 0;
	height: auto;
}
.navbar-nav > li {
	padding: 0;
	margin: 0 0 0 1px;
}
.navbar-default .navbar-nav li a {
	color: #000;
	font-size: 13px;
	font-weight: 600;
	padding: 30px 13px;
	transition: all 0.3s ease 0s;
	text-transform: uppercase;
	background-color: inherit;
	font-family: "Roboto",sans-serif;
	letter-spacing: 1px;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
	background-color: #DC143C !important;
	color: #000;
}
.menu-bg .navbar-default .navbar-nav li a {
	padding: 20px 10px;
	transition: all 0.3s ease 0s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
	background-color: #DC143C !important;
	color: #000;
}
.navbar-collapse ul li a:hover{
  color:black;
  background-color:#DC143C;
}

＆＃13;

<div class="navbar-header"></div>

<div class="navbar-header"></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 class="smoth-scroll" href="#home">Home</a></li>
	<li><a class="smoth-scroll" href="#aboutus">About Us</a></li>
	<li><a class="smoth-scroll" href="#services">Services</a></li>
	<li><a class="smoth-scroll" href="#ourteam">Our Team</a></li>
	<li><a class="smoth-scroll" href="#testimonial">Testimonials</a></li>
	<li><a class="smoth-scroll" href="#portfolio">Portfolio</a></li>
	<li><a class="smoth-scroll" href="#contactus">Contact Us</a></li>
</ul>
</div>

＆＃13;

导航栏悬停颜色未更改

2 个答案: