Html CSS下拉菜单：2列和标题

我刚从这里来，但不幸的是，经过几个小时的努力，我没有得到我真正想要的。。。我想要一个带副标题的2列下拉菜单，从上到下而不是从左到右排序

以下是我想要的：

但我只走了这么远：

a{ 文字装饰：无； } a:悬停{ 颜色：rgb206,17,38； } 导航{ 浮动：对； 边缘顶部：80px； } 导航ul{ 高度：35px； 列表样式：无； 保证金：0； 填充：0； } 李海军{ 浮动：左； 填充：0px； 颜色：ffffff； } 导航>ul>li>a{ 字体系列：“Gruppo”，草书； 字体大小：24px； 线高：正常； } 导航>超视距>视距>a:悬停{ 字体系列：“Gruppo”，草书； 字体大小：24px； 线高：正常； } 导航>超视距>视距>超视距>视距{ 字体系列：“Gruppo”，草书； 字号：18px； 线高：正常； } 导航>超视距>超视距>超视距>超视距>超视距>超视距>超视距{ 字体系列：“PT Sans”，无衬线； 字体大小：14px； 线高：正常； } 导航>超视距>超视距>超视距>超视距>超视距>超视距：悬停{ 字体系列：“PT Sans”，无衬线； 字体大小：14px； 线高：正常； 颜色：rgb206,17,38； } nav li a{ 颜色：rgb0,56147； 显示：块； 边际：0px； 填充：0px 25px； 文本对齐：居中； } 导航李a:悬停，导航李：悬停a{ 背景：rgb0,56147； 颜色：FFFFFF； } 纳夫利乌尔{ 背景：rgb0,56147； 显示：无； 高度：自动； 填充：0px； 边际：0px； 边界：0px； 位置：绝对位置； 宽度：700px； z指数：200； /*顶部：1米； /*左：0*/ } 李海军：悬停{ 显示：块； } 纳夫利利{ 显示：块； 浮动：左； 边际：0px； 填充：0px； 宽度：350px； } 导航李：悬停李a{ 背景：无； } 纳夫利乌拉酒店{ 显示：块； 字体风格：普通； 边际：0px； 填充：0px 10px 0px 15px； 文本对齐：左对齐； } 导航李ul a:悬停，导航李ul李：悬停a{ 背景：rgb0,56147； 边界：0px； 颜色：ffffff； 文字装饰：无； } 导航p{ 清除：左； } 产品组标题1 产品组标题2 产品组标题3 产品组标题4 产品组标题5

---

将下面的代码添加到CSS的末尾，就可以了

nav li ul li ul {
  position: static;
  width: auto; /*extra new*/
}

nav li ul li ul li {
    float: none;
}

添加到nav li

---

将nav li ul更改为nav>ul>li>ul，因为所有uls都是绝对定位的

你能改变标记吗？是的，我可以改变我喜欢的一切。但我想保留´´结构。是的，谢谢，它能工作！但它仍然是从左到右排列的，而不是从上到下排列的……非常感谢，它不知怎么工作，bot将一些蓝色填充的背景区域保留在右侧，您无法在JSFIDLE上看到它们，因为它与右侧对齐。删除float：对；在navand你会看到的。完美！谢谢但与@Vel解决方案相同：是否可以从上到下而不是从左到右排序？目前css无法做到这一点，但您可以修改HTML代码以实现项目的顺序。悲伤，但ok：非常感谢！顺便说一句：我用一张图片解决了三角形问题。。。

{position:relative}