Html CSS-将鼠标悬停在主菜单或子菜单上时，保持子菜单可见

是否可以仅使用CSS修改以下代码以保持此菜单+子菜单组合的悬停状态？如果主菜单或子菜单悬停，子菜单应保持可见。目前，只有主菜单悬停正在工作。谢谢

HTML+CSS如下：

<div id="dropnav">
    <ul>
        <li id="main"><a href="#">One</a></li>
        <li id="main"><a href="#">Two</a>
            <ul>
            <li><a href="#">Two A</a></li>
            <li><a href="#">Two B</a></li>
            <li><a href="#">Two C</a></li>
            <li><a href="#">Two D</a></li>
            </ul>            
        </li>
        <li id="main"><a href="#">Three</a></li>
        <li id="main"><a href="#">Four</a></li>
        <li id="main"><a href="#">Five</a></li>
    </ul>    
</div>

#dropnav {
height:50px;
width: 100%;
text-decoration: none;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
}

#dropnav ul{
margin:0px;
padding:0px;
text-align: center;
}

#dropnav ul li{
display:inline; 
float:left; 
list-style:none; 
margin-left:auto; 
position:relative; 
height:25px; 
width: 20%;
font-size: 20px;
font-family: 'Cabin', Helvetica, Arial;
}

#dropnav ul li ul{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
z-index: 99;
top:50px;
}

#dropnav  ul li:hover > ul{
display:block;
width:500px;
left: -50%;
}

#dropnav ul li ul li:hover > a{
color:#FFFFFF;
text-decoration:none;
display:block;
width:500px;
left: -50%;
}

#dropnav{
高度：50px；
宽度：100%；
文字装饰：无；
左边距：自动；
右边距：自动；
边缘顶部：10px；
}
#dropnav-ul{
边际：0px；
填充：0px；
文本对齐：居中；
}
#李德普{
显示：内联；
浮动：左；
列表样式：无；
左边距：自动；
位置：相对位置；
高度：25px；
宽度：20%；
字体大小：20px；
字体系列：“小屋”，Helvetica，Arial；
}
#dropnav ul li ul{
边际：0px；
填充：0px；
显示：无；
位置：绝对位置；
左：0px；
z指数：99；
顶部：50px；
}
#dropnav ul li:悬停>ul{
显示：块；
宽度：500px；
左-50%；
}
#dropnav ul li:悬停>a{
颜色：#FFFFFF；
文字装饰：无；
显示：块；
宽度：500px；
左-50%；
}

尝试将子菜单样式更改为：

#dropnav ul li ul {
    margin:0px;
    padding:0px;
    display:none;
    position:relative;
    left:0px;
    z-index: 99;
    top:0px;
    padding-top: 50px;
}