Javascript 如何创建一个下拉菜单而不弄乱其余的代码。。。。？

我知道这个问题以前可能被问过一百万次，但我似乎找不到一个适合我的具体情况或代码的答案或解决方案。（如果有，请链接我！）

我只是想在水平导航上创建一个简单的下拉菜单，它有一个以链接为中心的徽标图像。我确实安装了bootstrap，但我似乎无法找到一种使用他们的框架编写代码的简单方法，所以我说，去它的，从头开始构建这个

它不一定是直接的html/css，但我对js不太熟悉（还在学习）

以下是我当前的代码：

#标题{
高度：40px；
位置：相对位置；
利润率：80px自动0；
}
#标题ul{
保证金：0自动；
宽度：800px；
填充：0；
列表样式：无；
}
#标题ulli{
浮动：左；
宽度：97px；
}
#标题ul li：第n种类型（4）{
左边距：217px；
}
#标题ulli a{
文本转换：小写；
文字装饰：无；
显示：块；
文本对齐：居中；
填充：12px0；
高度：28px；
颜色：#000；
-o-转变：.5s；
-ms转换：.5s；
-moz转变：.5s；
-webkit转换：.5s；
过渡：.5s；
}
#标题：悬停{
颜色：#C4；
}
.标志{
位置：绝对位置；
左：50%；
裕度：-60px0-124px；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.标志{
底部：100%；
}
#标题ul li：第n种类型（4）{
左边距：0；
}
#标题ul{
宽度：600px；
位置：相对位置；
}
}

我对你的代码做了一些修改，你可以试试这样的

#标题{
高度：40px；
位置：相对位置；
利润率：80px自动0；
}
#标题ul{
保证金：0自动；
宽度：800px；
填充：0；
列表样式：无；
}
#标题ulli{
浮动：左；
宽度：97px；
}
#标题ul li：第n种类型（4）{
左边距：217px；
}
#标题ulli a{
文本转换：小写；
文字装饰：无；
显示：块；
文本对齐：居中；
填充：12px0；
高度：28px；
颜色：#000；
-o-转变：.5s；
-ms转换：.5s；
-moz转变：.5s；
-webkit转换：.5s；
过渡：.5s；
}
#标题：悬停{
颜色：#C4；
}
.标志{
位置：绝对位置；
左：50%；
裕度：-60px0-124px；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.标志{
底部：100%；
}
#标题ul li：第n种类型（4）{
左边距：0；
}
#标题ul{
宽度：600px；
位置：相对位置；
}
ul.子菜单{
显示：无；
位置：绝对位置；
排名：0；
左：0；
宽度：自动！重要；
溢出：隐藏；
填充：0.1em；
z指数：2；
背景：白色；
}
.子菜单li{显示：块；浮点：无！重要；}
.more{位置：相对；}
.more:hover.sub菜单{display:inline block；}

我建议您使用jQuery进行此操作。欢迎使用stackoverflow:）这非常有效，谢谢。我刚刚将ul.sub菜单下的top值更改为30，以便您仍然可以在悬停时看到“galleries”。