Html 制造<；李>；作为整体<；a>；（链接）垂直菜单

有没有想法把李作为整个链接

#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;
}

以下是链接：

我尝试过的选项：

一个{display:block；}-->这起作用了，但是第二个UL下降了

{display:inline block；}-->第二个UL问题已修复，但li不是链接

{显示：内联块；宽度：100%；高度：100%；}-->与2相同

提前谢谢

#nav a {
    display: block;
    text-decoration: none;
    float: left;
    width: 80px;
}

#nav ul li{
    background: #c0c0c0;
    border-bottom: 1px dotted #404040;
    overflow:hidden;
}

---

工作示例：

您需要更改此css

    #nav a {
    display: block;
    text-decoration: none;
    }

你可以在这里查一下

---

这是因为填充物不起作用。该元素实际上与其他元素重叠

#nav ul ul{
    position: absolute;
    top:0px;
    left: 80px;
    display: none;
    padding-left:0px;
}

您可以在此处找到完整的演示： 试试看

#nav{
    position: relative;
    width: 120px;
}
#nav a {
    display: inline-block;
    text-decoration: none;
    width: 100%;
    background-color: lightblue;
}
#nav ul{
    list-style-type: none;
}
#nav ul li{
    background: #c0c0c0;
    border-bottom: 1px dotted #404040;
    position: relative;
}
#nav ul ul{
    position: absolute;
    left: 43px;
    display: none;
    top: 0;
}
#nav ul ul li{
    background: #c0c0c0;
}
#nav ul li:hover ul{
    display: inline;
}

演示：

像这样试试

            #navbar ul li {
            display: inline;
            position: relative;
            }

            #navbar ul li ul  {
            position: absolute;
            visibility: hidden;
            }

            #navbar ul li:hover>ul {
            visibility: visible;
            position: absolute;
            display: block;
            }

            <div id="navbar">
                <ul>
                    <li><a href="link">1</a></li>
                    <li><a href="#">2</a>
                        <ul>
                            <li><a href="link">x</a></li>
                            <li><a href="link">y</a></li>
                            <li><a href="link">z</a></li>
                        </ul>
                    </li>
                    <li><a href="link">3</a></li>
                </ul>
            </div>

#导航栏ul li{
显示：内联；
位置：相对位置；
}
#纳瓦尔{
位置：绝对位置；
可见性：隐藏；
}
#导航栏ul li：悬停>ul{
能见度：可见；
位置：绝对位置；
显示：块；
}

Xeano！你是互联网如此棒的原因之一，非常感谢你。呵呵，你真好。如果你喜欢这个答案，请接受：）