Javascript 多层次下拉菜单，周围填充不带'；在进入子菜单时不会消失

视觉效果不言而喻：

/*通用样式*/
#导航{
背景：绿色；
高度：50px；
宽度：100%；
}
/*红色类*/
.类别{
位置：相对位置；
背景：红色；
}
/*突出显示悬停时的类别项目*/
.类别：悬停{
背景颜色：蓝色；
}
/*浮动和大小李的*/
#nav li{
浮动：左；
线高：50px；
填充：0 10px；
页边顶部：-1px；
边框：1px纯白；
}
/*违约*/
ul，
李{
保证金：0；
填充：0；
列表样式：无；
颜色：#fff；
}
/*默认关闭*/
a{
文字装饰：无；
颜色：#fff；
}
/*悬停效应*/
李：悬停{
不透明度：0.6；
}
/*通用样式端*/
/*隐藏下拉列表*/
.下拉列表{
显示：无；
位置：绝对位置；
背景：黄色；
填充：10px；
}
.category:悬停>.下拉列表{
显示：块；
}
/*#导航ul li>ul>li*/
.下拉列表李{
位置：相对位置；
背景：橙色；
保证金：0；
填充：0；
文本对齐：居中；
文本转换：大写；
}
.下拉式子类别{
空白：nowrap；
}
/*#导航ul li>ul>li>ul*/
.下拉列表子类别.下拉列表{
显示：无；
位置：绝对位置；
左：110%；
背景：红色；
文本对齐：居中；
排名：0；
}
.下拉列表李：悬停{
显示：块；
}
#导航子类别项目{
背景：绿色；
颜色：#000；
保证金：0；
填充：0；
位置：相对位置；
宽度：100%；
}

类别


类别项目1

子类别项目1
子类别项目2
子类别项目3
子类别项4


类别项目1
类别项目1
类别项目1
类别项目1

看看我的代码片段

更改

。下拉子类别。下拉

属性

左

到

100%

即可完成此任务

我删除了

li

上

10px

的

padding

，也是出于表达的目的，您不必这样做。确保在

li

上使用

margin

和

padding

，以获得最佳结果

/*通用样式*/
#导航{
背景：绿色；
高度：50px；
宽度：100%；
}
/*红色类*/
.类别{
填充：0 10px；
位置：相对位置；
背景：红色；
}
/*突出显示悬停时的类别项目*/
.类别：悬停{
背景颜色：蓝色；
}
/*浮动和大小李的*/
#李海军{
浮动：左；
线高：50px；
页边顶部：-1px；
边框：1px纯白；
}
/*违约*/
ul，
李{
保证金：0；
填充：0；
列表样式：无；
颜色：#fff；
}
/*默认关闭*/
a{
文字装饰：无；
颜色：#fff；
}
/*悬停效应*/
李：悬停{
不透明度：0.6；
}
/*通用样式端*/
/*隐藏下拉列表*/
.下拉列表{
显示：无；
位置：绝对位置；
}
.category:悬停>.下拉列表{
显示：块；
}
/*#导航ul li>ul>li*/
.下拉列表李{
位置：相对位置；
背景：黄色；
}
.下拉列表李a{
利润上限：-10px；
边缘底部：-10px；
左边距：10px；
右边距：10px；
填充：10px；
背景：橙色；
}
.下拉列表li.子类别-项目a{
利润上限：-10px；
边缘底部：-10px；
左边距：10px；
右边距：10px；
填充：10px；
背景：蓝色；
}
.下拉式子类别{
空白：nowrap；
}
/*#导航ul li>ul>li>ul*/
.下拉列表子类别.下拉列表{
显示：无；
位置：绝对位置；
左：100%；
最高：0%；
背景：红色；
文本对齐：居中；
边界：无；
}
.下拉列表子类别.子类别项目a{
背景：绿色；
}
.下拉列表李：悬停{
显示：块；
}
#导航子类别项目{
背景：绿色；
颜色：#000；
位置：相对位置；
宽度：100%；
}

类别


类别项目1

子类别项目1
子类别项目2
子类别项目3
子类别项4


类别项目1
类别项目1
类别项目1
类别项目1

看看这可能是什么help@usrNotFound在发帖之前已经谢谢了，不同的是下拉列表周围没有填充。对不起，如果这是不礼貌的，看起来很有效。如果你能评论你的改变，那就太好了。谢谢。我认为你的代码基本上必须有一个更好的结构。用

ul

li

混合设置导航类，另一方面用

.subcategory item

等辅助类设置导航类，这让我很困惑。建立一个清晰的结构，如

一级

，

一级项目

，

一级锚

等，将是最好的方法。我删除了所有我能找到的填充，并在新添加的两个定义中设置了

。dropdown li.subcategory-item a

和

。dropdown li a

（由于结构混合，所以不太好）