如何实现在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： 

 js：

var min=1,max=5;
 window.οnlοad=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：

		

			
aa
			
aa
			
aa
		
		

			
bb
		
	

js：

var min=1;
		window.οnlοad=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";
				}
			}
		}