html和css3菜單鏈接點擊無法正常工作

Question

大家好我有簡單的菜單，但我不知道如何在整個廣場進行鏈接。現在只處理鏈接點擊。

<ul><li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
    <li> 
    <a href="#">Menu 3</a> 
    <ul> 
     <li><a href="#">Menu 4</a></li> 
     <li><a href="#">Menu 5</a></li> 
     <li><a href="#">Menu 6</a></li> 
    </ul> 
    </li> 
</ul> 

CSS：

ul { 
    text-align: left; 
    display: inline; 
    margin: 0; 
    padding: 15px 4px 17px 0; 
    list-style: none; 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
} 
ul 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; 
} 
ul li:hover { 
    background: #555; 
    color: #fff; 
} 
ul 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; 
} 
ul li ul li { 
    background: #555; 
    display: block; 
    color: #fff; 
    text-shadow: 0 -1px 0 #000; 
} 
ul li ul li:hover { background: #666; } 
ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 

JSFiddle Demo

Answer 1

它會打開該鏈接的元素被點擊時。您希望它在點擊灰色框時打開鏈接。

因此，您必須製作與灰色框大小相同的尺寸。正如其他人指出的，你將不得不從李刪除填充，並給它一個代替（或指定其高度和寬度）。

Answer 2

從li刪除填充並將其添加到a中。同時設置你的顯示：塊。

Answer 3

移動從<li>您填充到<a>並設置錨display: block;

/* add this selector */ 
li > a { 
    padding: 15px 20px; 
    display: block; 
} 

你更新的jsfiddle：在整個sqaure https://jsfiddle.net/q5y1sg9v/1/