css - 我如何使整个图块(即导航菜单中的选项卡)成为超链接的一部分

我已基于Windows 8概念制作了该导航菜单。
我现在希望整个图块成为超链接的一部分。因此，如果我们单击磁贴上的任意位置，它将带我们到链接的站点。
代码在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: all 0.5s;
    width:85px;
}
.div1 ul li:hover{
    padding: 80px;
    margin-top: -20px;
    -webkit-transition: all 0.5s;
}
.div1 ul li a {
    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 and (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 all <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;
}
}

格式化。

最佳答案

尝试这样的事情：

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 a { display:block;  width:200px; height:200px; }

li.item1 a { background:red; }
li.item2 a { background:orange; }
li.item3 a { background:lime; }
li.item4 a { background:blue; }

li a:hover { opacity:0.5;}

说明：

默认情况下，a元素为inline，因此，如果要为其赋予height和width，则需要将其设置为display:block或display:inline-block，以使height/width实际起作用并使整个事物可点击。

关于css - 我如何使整个图块(即导航菜单中的选项卡)成为超链接的一部分，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17594315/