html - How to highlight a whole cell when hovering over link -


i have horizontal nav bar highlight entire cell link in when hover on link, however, can immediate area around text highlight. appreciate pointers on how can achieve this.

here js fiddle: http://jsfiddle.net/pykxb/1/

this css code:

#horizontal-style {     display: table;     width: 100%;     margin:0px;     padding-top:0px;     padding-bottom:0px;     padding-left:0px;     padding-right:0px; }  #horizontal-style li {     display: table-cell;     vertical-align:middle;     height:auto;     padding:1%; }  #horizontal-style a:link {     display: block;     border: none;     text-align: center;     margin:auto;     padding:none;     background:#ebebec;     color:#005da4;     text-decoration:none;     font-family: arial, helvetica, sans-serif;     font-weight:bold;     font-size:90%;     display:inline-block;     vertical-align:middle; }  #horizontal-style a:visited {     display: block;     border: none;     text-align: center;     margin:auto ;     padding:none;     background: #ebebec;     color:#005da4;     text-decoration:none;     font-family: arial, helvetica, sans-serif;     font-weight:bold;     font-size:90%;     display:inline-block;     vertical-align:middle; }  #horizontal-style a:hover {     display: block;     border: none;     text-align: center;     margin:auto ;     padding:none;     background: #acce39;     color:#005da4;     text-decoration:none;     font-family: arial, helvetica, sans-serif;     font-weight:bold;     font-size:90%;     display:inline-block;     vertical-align:middle; }  #horizontal-style a:hover {     display: block;     border: none;     text-align: center;     margin:auto ;     padding:none;     background: #acce39;     color:#005da4;     text-decoration:none;     font-family: arial, helvetica, sans-serif;     font-weight:bold;     font-size:90%;     display:inline-block;     vertical-align:middle; } 

this html code:

<ul id="horizontal-style">     <li><a href=# >home</a></li>     <li><a href=# >about us</a></li>     <li><a href=# >online<br />courses</a></li>     <li><a href=# >registration</a></li>     <li><a href=# >faculty</a></li>     <li><a href=# >calendar</a></li>     <li><a href=# >store</a></li>     <li><a href=# >testimonials</a></li>     <li><a href=# >online<br/>lectures</a></li>     <li><a href=# >contact us</a></li>     <li><a href=# >forum</a></li> </ul> 

this works fine, have here

#horizontal-style li {     display: table-cell;     vertical-align:middle;     height:auto;     padding:1%;     background:#ebebec; } #horizontal-style li:hover{     background-color:#acce39; } 

Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -