html - Menu list with borders not displaying correctly -
i have menu 5 items. idea there border between each.
the issue of menu items need double lined, when happens, borders on place.
i've been looking @ code hour , not sure how correct this.
i have them single lined, goes against design.
jsfiddle:
css:
body { background-color:black; } #menu { width:500px; top:100px; -border:solid 1px #ffff00; height:40px; vertical-align:middle; } ul { list-style-type: none; margin: 0; padding: 0; font-family:'open sans', sans-serif; font-size: 12px; text-transform: uppercase; color:#fff; width:100%; height:40px; } li { display: inline-block; width:19%; height:40px; text-align:center; padding-top:9px; vertical-align:center; } li~li { border-left: 3px solid #ffffff } li>a:hover { color:#fff; } li>a { color:rgb(200, 200, 200); text-decoration:none; }
html:
<div id="menu"> <ul> <li><a href="#">philosophy</a> </li> <li><a href="#">your trainer</a> </li> <li><a href="#">word of mouth</a> </li> <li><a href="#">blog</a> </li> <li><a href="#">contact</a> </li> </ul> </div>
change display
value inline-block
table-cell
, change vertical-align
value middle
(vertical-align:center
not exist @ all).
Comments
Post a Comment