Html 如何在侧边栏中创建两个子菜单

我想在单击侧边栏中的菜单时创建2个子菜单

这就是我所做的

$（文档）.ready（函数（）{
$（“[数据切换]”）。单击（函数（）{
var toggle_el=$（this）.data（“toggle”）；
$（toggle_el）.toggleClass（“打开边栏”）；
});
$（'.parent'）。单击（函数（）{
$（'.submenu'）。切换（'visible'）；
});
});
body，html{
身高：100%；
保证金：0；
溢出：隐藏；
字体系列：helvetica；
字号：100；
}
.集装箱{
位置：相对位置；
身高：100%；
宽度：100%；
右：0；
-webkit过渡：右0.4s易入易出；
-moz过渡：右0.4s缓进缓出；
-ms转换：右0.4s缓进缓出；
-o型过渡：右0.4s缓进缓出；
过渡：右0.4s缓进缓出；
}
.container.open-sidebar{
右：240px；
}
#边栏{
位置：绝对位置；
右：-240px；
背景：#DF314D；
宽度：240px；
身高：100%；
框大小：边框框；
-moz框大小：边框框；
边界半径：4px；
}
#边栏ul{
保证金：0；
填充：0；
列表样式：无；
}
#侧栏ulli{
保证金：0；
}
#侧栏ul li a{
填充：15px 20px 15px 35px；
字体大小：16px；
字号：100；
颜色：白色；
文字装饰：无；
显示：块；
边框底部：1px实心#C9223D；
-webkit过渡：背景0.3s轻松输入输出；
-moz转换：背景0.3s轻松输入输出；
-ms转换：背景0.3s轻松输入输出；
-o型过渡：背景0.3s缓进缓出；
过渡：背景0.3s缓进缓出；
}
#侧边栏li：悬停{
背景：C9223D；
边界半径：4px；
}
.主要内容{
宽度：100%；
身高：100%；
填充：10px；
框大小：边框框；
-moz框大小：边框框；
位置：相对位置；
}
.主要内容{
框大小：边框框；
-moz框大小：边框框；
左侧填充：60px；
宽度：100%；
}
.主要内容.内容h1{
字号：100；
}
.主要内容{
宽度：100%；
线高：160%；
}
.main content#侧边栏切换{
背景：#DF314D；
边界半径：3px；
显示：块；
位置：相对位置；
填充：10px 7px；
浮动：对；
}
.main content#侧边栏切换.bar{
显示：块；
宽度：18px；
利润底部：3倍；
高度：2倍；
背景色：#fff；
边界半径：1px；
}
.main content#边栏切换。边栏：最后一个子项{
页边距底部：0；
}
.main content#侧边栏切换.bar{
显示：块；
宽度：18px；
利润底部：3倍；
高度：2倍；
背景色：#fff；
边界半径：1px；
}
.main content#边栏切换。边栏：最后一个子项{
页边距底部：0；
}
a.菜单a.主页{
显示：内联块；
背景：url（../imagenes/bpi.png）不重复4px10px；
}
.菜单a.浏览{
显示：内联块；
背景：url（../imagenes/gasi.png）不重复4px10px；
}
.menu a.users{
显示：内联块；
背景：url（../imagenes/bicici.png）不重复4px10px；
}
.菜单a.注销{
显示：内联块；
背景：url（../imagenes/bai.png）不重复4px10px；
}
#侧边栏.菜单.子菜单{
显示：无；
}
#侧栏ul li ul.可见{
显示：块；
}
.子菜单a.主页{
显示：内联块；
背景：url（../imagenes/bpi.png）不重复4px10px；
}
.子菜单a.users{
显示：内联块；
背景：url（../imagenes/bicici.png）不重复4px10px；
}
.子菜单a.注销{
显示：内联块；
背景：url（../imagenes/bai.png）不重复4px10px；
}

















您面临的问题是什么？单击“主页”按钮时，会打开两个子菜单。下面一个，旁边一个你面临的问题是什么？单击“主页”按钮时，会打开两个子菜单。一个在下面，一个在侧面