如何修改纯CSS下拉菜单代码以新增第四级子菜单并修复对齐问题

AI 小北
2026-9-24
问题原因

你遇到的四级菜单错位问题有两个核心诱因：
HTML结构嵌套错误：你将第四级菜单的<ul>直接放在了父级<li>的闭合标签外部，导致子菜单无法识别正确的position: relative定位父元素，只能按上层容器错位显示
原有代码存在语法瑕疵：DOCTYPE标签未闭合、.menuBackground样式中float: left后错写为冒号而非分号、部分菜单<a>标签内的<span>元素缺少开头标签
修复方案

调整后可正常实现四级下拉效果的完整代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<style type="text/css"> 

/* Menu General Styles */
.menuBackground {
                background-color: #164149; /* Dark Green */
                color: White;
                float: left;         /* 修正原代码的冒号错误为分号 */
                text-align: left;    /* To align text left*/
                white-space: nowrap; /* Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered */
                margin-left: 1px;    /* This moves the menu bar to left align with the banner because of the Context Editor container misaligning it */
                margin-top: 12px;    /* This moves the menu bar up or down from the banner */
}

/* Adjust the text position in the drop-down menus to vertically align text with their icons */
.nav-text {
                display: inline-block;
                vertical-align: -2px;
}

/* Create a right facing black arrow for the year ranges in the files menu */
.arrow {
                width: 0; 
                height: 0; 
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-bottom: 4px solid black;
                display: inline-block;
                padding-bottom: 5px; /* align and centre the arrow with the text */
}

