У меня есть горизонтальное меню CSS, которое имеет верхнюю границу и текст под ним.Как сделать текст в центре под верхним краем
мне нужно, чтобы получить текст под верхней границей в центре пограничной линии:
#topbar {
width:100%;
height:80px;
background-color:#000000;
}
#topbar-inner {
width:1000px;
margin:0 auto 0 auto;
}
#logo {
display:inline;
float:left;
color:#FFFFFF;
}
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
/* border-top:4px solid #666666; */
margin-right:20px;
/* padding-top:20px; */
min-width:120px;
}
#menu > li {
display:inline-block;
list-style:none;
/* margin-top:25px; */
margin-left:auto;
margin-right:auto;
}
#menu > li:hover {
color:#FFFFFF;
}
#menu li a {
display:block;
padding-top:25px;
border-top:4px solid #CCCCCC;
color: #CCCCCC;
text-decoration:none;
}
#menu li a:hover {
border-color:#FFFFFF;
color:#fff
}
JS скрипку: http://jsfiddle.net/y75WZ/
любые идеи, что я могу сделать?