Html CSS下拉菜单

正如标题所示，我正在制作一个CSS下拉菜单

我的第一个问题是，当我悬停时，下拉菜单覆盖了汉堡包图标。因此，我添加了

margintop

，解决了这个问题，但导致了另一个问题。当我将鼠标从汉堡包图标上移开以选择一个下拉选项时，下拉菜单将消失。所以我的问题是，我怎么能有一个下拉菜单，它仍然在屏幕上显示汉堡图标，让我真正地点击选项而不消失

/*全局样式*/
* {
字体系列：“开放式Sans”，无衬线；
}
答：林克，
a:悬停，
a:主动，
a:参观了{
文字装饰：无；
颜色：继承；
}
/*导航条样式*/
导航处{
宽度：100%；
背景色：#1c1c；
颜色：白色；
位置：绝对位置；
排名：0；
左：0；
右：0；
边际上限：0；
高度：50px；
}
#头衔{
文本对齐：居中；
垂直对齐：中间对齐；
保证金：0自动；
字号：1.5em；
位置：固定；
顶部：15px；
左：50%；
右：50%；
}
span.dropbutton{
文本对齐：左对齐；
垂直对齐：中间对齐；
颜色：白色；
位置：固定；
顶部：15px；
左：2%
}
#行：悬停{
转换：比例（1.1）；
}
/*下拉式样式*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#1c1c；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
填充：12px 16px；
显示：块；
}
.下拉列表内容a：悬停{
背景色：
}
.下拉：悬停.下拉内容{
显示：块；
}

标题
☰

类似这样的东西

将

高度

和

宽度

指定给

。下拉列表

和

顶部：100%到
。下拉内容将解决问题

.dropdown {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 40px;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #1c1c1c;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  top: 100%;
}


/*全局样式*/
* {
字体系列：“开放式Sans”，无衬线；
}
答：林克，
a:悬停，
a:主动，
a:参观了{
文字装饰：无；
颜色：继承；
}
/*导航条样式*/
导航处{
宽度：100%；
背景色：#1c1c；
颜色：白色；
位置：绝对位置；
排名：0；
左：0；
右：0；
边际上限：0；
高度：50px；
}
#头衔{
文本对齐：居中；
垂直对齐：中间对齐；
保证金：0自动；
字号：1.5em；
位置：固定；
顶部：15px；
左：50%；
右：50%；
}
span.dropbutton{
文本对齐：左对齐；
垂直对齐：中间对齐；
颜色：白色；
位置：固定；
顶部：15px；
左：2%
}
#行：悬停{
转换：比例（1.1）；
}
/*下拉式样式*/
.下拉列表{
位置：相对位置；
显示：内联块；
高度：50px；
宽度：40px；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#1c1c；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
最高：100%；
}
.下拉内容a{
填充：12px 16px；
显示：块；
}
.下拉列表内容a：悬停{
背景色：
}
.下拉：悬停.下拉内容{
显示：块；
}

标题
☰
类似这样的东西

将
高度
和
宽度
指定给
。下拉列表
和
顶部：100%到
。下拉内容将解决问题

.dropdown {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 40px;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #1c1c1c;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  top: 100%;
}


/*全局样式*/
* {
字体系列：“开放式Sans”，无衬线；
}
答：林克，
a:悬停，
a:主动，
a:参观了{
文字装饰：无；
颜色：继承；
}
/*导航条样式*/
导航处{
宽度：100%；
背景色：#1c1c；
颜色：白色；
位置：绝对位置；
排名：0；
左：0；
右：0；
边际上限：0；
高度：50px；
}
#头衔{
文本对齐：居中；
垂直对齐：中间对齐；
保证金：0自动；
字号：1.5em；
位置：固定；
顶部：15px；
左：50%；
右：50%；
}
span.dropbutton{
文本对齐：左对齐；
垂直对齐：中间对齐；
颜色：白色；
位置：固定；
顶部：15px；
左：2%
}
#行：悬停{
转换：比例（1.1）；
}
/*下拉式样式*/
.下拉列表{
位置：相对位置；
显示：内联块；
高度：50px；
宽度：40px；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#1c1c；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
最高：100%；
}
.下拉内容a{
填充：12px 16px；
显示：块；
}
.下拉列表内容a：悬停{
背景色：
}
.下拉：悬停.下拉内容{
显示：块；
}

标题
☰
只需在菜单容器中添加填充，删除背景色使其透明，并将背景色添加到菜单元素中即可


/*全局样式*/
* {
字体系列：“开放式Sans”，无衬线；
}
答：林克，
a:悬停，
a:主动，
a:参观了{
文字装饰：无；
颜色：继承；
}
/*导航条样式*/
导航处{
宽度：100%；
背景色：#1c1c；
颜色：白色；
位置：绝对位置；
排名：0；
左：0；
右：0；
边际上限：0；
高度：50px；
}
#头衔{
文本对齐：居中；
垂直对齐：中间对齐；
保证金：0自动；
字号：1.5em；
位置：固定；
顶部：15px；
左：50%；
右：50%；
}
span.dropbutton{
文本对齐：左对齐；
垂直对齐：中间对齐；
颜色：白色；
位置：固定；
顶部：15px；
左：2%
}
#行：悬停{
转换：比例（1.1）；
}
/*下拉式样式*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
填充顶部：36px；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
填充：12px 16px；
显示：块；
背景色：#1c1c；
}
.下拉列表内容a：悬停{
背景色：
}
.下拉：悬停.下拉内容{
显示：块；
}

标题
☰
只需在菜单容器中添加填充，删除背景色使其透明，并将背景色添加到菜单元素中即可


/*全局样式*/
* {
.dropdown:hover{display:block;}
.dropdown:blur{display:none;}

<script>
    document.getElementById("dropdown").onfocus = function () {
        document.getElementById("dropdown").style.display = block;
    }   
    document.getElementById("dropdown").onblur = function () {
        document.getElementById("dropdown").style.display = none;
    }   
</script>