因此，当您将鼠标悬停在下拉菜单元素上时，我尝试将背景颜色设置为＃d1e2ff，它适用于插入符号和插入符号旁边的a.btn，但不适用于当我放下菜单的时候。在谷歌开发者工具中，如果我强制：悬停它的工作原理。它也没有表明存在任何冲突的css规则。如果我用自己的鼠标悬停它仍然显示为白色背景。
我的css（最好的一个，底部没有。我已经尝试了各种特异性。）
header > div > div > a:hover {
background-color: #d1e2ff;
}
html > body > div > header > #btn-group-justified > div.open > ul.dropdown-menu > li:hover{
background-color: #d1e2ff;
}
HTML
<header class="page-header">
<!-- logo -->
<h1><a href=""><img src="mommyinfologo.png"/></a></h1>
<div class="btn-group" id="btn-group-justified">
<!-- Home Group -->
<div class="btn-group mybtngroup">
<a class="btn">Home</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/mommy-madness">This Mommy's Madness</a></li>
<li><a href="/about">About Mommy Info</a></li>
<li><a href="/contact">Contact Mommy Info</a></li>
</ul>
</div>
<!-- Pregnancy group-->
<div class="btn-group mybtngroup">
<a class="btn">Pregnancy</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/pregnancy/trying-to-conceive">Trying to Conceive</a></li>
<li><a href="/pregnancy/fetal-development">Fetal Development</a></li>
<li><a href="/pregnancy/gender-predictions">Gender Predictions</a></li>
<li><a href="/pregnancy/labor-and-delivery">Labor and Delivery</a></li>
</ul>
</div>
<!-- All About Baby group-->
<div class="btn-group mybtngroup">
<a class="btn">All About Baby</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/all-about-baby/advice">Advice</a></li>
<li><a href="/all-about-baby/guidelines">Guidelines</a></li>
<li><a href="/all-about-baby/milestones">Milestones</a></li>
<li><a href="/all-about-baby/learning-development">Learning Development</a></li>
</ul>
</div>
<!-- Health and Nutrition group-->
<div class="btn-group mybtngroup">
<a class="btn">Health and Nutrition</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/health-and-nutrition/pregnancy-nutrition">Pregnancy Nutrition</a></li>
<li><a href="/health-and-nutrition/breastfeeding">Breastfeeding</a></li>
<li><a href="/health-and-nutrition/formula-feeding">Formula Feeding</a></li>
<li><a href="/health-and-nutrition/toddler-nutrition">Toddler Nutrition</a></li>
<li><a href="/health-and-nutrition/prenatal-exercise">Prenatal Exercise</a></li>
<li><a href="/health-and-nutrition/postpartum-exercise">Postpartum Exercise</a></li>
<li><a href="/health-and-nutrition/organic-diy-health">Organic DIY Health</a></li>
</ul>
</div>
<!-- Party Momma group-->
<div class="btn-group mybtngroup">
<a class="btn">Party Momma</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/party-momma/pregnancy-announcement">Pregnancy Announcement</a></li>
<li><a href="/party-momma/gender-reveal">Gender Reveal</a></li>
<li><a href="/party-momma/baby-shower">Baby Shower</a></li>
<li><a href="/party-momma/birth-announcement">Birth Announcement</a></li>
<li><a href="/party-momma/birthdays">Birthdays</a></li>
</ul>
</div>
<!-- Stations group-->
<div class="btn-group mybtngroup">
<a class="btn">Stations</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/stations/hospital-bag">Hospital Bag</a></li>
<li><a href="/stations/diaper-bag">Diaper Bag</a></li>
<li><a href="/stations/changing-station">Changing Station</a></li>
<li><a href="/stations/baby-gear">Baby Gear</a></li>
</ul>
</div>
<!-- Memory Markers group-->
<div class="btn-group mybtngroup">
<a class="btn">Memory Markers</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/memory-markers/diy">Do It Yourself</a></li>
<li><a href="/memory-markers/buy-it">Buy It</a></li>
</ul>
</div>
<!-- Reviews group-->
<div class="btn-group mybtngroup">
<a class="btn mycaret">Reviews</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="reviews/games">Game Reviews</a></li>
<li><a href="reviews/gear">Gear Reviews</a></li>
<li><a href="reviews/learning">Learning Reviews</a></li>
</ul>
</div>
<!-- Blog-->
<a class="btn mybtngroup" href="/mommy-madness">
Blog
</a>
</div> <!-- closing div#btn-group-justified -->
</header>
答案 0 :(得分：1)
你的选择器错了。 div和body之间没有header，您需要将:hover选择器应用于a，而不是li
header > div > div > a:hover {
background-color: #d1e2ff;
}
html > body > header > #btn-group-justified > div.open > ul.dropdown-menu > li a:hover{
background-color: #d1e2ff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="page-header">
<!-- logo -->
<h1><a href=""><img src="mommyinfologo.png"/></a></h1>
<div class="btn-group" id="btn-group-justified">
<!-- Home Group -->
<div class="btn-group mybtngroup">
<a class="btn">Home</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/mommy-madness">This Mommy's Madness</a></li>
<li><a href="/about">About Mommy Info</a></li>
<li><a href="/contact">Contact Mommy Info</a></li>
</ul>
</div>
<!-- Pregnancy group-->
<div class="btn-group mybtngroup">
<a class="btn">Pregnancy</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/pregnancy/trying-to-conceive">Trying to Conceive</a></li>
<li><a href="/pregnancy/fetal-development">Fetal Development</a></li>
<li><a href="/pregnancy/gender-predictions">Gender Predictions</a></li>
<li><a href="/pregnancy/labor-and-delivery">Labor and Delivery</a></li>
</ul>
</div>
<!-- All About Baby group-->
<div class="btn-group mybtngroup">
<a class="btn">All About Baby</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/all-about-baby/advice">Advice</a></li>
<li><a href="/all-about-baby/guidelines">Guidelines</a></li>
<li><a href="/all-about-baby/milestones">Milestones</a></li>
<li><a href="/all-about-baby/learning-development">Learning Development</a></li>
</ul>
</div>
<!-- Health and Nutrition group-->
<div class="btn-group mybtngroup">
<a class="btn">Health and Nutrition</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/health-and-nutrition/pregnancy-nutrition">Pregnancy Nutrition</a></li>
<li><a href="/health-and-nutrition/breastfeeding">Breastfeeding</a></li>
<li><a href="/health-and-nutrition/formula-feeding">Formula Feeding</a></li>
<li><a href="/health-and-nutrition/toddler-nutrition">Toddler Nutrition</a></li>
<li><a href="/health-and-nutrition/prenatal-exercise">Prenatal Exercise</a></li>
<li><a href="/health-and-nutrition/postpartum-exercise">Postpartum Exercise</a></li>
<li><a href="/health-and-nutrition/organic-diy-health">Organic DIY Health</a></li>
</ul>
</div>
<!-- Party Momma group-->
<div class="btn-group mybtngroup">
<a class="btn">Party Momma</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/party-momma/pregnancy-announcement">Pregnancy Announcement</a></li>
<li><a href="/party-momma/gender-reveal">Gender Reveal</a></li>
<li><a href="/party-momma/baby-shower">Baby Shower</a></li>
<li><a href="/party-momma/birth-announcement">Birth Announcement</a></li>
<li><a href="/party-momma/birthdays">Birthdays</a></li>
</ul>
</div>
<!-- Stations group-->
<div class="btn-group mybtngroup">
<a class="btn">Stations</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/stations/hospital-bag">Hospital Bag</a></li>
<li><a href="/stations/diaper-bag">Diaper Bag</a></li>
<li><a href="/stations/changing-station">Changing Station</a></li>
<li><a href="/stations/baby-gear">Baby Gear</a></li>
</ul>
</div>
<!-- Memory Markers group-->
<div class="btn-group mybtngroup">
<a class="btn">Memory Markers</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="/memory-markers/diy">Do It Yourself</a></li>
<li><a href="/memory-markers/buy-it">Buy It</a></li>
</ul>
</div>
<!-- Reviews group-->
<div class="btn-group mybtngroup">
<a class="btn mycaret">Reviews</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<ul class="dropdown-menu mylist">
<li><a href="reviews/games">Game Reviews</a></li>
<li><a href="reviews/gear">Gear Reviews</a></li>
<li><a href="reviews/learning">Learning Reviews</a></li>
</ul>
</div>
<!-- Blog-->
<a class="btn mybtngroup" href="/mommy-madness">
Blog
</a>
</div> <!-- closing div#btn-group-justified -->
</header>