/* Transform the arrow to the right orientation */
.right {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.dropDownMenu,
.dropDownMenu ul {
                list-style: none;    /* Lists have default markers/bullets. To remove these, add list-style: none; to <ul> or <ol>: */
                margin: 0px;            /* Lists have a default margin. To remove this, add margin: 0; to <ul> or <ol>: */
                padding: 0px;        /* Lists have a default padding. To remove this, add padding: 0; to <ul> or <ol>: */
                font-weight: Normal;
                font-family: Calibri;
                font-size: 14px;
}


/* This is the menu list at the top level */
.dropDownMenu li {
                background-color: #164149; /* Dark Green */
                color: White;                    
                position: relative; /*HTML elements are positioned static by default. Static positioned elements are not affected 
                                   by the top, bottom, left, and right properties. An element with position: relative; is positioned relative to its normal position. 
                                                    Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be 
                                                    adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.*/
}

.dropDownMenu a {
                padding: 12px 20px;
                display: block;
                text-decoration: none;
                background-color: #164149; /* Dark Green */
                color: White;
                font-family: Calibri;
                font-weight: Normal;
                font-size: 14px;
}

.dropDownMenu a:hover {
                background-color: white; /* White with black font  - when top menu hovered over */
                color: black;
}


/* Level 1 Drop Down Menu */
.dropDownMenu > li {
                display: inline-block;
                vertical-align: top;
                margin-left: -4px; /* solve the 4 pixels spacing between list-items */
                background-color: #164149; /* Dark Green */
                color: White;
}

.dropDownMenu > li:first-child {
                margin-left: 0;
}

.dropDownMenu > li > a {
                background-color: #164149; /* Dark Green */
                color: White;
}
.dropDownMenu > li > a:hover {
                /*background-color: #164149;  Dark Green */
                /* color: White; */
}



/* Level 2 */
.dropDownMenu > li > ul {
                text-align: left;
                width: auto; /* change auto value with 200px if you want a bigger menu */
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                z-index: 9999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */
                font-weight: normal; 
                font-family: Calibri;
                font-size: 14px;
}

.dropDownMenu > li:hover > ul {
                display: block;
                background-color: #bddbdb;  /* Light Blue - when menu droped down */
                color: Black;
}


.dropDownMenu ul li a {
                background-color: #bddbdb; /*Light Blue - when menu droped down */
                color: Black;
                padding: 10px 20px;
                font-weight: normal; 
                font-family: Calibri;
                font-size: 14px;
}

.dropDownMenu ul li a:hover {
                background-color: #164149; /* Dark Green */
                color: White;
}

/* Make arrow white when this 2nd level menu is hovered */
.dropDownMenu ul li a:hover .arrow{
                border-bottom: 4px solid white;
}

.dropDownMenu > li:hover > a {
    background-color: white;  /* White with black font for top menu button - when child menus hovered over */
    color: Black;
}


/* Level 3 */
.dropDownMenu > li > ul > li > ul {
                text-align: left;
                display: none;
                background-color: #bddbdb; /* Light Blue - when menu droped down */
                color: Black;
                position: absolute;
                left: 100%;
                top: 0;
                z-index: 9999999;
                font-weight: normal; 
                font-family: Calibri;
                font-size: 14px;
}

.dropDownMenu > li > ul > li a {
                padding: 10px 20px;
}

.dropDownMenu > li > ul > li:hover > ul {
                display: block;
                background-color: #164149; /* Dark Green */
                color: White;
}

.dropDownMenu > li > ul > li:hover > a {
    background-color: #164149;  /* Sustain dark green with white font for the second level menu selected - when child menus hovered over */
    color: White;
}

/* Sustain WHITE arrow on 2nd level menu when 3nd level menu is hovered */
.dropDownMenu > li > ul > li:hover > a .arrow{
                border-bottom: 4px solid white;
}


/* Level 4 */
.dropDownMenu  > li > ul > li > ul > li > ul{
                text-align: left;
                display: none;
                background-color: #bddbdb; /* Light Blue - when menu droped down */
                color: Black;
                position: absolute;
                left: 100%;
                top: 0;
                z-index: 9999999;
                font-weight: normal; 
                font-family: Calibri;
                font-size: 14px;
}

.dropDownMenu  >li > ul > li > ul > li a {
                padding: 10px 20px;
}

.dropDownMenu > li > ul > li > ul > li:hover > ul{
                display: block;
                background-color: #164149; /* Dark Green */
                color: White;
}

.dropDownMenu  > li > ul > li > ul > li:hover > a {
    background-color: #164149;  /* Sustain dark green with white font for the second level menu selected - when child menus hovered over */
    color: White;
}

/* Sustain WHITE arrow on 2nd level menu when 4th level menu is hovered */
.dropDownMenu  > li > ul > li > ul > li:hover > a .arrow{
                border-bottom: 4px solid white;
}
</Style>
</head>

<body>

<div class="menuBackground">
    <ul class="dropDownMenu">
        <li><a>Home</a>
            <ul>
                <li><a href="">Home Page 1</a></li>
                <li><a href="">Home Page 2</a></li>
            </ul>
        </li>
        <li><a>Files</a>
            <ul>
                <li><a href="#"><span class="nav-text">&nbsp;&nbsp;2021&nbsp;&nbsp;&nbsp;<i class="arrow right"></i>&nbsp;2023</span></a>
                    <ul>
                        <!-- 修正嵌套结构：子ul放在li内部 -->
                        <li><a href="">2021</a>
                            <ul>
                                <li><a href="">2021 Part A</a></li>
                                <li><a href="">2021 Part B</a></li>
                            </ul>
                        </li>
                        <li><a href="">2022</a></li>
                        <li><a href="">2023</a></li>
                    </ul>
                </li>
                <!-- 补全缺失的span开头标签 -->
                <li><a href="#"><span class="nav-text">&nbsp;&nbsp;2018&nbsp;&nbsp;&nbsp;<i class="arrow right"></i>&nbsp;2020</span></a>
                    <ul>
                        <li><a href="">2018</a></li>
                        <li><a href="">2019</a></li>
                        <li><a href="">2020</a></li>
                    </ul>
                </li>
                <!-- 补全缺失的span开头标签、修正第四级嵌套结构 -->
                <li><a href="#"><span class="nav-text">&nbsp;&nbsp;2015&nbsp;&nbsp;&nbsp;<i class="arrow right"></i>&nbsp;2017</span></a>
                    <ul>
                        <li><a href="">2015</a>
                            <ul>
                                <li><a href="">2015 Part A</a></li>
                                <li><a href="">2015 Part B</a></li>
                                <li><a href="">2015 Part C</a></li>
                            </ul>
                        </li>
                        <li><a href="">2016</a></li>
                        <li><a href="">2017</a></li>
                    </ul>
                </li>
            </ul>
        </li>                                        
    </ul>
</div>

</body>

</html>
如果后续需要扩展更多层级菜单，只需要遵循「子菜单<ul>必须嵌套在对应父级<li>内部」的规则即可，不需要额外调整核心CSS逻辑。
内容的提问来源于stack exchange，提问作者deutz
如何修改纯CSS下拉菜单代码以新增第四级子菜单并修复对齐问题

问题原因 #

修复方案 #

问题原因

修复方案
