Html 为ul导航添加标题

我想给一组导航元素添加一个标题。结果应该如下所示：

由于我使用的是无序列表，我不知道在哪里以及如何添加title元素

导航{ 背景色：F2F2； 填充：.3em0； 边界半径：7px； } 导航>ul{ 列表样式：无； 填充：.25em； 颜色：555； 边缘：0.5em； 显示：内联块； 背景色：fafa； 边界半径：5px； } 导航>ul>li{ 字体系列：源Sans-Pro； 字体大小：.5em； 边缘：.5em0； 显示：内联块； 宽度：4em； 文本对齐：居中； 浮动：左； 位置：相对位置； } 一号导航{ 字体大小：3em！重要； } 导航>ul>li>ul{ 列表样式：无； 字号：2em； 背景色：F2F2； 位置：绝对位置； 顶部：2.5em； 左：0px； 保证金：0； 填充物：5em 1em； 显示：无； } .按钮向下箭头{ 宽度：0； 身高：0； 左边框：5px实心透明； 右边框：5px实心透明； 边框顶部：5px实心B4； 保证金：0自动； 位置：相对位置； 底部：-7px； } 刚出现的 拯救 子元素1 子元素2 子元素3 只需将图像编辑器作为第一个元素放在ul列表中。工作代码：

导航{ 背景色：F2F2； 填充：.3em0； 边界半径：7px； } 导航>ul{ 列表样式：无； 填充：.25em； 颜色：555； 边缘：0.5em； 显示：内联块； 背景色：fafa； 边界半径：5px； } 导航>ul>li{ 字体系列：源Sans-Pro； 字体大小：.5em； 边缘：.5em0； 显示：内联块； 宽度：4em； 文本对齐：居中； 浮动：左； 位置：相对位置； } 一号导航{ 字体大小：3em！重要； } 导航>ul>li>ul{ 列表样式：无； 字号：2em； 背景色：F2F2； 位置：绝对位置； 顶部：2.5em； 左：0px； 保证金：0； 填充物：5em 1em； 显示：无； } .按钮向下箭头{ 宽度：0； 身高：0； 左边框：5px实心透明； 右边框：5px实心透明； 边框顶部：5px实心B4； 保证金：0自动； 位置：相对位置； 底部：-7px； } .导航按钮组标题{ 显示：块； 字体大小：粗体； 字体系列：源Sans-Pro； 字体大小：.7em； 颜色：555； 填充：0.5em； 背景色：F2F2； 边界半径：4px； } 图像编辑器 刚出现的 拯救 子元素1 子元素2 子元素3

---

我已经修改了@wazaaaap的答案，因为只有李可以作为ul的直系子女

将标题范围作为导航中的第一个元素

导航{ 背景色：F2F2； 填充：.3em0； 边界半径：7px； } 导航>ul{ 列表样式：无； 填充：.25em； 颜色：555； 边缘：0.5em； 显示：内联块； 背景色：fafa； 边界半径：5px； } 导航>ul>li{ 字体系列：源Sans-Pro； 字体大小：.5em； 边缘：.5em0； 显示：内联块； 宽度：4em； 文本对齐：居中； 浮动：左； 位置：相对位置； } 一号导航{ 字体大小：3em！重要； } 导航>ul>li>ul{ 列表样式：无； 字号：2em； 背景色：F2F2； 位置：绝对位置； 顶部：2.5em； 左：0px； 保证金：0； 填充物：5em 1em； 显示：无； } .按钮向下箭头{ 宽度：0； 身高：0； 左边框：5px实心透明； 右边框：5px实心透明； 边框顶部：5px实心B4； 保证金：0自动； 位置：相对位置； 底部：-7px； } .导航按钮组标题{ 显示：块； 字体大小：粗体； 字体系列：源Sans-Pro； 字体大小：.7em； 颜色：555； 填充：0.5em； 背景色：F2F2； 边界半径：4px； } 图像编辑器 刚出现的 拯救 子元素1 子元素2 子元素3

---

这是无效的HTML。只有li可以作为ul的直接子元素。但是我需要ul容器中的标题，因为会有多个这样的容器。是否可以使用ul列表中的第一个li元素作为标题？这意味着将第一个元素格式化为块元素，其宽度为整个ul列表的100%。。。这是一个合理的html标记吗？否则我可以做一些类似的事情：标题。。。以section元素作为分组元素…这可能会起作用。但这并不完全是语义上的。我倾向于将标题设为li，并将图标作为其子菜单。