Javascript 当指向它下面的链接时，有必要出现一个带有链接的块

我有一个链接放在

li

中，当您将鼠标悬停在该链接上时，会出现一个块，其中包含我将在其中指示的链接

<li id="dropdown" class="li">
    <a href="/news/">Lessons</a>
</li>
<div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>

你是说像这样的下拉菜单吗

网站上的例子

下拉列表

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}

你是说像这样的下拉菜单吗

网站上的例子

下拉列表

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}

您是否希望这样：

a{
文字装饰：无；
}
导航{
字体系列：monospace；
}
保险商实验室{
背景：darkorange；
列表样式：无；
保证金：0；
左侧填充：0；
}
李{
颜色：#fff；
背景#5c8ff6；
显示：块；
浮动：左；
填充：1rem；
位置：相对位置；
文字装饰：无；
过渡时间：0.5s；
}
李阿{
颜色：#fff；
}
李：悬停{
背景：黑色；
光标：指针；
}
ul li ul{
背景：橙色；
可见性：隐藏；
不透明度：0；
最小宽度：5雷姆；
位置：绝对位置；
过渡：所有0.5s缓解；
页边顶部：1rem；
左：0；
显示：无；
}
ul li：悬停>ul，
悬停{
能见度：可见；
不透明度：1；
显示：块；
}
ulli ulli{
明确：两者皆有；
宽度：100%；
}

您是否希望这样：

a{
文字装饰：无；
}
导航{
字体系列：monospace；
}
保险商实验室{
背景：darkorange；
列表样式：无；
保证金：0；
左侧填充：0；
}
李{
颜色：#fff；
背景#5c8ff6；
显示：块；
浮动：左；
填充：1rem；
位置：相对位置；
文字装饰：无；
过渡时间：0.5s；
}
李阿{
颜色：#fff；
}
李：悬停{
背景：黑色；
光标：指针；
}
ul li ul{
背景：橙色；
可见性：隐藏；
不透明度：0；
最小宽度：5雷姆；
位置：绝对位置；
过渡：所有0.5s缓解；
页边顶部：1rem；
左：0；
显示：无；
}
ul li：悬停>ul，
悬停{
能见度：可见；
不透明度：1；
显示：块；
}
ulli ulli{
明确：两者皆有；
宽度：100%；
}

您的html无效，不能将div放在li旁边。你也试过什么？什么不起作用？你的html无效，你不能将div放在li旁边。你也试过什么？什么不起作用？