以下是我的代码
<ul class="navbar-nav" style="margin-left: 16%;">
<li class="nav-item">
<!-- <button style="background-color: #009688; height: 25px;"> -->
<a class="nav-link" style="color: white; font-weight: 500;" href="home.php">Home</a>
<!-- </button> -->
</li>
<li class="nav-item">
<a class="nav-link" style="color: white; font-weight: 500;" href="about.php">About Us</a>
</li>
<li class="nav-item dropdown nav-mod">
<a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white; font-weight: 500;">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="panchakarma.php">Panchakarma Therapies</a></li>
<li><a class="dropdown-item" href="ayurveda_medicines.php">Ayurveda Medicines</a></li>
<li><a class="dropdown-item" href="diet_consultation.php">Diet Consultation</a></li>
<li><a class="dropdown-item" href="meditation.php">Meditation</a></li>
<li><a class="dropdown-item" href="therapy_yoga.php">Therapy Yoga</a></li>
<li><a class="dropdown-item" href="physiotherapy.php">Physiotherapy</a></li>
<li><a class="dropdown-item" href="garbh_sanskar.php">Garbh Sanskar</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Special Treatments</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="dhupana_chikista.php">Dhupana Chikista</a></li>
<li><a class="dropdown-item" href="kumkumadi_facial.php">Kumkumadi Facial</a></li>
<li><a class="dropdown-item" href="rejuvation_treatment.php">Rejuvation Treatment</a></li>
<li><a class="dropdown-item" href="relaxation_treatment.php">Relaxation Treatment</a></li>
<li><a class="dropdown-item" href="suvarna_prashan.php">Suvarna Prashan</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="other_facility.php">Other Facilities we provide</a></li>
</ul>
</li>
<li class="nav-item nav-mod">
<a class="nav-link" style="color: white; font-weight: 500;" href="online_consultation.php">Online Consultation</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" style="color: black; font-weight: bold;" href="packages.php">Packages</a>
</li> -->
<li class="nav-item nav-mod">
<a class="nav-link" style="color: white; font-weight: 500;" href="courses.php">Courses</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" style="color: black; font-weight: bold;" href="products.php">Products</a>
</li> -->
<li class="nav-item nav-mod">
<a class="nav-link" style="color: white; font-weight: 500;" href="career.php">Career</a>
</li>
<li class="nav-item nav-mod">
<a class="nav-link" style="color: white; font-weight: 500;" href="contact_us.php">Contact Us</a>
</li>
</ul>
我要像下面图像（标题）中所示那样启用它
如果有人知道使用CSS，请让我帮助。
以下图片显示了我的网站外观。enter image description here
我要按照第一张图片所示制作标题。
答案 0 :(得分：0)
您只是将背景放在锚（a）标签上，对不对？ 您可能需要放入li标签，但是我不确定，如果它不起作用，请编辑您的问题，然后也放入css文件或使用codepen
答案 1 :(得分：0)
您可以通过对ul，li和a使用相同的行高来实现。当您为ul，li和a设置相同的高度时，它将像菜单项高度一样显示悬停高度。
nav.navbar.navbar-default {
background: #288a90;
}
ul.nav.navbar-nav {
background: #288a90;
}
.navbar,
.navbar ul {
line-height: 65px;
}
.navbar ul li a {
line-height: 65px;
color: white !important;
font-weight: 500;
}
.navbar ul li a:hover {
line-height: 65px;
background-color: #fff !important;
color: #288a90 !important;
}
.dropdown-menu {
background-color: #288a90 !important;
padding: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav" style="margin-left: 16%;">
<li class="nav-item">
<a class="nav-link" href="home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">About Us</a>
</li>
<li class="nav-item dropdown nav-mod">
<a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white; font-weight: 500;">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="panchakarma.php">Panchakarma Therapies</a></li>
<li><a class="dropdown-item" href="ayurveda_medicines.php">Ayurveda Medicines</a></li>
<li><a class="dropdown-item" href="diet_consultation.php">Diet Consultation</a></li>
<li><a class="dropdown-item" href="meditation.php">Meditation</a></li>
<li><a class="dropdown-item" href="therapy_yoga.php">Therapy Yoga</a></li>
<li><a class="dropdown-item" href="physiotherapy.php">Physiotherapy</a></li>
<li><a class="dropdown-item" href="garbh_sanskar.php">Garbh Sanskar</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Special Treatments</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="dhupana_chikista.php">Dhupana Chikista</a></li>
<li><a class="dropdown-item" href="kumkumadi_facial.php">Kumkumadi Facial</a></li>
<li><a class="dropdown-item" href="rejuvation_treatment.php">Rejuvation Treatment</a></li>
<li><a class="dropdown-item" href="relaxation_treatment.php">Relaxation Treatment</a></li>
<li><a class="dropdown-item" href="suvarna_prashan.php">Suvarna Prashan</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="other_facility.php">Other Facilities we provide</a></li>
</ul>
</li>
<li class="nav-item nav-mod">
<a class="nav-link" href="career.php">Career</a>
</li>
<li class="nav-item nav-mod">
<a class="nav-link" href="contact_us.php">Contact Us</a>
</li>
</ul>
</nav>
</body>
</html>
答案 2 :(得分：0)
我做了一些更改，做了一些不必要的CSS，并根据引导程序做了CSS，以确保在添加CSS文件时（在引导CSS文件之后），您不必使用accept-new
accept-new!important