html - How to make navbar tab fill up upon hover in IE? -
so have done in chrome, firefox. today realized why not try in ie! well, looks ie doesn't want work same...
does know how can different way make work ie?
html:
<div id="navbar"> <div id="navlinks"> <nav> <ul id="navlist"> <li><a href="#">home</a></li> <li><a href="#">assignments</a></li> <li><a href="#">dream cars</a></li> <li><a href="#">projects</a></li> <li><a href="#">contact</a></li> </ul> </nav> </div> </div> css:
body{ margin:0 auto; } #logo{ margin:auto; width:430px; } #navbar{ width:100%; height:50px; display:table; margin:auto; } #navlinks ul { display:table; border-collapse:collapse; width:100%; margin:0 0 20px; padding:0; list-style:none; } #navlinks li { display: table-cell; vertical-align: middle; text-align:center; width:20%; background: linear-gradient(to right, #111 50%, #444 50%); background-size: 200% 100%; background-position:left top; transition:all 1s ease; } #navlinks li:hover{ background-position:right top; } #navlinks { text-decoration:none; color: #999; text-transform: uppercase; display:block; padding-top:10px; padding-bottom:10px; font: bold 12px/25px arial, helvetica; transition:color 1s ease-in-out; } #navlinks li:hover a{ color:black; }
Comments
Post a Comment