css로 이미지없이 탭오버 메뉴 만들기

<style>

.menuTab{display: inline-block;}

.menuTab ul{list-style: none; margin-left: 1px;}

.menuTab ul li{float: left; border:1px solid #C9C9C9; margin-left: -1px; padding: 7px 10px; margin-bottom: 5px;}

.menuTab ul li:hover{border: 1px solid red; margin-right: 1px;}

.menuTab ul li:hover+li{border-left: none;}

 

.menuTab ul li a{color:black;}

</style>

 

<div class='menuTab'>

<ul>

<li class=''><a href="">공지사항</a></li>

<li class=''><a href="">가맹정 게시판</a></li>

<li class=''><a href="">자유게시판</a></li>

<div style='clear: both;'></div>

</ul>

</div>