Html 下拉开关也应该是一个链接

我用BS4设置了一个下拉开关。鼠标悬停时，下拉菜单可以很好地向下滑动。但现在，产品所有者希望将切换按钮作为可单击的链接（在我的示例中：href=”https://www.yahoo.com).但我不知道如何实现这一点。有解决方案吗？或者更容易将切换菜单重新构建为其他菜单，之后将链接与滑动div（或其他）分离

这是我的开关，到目前为止我有：

html{
字体系列：Arial；
字体大小：1.4rem；
线高：1.4rem；
}
.下拉列表{
显示：内联块；
填充：0 7px；
}
.下拉菜单{
背景色：rgba（255、255、255、0.9）；
}
.下拉列表a：：之前{
内容：“；
}
.下拉按钮a.下拉开关{
光标：指针；
填充：3px7px；
}
.下拉菜单a.下拉切换：：之后{
字体大小：1.4rem；
内容：“>”；
颜色：橙色；
线高：1.4rem；
边界顶部：0；
右边界：0；
边界底部：0；
左边框：0；
垂直对齐：顶部；
过渡：0.5s；
}
.下拉按钮a.下拉开关：激活{
指针事件：无；
}
.下拉a.下拉切换：悬停：之后{
变换：旋转（90度）；
}
.下拉菜单.下拉菜单{
最小宽度：初始宽度；
填充：0.5雷姆；
保证金：0；
左边距：7px；
字号：首字母；
边界半径：0；
过渡：均为0.5s；
溢出：隐藏；
变换原点：顶部中心；
变换：缩放（1,0）；
显示：块；
边界：无；
盒影：0px 3px 6px rgba（0,0,0,0.16）；
}
.下拉菜单a.下拉菜单项{
字体大小：1.4rem；
线高：1.6雷姆；
文字装饰：无；
}
.下拉菜单.下拉菜单a.下拉菜单项：悬停{
颜色：橙色；
}
.下拉：悬停.下拉切换{
背景色：rgba（255、255、255、0.9）；
}
.下拉菜单：悬停.下拉菜单{
变换：比例（1）；
}
.下拉菜单：悬停+a:之后{
变换：旋转（90度）；
}

更新 使用引导的属性和类阻止了这一点。例如，

data toggle=“dropdown”

和

。dropdown toggle

，因为它们与框架绑定

除了

指针事件：无

html{
字体系列：Arial；
字体大小：1.4rem；
线高：1.4rem；
}
.下拉列表{
显示：内联块；
填充：0 7px；
}
.下拉菜单{
背景色：rgba（255、255、255、0.9）；
}
.下拉列表a：：之前{
内容：“；
}
.下拉a.cc-下拉开关{
光标：指针；
填充：3px7px；
文字装饰：无；
}
.dropdown a.cc-dropdown-toggle:：after{
字体大小：1.4rem；
内容：“>”；
颜色：橙色；
线高：1.4rem；
边界顶部：0；
右边界：0；
边界底部：0；
左边框：0；
垂直对齐：顶部；
过渡：0.5s；
显示：内联块；
}
.dropdown a.cc-dropdown-toggle:悬停：之后{
变换：旋转（90度）；
}
.下拉菜单.下拉菜单{
最小宽度：初始宽度；
填充：0.5雷姆；
保证金：0；
左边距：7px；
字号：首字母；
边界半径：0；
过渡：均为0.5s；
溢出：隐藏；
变换原点：顶部中心；
变换：缩放（1,0）；
显示：块；
边界：无；
盒影：0px 3px 6px rgba（0,0,0,0.16）；
}
.下拉菜单a.下拉菜单项{
字体大小：1.4rem；
线高：1.6雷姆；
文字装饰：无；
}
.下拉菜单.下拉菜单a.下拉菜单项：悬停{
颜色：橙色；
}
.dropdown:hover.cc下拉切换{
背景色：rgba（255、255、255、0.9）；
}
.下拉菜单：悬停.下拉菜单{
变换：比例（1）；
}
.下拉菜单：悬停+a:之后{
变换：旋转（90度）；
}

哦，不，很抱歉，但是..这似乎是一个误解！切换应该发生在鼠标上方，就像现在一样。但是除此之外，切换锚本身也应该可以单击…：-}请查看我的示例我有一个href=”“在开关上。鼠标悬停：切换子菜单。点击：进入雅虎。这可能吗？？？@JonSnow啊，对不起，我误解了。看看我更新的答案。太棒了！正是我想要的。谢谢你，我的朋友，真是松了一口气！