HTML CSS和jquery：带有水平子菜单的菜单

我正在研究这个HTMl、CSS和一些javascript。我正在尝试创建一个带有子菜单的菜单，所以当我将鼠标悬停在菜单上时，我希望子菜单以绝对位置显示在下面。我的主菜单是“工作”，但子菜单不是我想要的工作方式。当我将鼠标悬停在菜单上时，子菜单确实会显示，但仅显示第一个单词，其余内容不会显示。下面是我的图片和代码，也是我想要实现的。需要帮忙吗

主菜单的图像

悬停时，这是我的子菜单得到的

这就是我想要实现的目标

下面是HTML代码和CSS

正文{
填充：0；
保证金：0；
}
.container-fluid.wrapper{
弯曲方向：立柱；
垫底：0px；
}
navbar先生{
溢出：隐藏；
背景色：#333；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.导航项目{
颜色：#000；
文字装饰：无；
显示：内联；
溢出：隐藏；
}
.下拉列表{
浮动：左；
位置：相对位置；
}
.nav项目.下拉列表内容{
颜色：#000；
浮动：左；
位置：绝对位置；
显示：无；
z指数：1；
左：0；
顶部：10px；
宽度：100%！重要；
}
.nav项.下拉列表内容a{
浮动：左；
颜色：白色；
文字装饰：无；
显示：内联；
}
.nav项.下拉列表内容a{
显示：内联！重要；
}
.导航项目：悬停{
颜色：#FFF；
背景：红色！重要；}
.导航项目：悬停a{
颜色：#FFF！重要；
}
.navbar导航li:悬停。下拉内容{
显示：块；
}
.navbar导航.下拉列表内容a:悬停{
文字装饰：下划线；
}
.navbar a:悬停，.subnav:悬停.subnavbtn{
背景色：红色；
}
.subnav内容a：悬停{
背景色：#eee；
颜色：黑色；
}

您只需更改一些内容：

您已将

position:relative

放在带有按钮的

下拉列表

容器上。这使得当您完全定位菜单时，它将被容器剪切。所以我把这个从

.dropdown {
  float: left;
}

此外，我还编辑了菜单：

.nav-item .dropdown-content {
  ...
  background-color: red;
  top: 80px;
}

插入红色，使其突出背景，如示例所示，并在顶部的

80px

页面上给它一个绝对位置

正文{
填充：0；
保证金：0；
}
.container-fluid.wrapper{
弯曲方向：立柱；
垫底：0px；
}
navbar先生{
溢出：隐藏；
背景色：#333；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.导航项目{
颜色：#000；
文字装饰：无；
显示：内联；
溢出：隐藏；
}
.下拉列表{
浮动：左；
}
.nav项目.下拉列表内容{
背景色：红色；
颜色：#000；
浮动：左；
位置：绝对位置；
显示：无；
z指数：2；
左：0；
顶部：80px；
宽度：100%！重要；
}
.nav项.下拉列表内容a{
浮动：左；
颜色：白色；
文字装饰：无；
显示：内联；
}
.nav项.下拉列表内容a{
显示：内联！重要；
}
.导航项目：悬停{
颜色：#FFF；
背景：红色！重要；
}
.导航项目：悬停a{
颜色：#FFF！重要；
}
.navbar导航li:悬停。下拉内容{
显示：块；
}
.navbar导航.下拉列表内容a:悬停{
文字装饰：下划线；
}
.导航栏a:悬停，
.subnav:悬停.subnavbtn{
背景色：红色；
}
.subnav内容a：悬停{
背景色：#eee；
颜色：黑色；
}