Css Style on navbarホバー

ホバーを高さにするにはどうすればいいですかliこの写真を参照してくださいホバーはちょうど小さいサイズに適用されます。私はそれがすべてのサイズを取るようにしたい。Css Style on navbarホバー

私は、この選択した画像のように、すべてのスペースを取りたい：

CSS

ul { 
 
\t list-style: none; 
 
} 
 

 
li { 
 
\t display: inline-block; 
 
\t float: right; 
 
\t 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>

出典

2016-07-20 mohamed med

私が正しく追加されていないHTMLとCSS –

スニペットを追加 –

にタイプミス間違いがありますあなたのcss ..スペースを削除するb etween李ホバー： '李：私はそのように単純な男 –

は、このソリューションを試してみてください...... ......

[OK]を行わ

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

出典

2016-07-20 11:13:44

感謝：25ピクセル; } navi：hover { color：white！important; 背景色：オレンジ; } –

-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> 
 
\t \t \t \t \t \t \t \t \t <li>two</li> 
 
\t \t \t \t 
 
\t \t \t \t \t \t \t \t \t <li><a href="#services">three</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href="index-4.html">four</a></li> 
 
\t \t \t \t \t \t \t \t \t <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>

出典

2016-07-20 11:16:13

ああ....ちょうど

答えて