Php CSS-如何创建具有动态子菜单宽度的下拉式导航栏

很多人都试图制作一个导航栏，但在大多数情况下，子菜单的宽度是静态的，比如

我想做的是使宽度动态。 在我的例子中，子菜单的名称将来自MySQL，因此所有子菜单都将动态确定

例如，如果有3个子菜单，且最长的子菜单有3个字符，则子菜单的宽度将为3个字符长。但是，如果有另一个菜单有6个字符，我希望所有子菜单的宽度都比这个宽两倍

我认为这可以通过使用

width

属性

100%

来实现，但它没有按预期工作

下面是我的一些代码

#菜单{}
/*第一级*/
#菜单ul{
填充：0；
保证金：0；
列表样式类型：无；
宽度：100%；
浮动：左；
背景色：#0c；
}
/*一级项目*/
#菜单ulli{
位置：相对位置；
浮动：左；
文本对齐：居中；
填充：10px 20px；
线高：1；
光标：指针；
空白：nowrap；
}
/*二级名单*/
#菜单{
显示：无；
位置：绝对位置；
最高：100%；
左：0；
列表样式：无；
宽度：100%；
}
/*第二项*/
#菜单ulli ulli{
位置：相对位置；
填充：10px 20px；
文本对齐：左对齐；
显示：块；
宽度：100%；
}
/*三级名单*/
#菜单{
显示：无；
位置：绝对位置；
排名：0；
左：70%；
宽度：100%；
列表样式：无；
}
/*三级项目*/
#菜单ulli ulli ul li{
位置：相对位置；
文本对齐：左对齐；
显示：块；
宽度：100%；
}
/*当第一级项目悬停时，将显示第二级livel列表*/
#菜单ul li：悬停>ul{
显示：块；
}
/*悬停的项目将位于不同的collor中*/
#菜单：悬停{
颜色：#00FFCC；
}
/*当第二级项目悬停时，将显示第三级livel列表*/
#菜单ulli ulli：悬停>ulli{
显示：块；
}
/*这就是悬停项目时发生的情况*/
#菜单李a{
颜色：#FFFFFF；
文字装饰：无；
字体大小：粗体；
}

当前，您的代码片段没有输出图像中显示的内容。请尝试复制它以供我们调试。您的第一级选择器

#menu ul

实际上适用于

#menu

下的所有

ul

元素。应使用直系后代运算符

仅选择直接子级

#menu>ul

>Manoj-感谢您的评论。我编辑了它。>安德鲁-谢谢你的建议。您的意思是我需要在三级列表中使用

#菜单ul？恐怕我认为它不管用。这是因为当我更改

#menu ul

的

背景色时，此级别的背景色将更改为预期颜色。因此，老实说，我不认为第一级选择器
#菜单ul
适用于所有
ul
。（我的意思是，
#菜单ul
不会影响第二级和第三级）当前，您的代码片段不会输出图像中显示的内容。请尝试复制它以供我们调试。您的第一级选择器
#menu ul
实际上适用于
#menu
下的所有
ul
元素。应使用直系后代运算符
仅选择直接子级
#menu>ul
>Manoj-感谢您的评论。我编辑了它。>安德鲁-谢谢你的建议。您的意思是我需要在三级列表中使用
#菜单ul

？恐怕我认为它不管用。这是因为当我更改

#menu ul

的

背景色时，此级别的背景色将更改为预期颜色。因此，老实说，我不认为第一级选择器
#菜单ul
适用于所有
ul
。（我的意思是，
#菜单ul
不会影响第二级和第三级）