如何实现在div上做出凸出效果。。。的导航栏。

在div上实现凸出效果，如图：

代码 

css：

*{margin: 0; padding: 0;}
    .clickA{
      position: relative;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      width: 100px;
      height: 100px;
      box-shadow: 0.3px 0.5px 0.1px 0.1px black;
      background-color: #eee;
    }
    .clickB{
      position: relative;
      display: inline-block;
      *display: inline;
      *zoom: 1;
    /*  width: 100px;
      height: 100px;
      box-shadow: 0.3px 0.5px 0.1px 0.1px black;
      background-color: #FAFAFA;*/
    }
    .skillImg img{
      position: relative;
      width: 81px;
      height: 78px;
      margin: 9px;
    }
    .skill{
      position: relative;
      width: 1300px;
      height: 200px;
      box-shadow: 0.1px 0.5px 0.3px black;
      background-color: #eee;
    }

html： 

<ul class="skillImg">
    <li onclick="clickC(1)" id="click1" class="clickA"><img src="img/test1.png" /></li>
    <li onclick="clickC(2)" id="click2" class="clickA"><img src="img/test1.png" /></li>
    <li onclick="clickC(3)" id="click3" class="clickA"><img src="img/test1.png" /></li>
    <li onclick="clickC(4)" id="click4" class="clickA"><img src="img/test1.png" /></li>
    <li onclick="clickC(5)" id="click5" class="clickA"><img src="img/test1.png" /></li>
  </ul>
  <div class="skill">
  </div>

 js：

var min=1,max=5;
 window.onload=clickC;
 function clickC(obj){
  if(Number(obj)){
    min=obj;
  }
  for(var i=1;i<(max+1);i++){
    if(i==min){
      document.getElementById("click"+i).className="clickA";
    }else{
      document.getElementById("click"+i).className="clickB";
    }
  }
 }

 

 

 

也可以在table里实现。效果图：

代码

css：

table{
			width: 300px;
			height: 200px;
			background-color: #EEE0E5;
		}
		.aa{
			background-color: #EEE0E5;
			border-top: 1px solid green;
			border-left: 1px solid black;
			border-right: 1px solid black;
		}
		.bb{
			background-color: #d1d1d1;
			/*border-top: 1px solid green;
			border-left: 1px solid black;
			border-right: 1px solid black;*/			
		}

html：

<table border="0" cellpadding="20" cellspacing="0">
		<tr>
			<th class="aa" onclick="bbb(1)" id="ccc1">aa</th>
			<th class="aa" onclick="bbb(2)" id="ccc2">aa</th>
			<th class="aa" onclick="bbb(3)" id="ccc3">aa</th>
		</tr>
		<tr>
			<td rowspan="3">bb</td>
		</tr>
	</table>

js：

var min=1;
		window.onload=bbb;
		function bbb(obj){
			if (Number(obj)) {
				min=obj;
			}
			for(var i=1;i<4;i++){
				if (i==min) {
					document.getElementById("ccc"+i).className="aa";
				}else{
					document.getElementById("ccc"+i).className="bb";
				}
			}
		}