Javascript 带有下拉菜单的侧菜单

我正在尝试创建一个如下图所示的侧菜单

我希望菜单出现，并且激活的链接具有不同的颜色。当用户点击商店链接时，我希望他们看到一个下拉菜单

html:

<div id="mainSidebar">
 <div id="menu">
  <nav>
     <ul>

      <li><a href="#">SHOP</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CONTACT</a></li>
      <li><a href="#">LEGAL</a></li>
     </ul>
   </nav> 
  </div>    
 </div>

#menu nav ul li  {
font-size: 11px;
top:106px;
list-style-type: none;
text-decoration: none;
color:#ffffff;
line-height: 19px;
}
nav a {
color:rgb(153, 153, 153);
text-decoration: none;
}
#mainSidebar {
display: block;
font-family:arial;
font-size: 11px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 450px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 750px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
text-transform: uppercase;
vertical-align: baseline;   
}
#menu nav ul {
padding: 0px;
line-height: 11.5px;
margin-top: 0px;    
padding-bottom: 5px;
width: 143px;
padding-top: 5px;   
}
#menu nav ul li a:hover{
color: #ffffff;
text-decoration: underline;
}

---

这似乎就是你要找的。我只添加了CSS中的前几行

如果希望它只在单击时打开，而不在悬停时打开，则需要javascript编码

正文{
背景：黑色；
颜色：白色；
}
#菜单nav>ul>li>ul{
显示：无；
文本对齐：右对齐；
}
#菜单导航a{
显示：块；
}
#菜单导航>ul>li>a{
显示：块；
边框底部：3倍纯色透明；
}
#菜单导航>ul>li：悬停>a{
底部边框：3倍纯白；
}
#菜单导航>保险单>保险单：悬停>保险单{
显示：块；
}
#菜单导航ulli{
字体大小：11px；
顶部：106px；
列表样式类型：无；
文字装饰：无；
颜色：#ffffff；
线高：19px；
}
导航a{
颜色：rgb（153、153、153）；
文字装饰：无；
}
#主边栏{
显示：块；
字体系列：arial；
字体大小：11px；
字体拉伸：正常；
字体风格：普通；
字体变体：正常；
字体大小：正常；
高度：450px；
边缘底部：0px；
左边距：0px；
右边距：0px；
边际上限：0px；
最小高度：750px；
垫底：0px；
左侧填充：0px；
右边填充：0px；
填充顶部：0px；
位置：固定；
文本转换：大写；
垂直对齐：基线；
}
#菜单导航{
填充：0px；
线高：11.5px；
边际上限：0px；
垫底：5px；
宽度：143px；
垫面：5px；
}
#菜单导航ul li a：悬停{
颜色：#ffffff；
/*文字装饰：下划线*/
}

我决定从头开始，也许给你一个不同的视角（因为为什么不）：

• 使用直接的HTML结构
• 为更平滑的悬停事件使用过渡（您可以非常轻松地扩展此功能，想象力主要是您的极限）
• 保持字体完整性
• 将菜单置于屏幕中央，如图所示。您可以随时轻松更改此设置
• 使用创意自由，略微提升外观/感觉

编辑向列表标题下的下划线添加动画

html，正文{
背景色：黑色；
}
.导航{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：300px；
保证金：0自动；
}
.main菜单，.子菜单{
列表样式：无；
填充：0；
保证金：0；
}
.主菜单a{
显示：块；
文字装饰：无；
填充：10px；
颜色：浅灰色；
字体系列：arial；
字体大小：11px；
字体拉伸：正常；
字体风格：普通；
字体变体：正常；
字体大小：正常；
}
.main菜单>li{
位置：相对位置；
}
.main菜单>li>。下划线{
位置：绝对位置；
顶部：30px；
左：0；
宽度：0%；
高度：3倍；
背景：白色；
过渡：所有0.7秒；
}
.main菜单>li:悬停>.underline{
宽度：100%；
}
.main菜单li：悬停子菜单{
显示：块；
最大高度：200px；
}
.子菜单a{
文本对齐：右对齐；
}
.子菜单a：悬停{
颜色：白色；
}
.子菜单{
溢出：隐藏；
最大高度：0；
-webkit过渡：所有0.5s都可以轻松过渡；
过渡：所有0.5s缓解；
}

你的css ID上有很多不必要的东西……我知道这与你的问题无关，但你能修复你的css ID吗？例如：

marginbottom:0px；左边距：0px；右边距：0px；边际上限：0px

可以是

边距：0…你的填充也一样…感谢大家的帮助，但我仍然试图在点击时创建店铺链接，就像这个网站一样，只有当它打开并处于活动状态时才有边界，而且当你点击店铺链接时，我希望它保持打开状态，无论点击多少次，除非你点击另一个链接，例如我们，联系，合法的话，应该是封闭的，并且每个链接都有一个文字装饰：下划线；当鼠标悬停时，我希望您理解我，您可以在css中定义一个
.active
类，该类将显示隐藏的子菜单，如：
#menu nav>ul>li.active>ul{display:block；}
。实现这一点最简单的方法是让一个模板引擎根据当前视图设置
.active
类，但这超出了您原始问题设置的范围。感谢大家的帮助，但我仍然试图在点击时创建商店链接，就像这个网站wtaps.com/about/pheology_e.html一样，只有当边框打开且处于活动状态时，以及当您单击店铺链接时，我希望它保持打开状态，无论如何