html - 将整个 菜单作为链接

Question

我知道这个问题以前出现过很多次，但我找不到针对我的具体情况的任何解决方案。我有一个导航栏，其中整个 <li>的应该是“可点击的”。现在只有(消息/文本)是“可点击的”。我使用 HTML 和 CSS。以下是代码:

HTML:

<!--mainmenu-->
<ul id="Navigation">
  <li><a href="./index.html" title="">Shop</a></li>
  <li>About</li>
  <li>
    Fenster
    <ul id="Navigation">
      <li> Studio</li>
      <li>Home</li>
      <li>Ambiente</li>
    </ul>
  </li>
  <li>Küchen</li>
  <li>Türen</li>
  <li class="menuitem"><a href="./contact.html" title=""><div class="menulink">Contact</div></a></li>
  <li>Sale %</li>
</ul>

CSS:

@charset "utf-8";
/* CSS Document */

body {
  font-size: 13px;
  text-align: center;
}


#Navigation {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}

#Navigation li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
    font-size: 16px;
}
#Navigation li:hover {
  background: #555;
  color: #fff;
}
#Navigation li:visited {
  color: #fff;
}
#Navigation li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#Navigation li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
#Navigation li ul li:hover { background: #666; }
#Navigation li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

#Navigation li a {;
text-decoration: none;
color: black;
margin: 0px;
display:block;
width:100%;
height:100%;
}

#Navigation li a:hover {
text-decoration: none;
color: white;
}

有人对此有一个巧妙的解决方案吗？

Answer 1

最好的方法是将大小和填充添加到 a 而不是 li。您还必须使其成为 display: block。

<ul>
    <li><a href="#yes">Yes</a></li>
    <li><a href="#no">No</a></li>
    <li><a href="#maybe">Maybe</a></li>
    <li><a href="#so">So</a></li>
</ul>

CSS:

li {
    margin: 3px 0;
}

li a {
    display: block;
    width: 100px;
    padding: 10px 15px;
    text-align: center;
    border: solid #F00 1px;
}

li a:hover {
    background-color: #600;
    color: #FFF;
}

fiddle :

http://jsfiddle.net/2xjctwv9/