導航欄懸停時的CSS樣式

Question

我如何才能使懸停在li的高度上，看到這張照片時，懸停僅適用於小尺寸。 我希望它具有所有尺寸。

我希望它占用所有空間，例如這張選定的圖片：

的CSS

 ul { list-style: none; } li { display: inline-block; float: right; padding: 10px } li:hover { color:white; background-color:orange; }

 <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>

Answer 1

試試這個解決方案............

// 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>

Answer 2

 <!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>

導航欄懸停時的CSS樣式

問題描述

2 個解決方案

解決方案1
0 已采納 2016-07-20 11:13:44

解決方案2
-1 2016-07-20 11:16:13

導航欄懸停時的CSS樣式

問題描述

2 個解決方案

解決方案1 0 已采納 2016-07-20 11:13:44

解決方案2 -1 2016-07-20 11:16:13

解決方案1
0 已采納 2016-07-20 11:13:44

解決方案2
-1 2016-07-20 11:16:13