请问下面的代码怎样修改才能添加第三级,第四级菜单?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">
ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}
li {float: left;}
li a, .dropbtn {display: inline-block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}
li a:hover, .dropdown:hover .dropbtn {background-color: #1f75cf;}
li.dropdown {display: inline-block;}
.dropdown-content {display: none;position: absolute;background-color: #fafafa;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);}
.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}
.dropdown-content a:hover {color: white;background-color: #1f75cf;}
.show {display: block;}
</style>
</head>
<body>
<ul>
<li class="dropdown">
<a id="a1" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 A</a>
<div class="dropdown-content" id="dropdown-a1">
<a href="#">下拉 1</a>
<a href="#">下拉 2</a>
<a href="#">下拉 3</a>
</div>
</li>
<li class="dropdown">
<a id="b1" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 B</a>
<div class="dropdown-content" id="dropdown-b1">
<a href="#">下拉 1</a>
<a href="#">下拉 2</a>
<a href="#">下拉 3</a>
</div>
</li>
</ul>
<script src="script.js"></script>
<script>
function showList(a) {
hideList("dropdown-content" + a.id);
document.getElementById("dropdown-" + a.id).classList.toggle("show");
}
function hideList(option) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.id != option) {
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
hideList("");
}
}
</script>
</body>
</html>