如何在我的引导程序中的下拉菜单中更改悬停?

时间:2016-02-09 02:51:55

标签: twitter-bootstrap

.navbar .nav > li.dropdown.open.active > a:hover, 
.navbar .nav > li.dropdown.open > a
{
   color: #fff;
   background-color: #f7ad1a;
   border-color: #fff;
}
<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				<li class="ediwow actives"><a href="index1.php"><b>Home</b></a></li>
				<li class="dropdown ediwow" role="presentation">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><b style="color:white;">Room</b>
				<span class="caret"></span></a>
				<ul class="dropdown-menu" style="background-color:#537e9e;">
					<li><a href="#">Function Room</a></li>
					<li><a href="#">Plenary Hall</a></li>
				</ul>
				</li>
				<li class="ediwow"><a href="contact.php"><b>Contact</b></a></li>
				<li class="ediwow"><a href="about.php"><b>About us</b></a></li>
				<li class="ediwow"><a href="location.php"><b>Location</b></a></li>
				<div class="dropdown" style="float:right; margin-top:12px; margin-left:500px;">
				 <?php
				if (isset($_SESSION["id"])) 
				{
					echo '<b style="color:wiht;">Welcome</b> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">'. $_SESSION["fname"] . '<span class="caret"></span></button>
								<ul class="dropdown-menu ediwow" style="background-color:#537e9e;">
									<li><a href="changeoass_form.php">Change Password</a></li>
									<li><a href="singout.php">Sign out</a></li>
								</ul>';
				} 
				else 
				{
					echo '<li><a href="singin.php" style="font-weight:bold; font-size:15px; color:white;">Sign in | Sign up</a></li>';
				}
				?>
				</div>

嗨,大家好我是一个初学者在制作一个网络,我现在使用bootstrap为我的设计 我的问题在于我不知道如何在bootstrap thx的下拉菜单中更改悬停颜色,你回答:D enter image description here

1 个答案:

答案 0 :(得分:0)

试试这个

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

<强> CSS

.dropdown-menu {
    background-color: black;
}

.dropdown-menu > li > a {
        color: white;
}

.dropdown-menu > li > a:hover {
    background-color: red;
    background-image: none;
}

Fiddle Demo