Clever Geek Handbook

Navigation bar - LI: HOVER Full Height

So, I want a navbar, when when I hover over the li / a element, I get a different color for the full height of the navbar. Because when I hover over it, only the background color of the text changes ... which is pretty ugly ...

Hopefully this is clear enough, but the system is blocking the image from loading: o.

Thank!

EDIT: I forgot the HTML and CSS:

    <ul id="nav">
            <li><a href="">Home</a></li>
            <li><a href="">Courses</a></li>
            <li><a href="">Subjects</a></li>
            <li><a href="">Sign Up</a></li>
            <li><a href="">Log In</a></li>
        </ul>

    #nav {
    height: 60px;
    font-size: 30px;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
    background-color: #0080FF;
    width: auto;
    border: 10px solid #16044E;
    border-radius: 20px;
    z-index: 1;
}

#nav ul {
}

#nav li {
    display: inline;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

#nav li:hover {
    background-color: orange;
}

#nav a, a:active {
    color: white;
    text-decoration: none;
}
+3


source to share


5 answers


The background color only applies to the background of the text because you are using display: inline;

Any background provided to an inline element will only apply to its content other than the block element, which will be applied to the entire element.

The simplest solution is to change the display to inline-block

like this:



#nav li
{
 display: inline-block;
}

JSBin

0


source


Here's a simple solution to change the background color on hover.



ul li a:hover {
background-color: blue;

}
0


source


Add: height: 100%;

To: #nav li {

This should do it!

0


source


Add display:inline-block

in a

and give it a height equal to the value nav

. I would suggest this since setting the height to the li will make the text a link. Setting it to a

will make all link height

 #nav {
    height: 60px;
    font-size: 30px;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
    background-color: #0080FF;
    width: auto;
    border: 10px solid #16044E;
    border-radius: 20px;
    z-index: 1;
}

#nav ul {
}

#nav li {
    display: inline;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

#nav li:hover a{
    background-color: orange;
}

#nav a, a:active {
    display:inline-block;
    height:60px;
    color: white;
    text-decoration: none;
}
      

        
        
        
      

    
 <ul id="nav">
            <li><a href="">Home</a></li>
            <li><a href="">Courses</a></li>
            <li><a href="">Subjects</a></li>
            <li><a href="">Sign Up</a></li>
            <li><a href="">Log In</a></li>
        </ul>
Run codeHide result


0


source


You need to install display: inline-block

in your lists. Otherwise, the elements will behave like text elements (which it does display: inline

) and cannot have a different height outside line-height

.

See pen

0


source






More articles:


All Articles