导航栏上的Css样式悬停

时间：2016-07-20 10:59:39

标签： html css

如何将鼠标悬停在li的高度上，请参阅此图片，悬停应用于小尺寸。我想要它采取所有的大小。

enter image description here

我希望它能像所选图像一样占据所有空间： enter image description here

CSS

＆＃13;
＆＃13; 
ul {
	list-style: none;
}

li {
	display: inline-block;
	float: right;
	padding: 10px
}
li:hover  {
   color:white;
   background-color:orange;
}
＆＃13; 
<nav>

   <a href="#" id="menu-icon"></a>
   <ul>
      <li><a href="index.html" class="current"><?php echo $lang['MENU_HOME']; ?></a></li>
      <li class="current"><a href="index-1.html"><?php echo $lang['MENU_ABOUT_US']; ?></a></li>
     <li><a href="#services"><?php echo $lang['MENU_OUR_PRODUCTS']; ?></a></li>
     <li><a href="index-4.html"><?php echo $lang['MENU_CONTACT_US']; ?></a></li>
     <li><a href="index-2.html"><?php echo $lang['MENU_History']; ?></a></li>
  </ul>

</nav>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

试试这个解决方案............

<强> // CSS 

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .nav-list > li {
    display: inline-block;
    float: right;
  }
  .nav-list > li > a {
    display: block;
    padding: 10px;
    color: #666;
    text-decoration: none;
  }
  .nav-list > li > a:hover,
  .nav-list > li > a:focus {
    background-color: orange;
    outline: 0;
  }
  .nav-list > .active > a,
  .nav-list > .active > a:hover,
  .nav-list > .active > a:focus {
    background-color: orange;
    outline: 0;
  }

HTML 

<nav>
    <a href="#" id="menu-icon"></a>
    <ul class="nav-list">
    <li><a href="index.html" class="current"><?php echo $lang['MENU_HOME']; ?></a></li>
    <li class="current"><a href="index-1.html"><?php echo $lang['MENU_ABOUT_US']; ?></a></li>
    <li><a href="#services"><?php echo $lang['MENU_OUR_PRODUCTS']; ?></a></li>
    <li><a href="index-4.html"><?php echo $lang['MENU_CONTACT_US']; ?></a></li>
    <li><a href="index-2.html"><?php echo $lang['MENU_History']; ?></a></li>
    </ul>
</nav>

答案 1 :(得分：-1)

<!DOCTYPE html>
<html lang="en">
<head>
  
</head>
   <style> nav li{ padding:25px; } nav li:hover{ color:white !important; background-color:orange; } </style> 
<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="current"><a href="index.html" class="current">one</a></li>
									<li>two</li>
				
									<li><a href="#services">three</a></li>
									<li><a href="index-4.html">four</a></li>
									<li><a href="index-2.html">five</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

</body>
</html>

相关问题
最新问题