css - How to set horizontal to list vertical li ul -

css - How to set horizontal to list vertical li ul -

i need help! have image show problem

i want utilize css this, , don't utilize anymore div or element because code in asp.net. each item showed database.

example: asp code:

<ul id="vitravlenav" name="vitravlenav"> <asp:sqldatasource id="sqldatasource1" runat="server" connectionstring="<%$ connectionstrings:dulich %>" selectcommand="select top(8) [tenmenu], [urlhinh] [menu] anhien=1"> </asp:sqldatasource> <asp:repeater id="repeater1" runat="server" datasourceid="sqldatasource1"> <itemtemplate> <li> <a href="<%# eval("urlhinh") %>" title="<%# eval("tenmenu") %>" ><im<%#eval("tenmenu") %></a> </li> </itemtemplate> </asp:repeater> </ul>

css code:

#vitravlenav { margin: 0px 0px; list-style: none; letter-spacing: -0.5px; font-size: 16px; text-shadow: 0 -1px 3px #202020; width: 100%; height: 100%; } #vitravlenav li { display: block; float: left; border-right: 1px solid white; border-left: 1px solid white; width: 12.3%; height: 100px; text-align:center; vertical-align:middle; background-color: #0099ff; } #vitravlenav li:hover { box-shadow: inset 0 1px 4px 4px white; } #vitravlenav li { color: white; text-decoration: none; text-align: center; display: block; line-height: 50px; outline: none; padding-top:40px; }

here html output image: http://i1265.photobucket.com/albums/jj507/mabonblog/3_zps02c6598a.png

you using nth-of-type-pseudo selectors: on w3.org

#vitravlenav li { position: absolute ... } #vitravlenav li:nth-of-type(3) { left: 25% } #vitravlenav li:nth-of-type(5) { left: 50% } #vitravlenav li:nth-of-type(6) { left: 70% }

you find demo here, on: dabblet or with code on dabblet. code gist on github.

with best regards.

css asp.net