css - How do i make the whole tile(.ie the tab in the nav menu) part of the hyperlink -

i have made nav menu based on windows 8 concept. want whole tile becomes part of hyperlink. if click anywhere on tile take linked site. code here on js fiddle: http://jsfiddle.net/2lkdy/

 // html         <div class="div1">            <ul>             <li><a href="item1.html">item 1</a></li>             <li><a href="#">item 2</a></li>             <a href="#"><li>item 3</a></li>              <a href="#"><li>item 4</a></li>            </ul>        </div>  // css  .div1 {list-style: none;     margin-left:14%;     margin-right:auto;     margin-bottom:auto;     margin-top:auto;     text-decoration:none;     display:block;} .div1 li {     display: inline;     float: left;     padding: 3em;     color: #000;     font-family: "open sans","century gothic","trebuchet ms","ubuntu","sans-serif";     font-weight: 400;     font-size: 18pt;     -webkit-transition: 0.5s;     width:85px; } .div1 ul li:hover{     padding: 80px;     margin-top: -20px;     -webkit-transition: 0.5s; } .div1 ul li {     color: #000;     text-decoration: none;  }  .div1:hover ul:hover li{     opacity:0.5; } .div1:hover ul:hover li:hover{     opacity:10; } .div1 ul li:nth-of-type(1){     background:#cb4f1e; } .div1 ul li:nth-of-type(2){     background:#d3711b;  } .div1 ul li:nth-of-type(3){     background:#94b339;  } .div1 ul li:nth-of-type(4){      background:#68b43f; } @media screen , (max-width: 480px) {     .div1 {         position: relative ;         min-height: 70px;     }        .div1 ul {         width: 180px;         padding: 5px;         position: absolute;         top: 0;         overflow: hidden;         left: 0;         border: solid 1px #aaa;         background: url("threelines_48_3.png") no-repeat 10px 11px;         background-position:left 10px;         box-shadow: 0 1px 2px rgba(0,0,0,.3);         opacity:1;         min-height: 40px;     }     .div1 li {         display: none; /* hide <li> items */         margin: 0;         opacity: 1;     }     .div1 ul:hover {         box-shadow: 0 1px 2px rgba(0,0,0,0);         background:transparent;         border: 0px solid #000;     }     .div1 ul:hover li {         display: block;         margin: 0 0 5px;         opacity: 1;         height: 20px;         padding:4px;         text-align: center;     }     .div1 ul li{         width:180px;         padding:4px;         margin-top:2px;         opacity:1;         height:20px;     }     .div1 ul li:hover{         opacity: 1;         height:20px;         padding:4px;         text-align: center;     } .div1 ul li:nth-of-type(1){     background:#cb4f1e; } .div1 ul li:nth-of-type(2){     background:#d3711b;  } .div1 ul li:nth-of-type(3){     background:#94b339;  } .div1 ul li:nth-of-type(4){      background:#68b43f; } } 

formatted.

try this:

jsfiddle demo

html:

<ul>     <li class="item1"><a href="#">1</a></li>     <li class="item2"><a href="#">2</a></li>     <li class="item3"><a href="#">3</a></li>     <li class="item4"><a href="#">4</a></li> </ul> 

css:

* {margin:0; padding:0; } ul { width:400px; float:left } li { float:left; list-style:none;} li { display:block;  width:200px; height:200px; }  li.item1 { background:red; } li.item2 { background:orange; } li.item3 { background:lime; } li.item4 { background:blue; }  li a:hover { opacity:0.5;} 

explanation:

by default a element inline, if want give height , width need make either display:block or display:inline-block height/width work , make whole thing clickable.