mohamed med mohamed med - 4 months ago 7
HTML Question

Css Style on navbar Hover

How can I make hover on the height of

li
see this picture the hover applied just on small size. I want it to take all the size.

enter image description here

I want it to take all space like this selected image:
enter image description here

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

Try this solution............

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