make <li> as whole <a> (link) vertical menu

[espoo]

any idea to make LI as whole link? \[code\]#nav{position: relative;width: 120px;}#nav a {display: inline;width: 100%text-decoration: none;}#nav ul{list-style-type: none;}#nav ul li{background: #c0c0c0;border-bottom: 1px dotted #404040;}#nav ul ul{position: absolute;left: 81px;display: none;}#nav ul ul li{background: #c0c0c0;}#nav ul li:hover ul{display: inline;}\[/code\]here's the link: jsfiddleoptions I tried:\[quote\] [*]a {display: block; } -->this worked, but the second UL drops down. [*]a {display: inline-block;} -->second UL issue is fixed but LI is not a link. [*]a {display: inline-block; width: 100%; height: 100%; } --> same as 2. \[/quote\]thanks in advance.