html - Navigation Bar - LI:HOVER Full Height -


so want navigation bar, with, when hover on li / element, different color full height of navigation bar. because when hover on it, background-color of text changes... quite ugly...

i hope clear enough, system blocks me uploading image :o.

thank you!

edit: forgot html , 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; } 

the background color applying text background because you're using display: inline;

any background give inline element apply content only, different block element apply entire element.

the easiest solution change display inline-block this:

#nav li {  display: inline-block; } 

jsbin


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -