[홈페이지만들기] css ul li를 이용한 가로메뉴

[홈페이지만들기] css ul li를 이용한 가로메뉴 

<style>
.hbox-menu {
    margin-top:4px;
    width:100%;
    border-top:1px solid #615C55;
    border-bottom:1px solid #615C55;
    display: inline-block;
    overflow: hidden;
}

.hbox-menu li {
    float: left;
    width:20%; 
}

.hbox-menu a {
    display: block;text-align:center;
    height: 50px;
    line-height: 50px;
    background-color: #F0E7DB;
    color: #666666;
    border-right: 1px solid #615C55;
    font-weight:bold;    
}

.hbox-menu li:last-child a { 
    border-right: 0;
}
</style>

<div>
    <ul class="hbox-menu">
    <li><a onclick="location.href='/product/list.html?cate_no=1'">menu1</a></li>
    <li><a onclick="location.href='/product/list.html?cate_no=2'">menu2</a></li>
    <li><a onclick="location.href='/product/list.html?cate_no=3'">menu3</a></li>
    <li><a onclick="location.href='/product/list.html?cate_no=4'">menu4</a></li>
    <li><a onclick="location.href='/product/list.html?cate_no=5'">menu5</a></li> 
    </ul>
</div>