Html 奇怪的下拉行为

我有两个下拉列表，它们按预期工作（它们在悬停时显示内容），但是，如果我单击列表外部（左侧）的区域，下拉列表仍会显示

我已经尝试过修复CSS，但是我没有能够指出问题所在

有没有更好的方法来设计下拉列表的样式，因为我还是CSS新手

更新：

在firefox中测试这一点，我无法重现问题。如何确保在所有浏览器中都能保持一致

.dropbtn{
颜色：白色；
宽度：200px；
边缘顶部：160px；
左边距：276px；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
文本对齐：左对齐；
字号：900；
背景：rgba（0173239,1）；
边界半径：0px；
-moz边界半径：0px；
-webkit边界半径：50px 50px 50px 50px；
位置：相对位置；
z指数：2；
}
.下拉列表{
位置：相对位置；
显示：内联块；
宽度：480px；
高度：0px；
背景：古色白；
}
.下拉内容{
显示：无；
位置：相对位置；
z指数：1；
背景色：#f9f9f9；
/*最小宽度：160px*/
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
右：5px；
顶部：-20px；
左边距：283px；
}
.球体{
高度：45px；
宽度：45px；
边界半径：50%；
垂直对齐：顶部；
/*位置：相对位置*/
背景：黑色；
显示：内联块；
位置：相对位置；
页边顶部：165px；
左边距：-55px；
z指数：2；
}
.下拉内容a{
表布局：固定；
颜色：黑色；
左边距：-1px；
填充：12px 16px 13px 30px；
文字装饰：无；
显示：块；
边框：1px实心#000；
边界顶部：无；
字号：21px；
}
.下拉列表内容a：第一个孩子{
填充顶部：35px；
背景：url（“Images/sidearrow.png”）不重复7px 36px；
}
.下载{
背景：url（“Images/sidearrow.png”）不重复7px；
}
.下拉列表内容a:第一个子项：悬停{
填充顶部：35px；
背景：url（“Images/sidewhite.png”）不重复3px 36px；
颜色：黑色；
背景色：rgb（255131,0）；
}
.下拉列表内容a：悬停{
背景：url（“Images/sidewhite.png”）无重复3px；
背景色：rgb（255131,0）；
颜色：白色；
}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}
div#arrow{
位置：绝对位置；
左边距：10px；
利润上限：11px；
}
/*哨兵的*/
.dropbtn sentinal{
颜色：白色；
宽度：200px；
边缘顶部：160px；
左边距：276px；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
文本对齐：左对齐；
字号：900；
背景：rgba（0173239,1）；
边界半径：0px；
-moz边界半径：0px；
-webkit边界半径：50px 50px 50px 50px；
位置：相对位置；
z指数：2；
}
.下拉sentinal{
位置：相对位置；
显示：内联块；
宽度：480px；
高度：0px；
背景：古色白；
}
.下拉内容sentinal{
显示：无；
位置：相对位置；
z指数：1；
背景色：#f9f9f9；
/*最小宽度：160px*/
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
右：5px；
顶部：-20px；
左边距：283px；
}
.前哨球{
高度：45px；
宽度：45px；
边界半径：50%；
垂直对齐：顶部；
/*位置：相对位置*/
背景：黑色；
显示：内联块；
位置：相对位置；
页边顶部：165px；
左边距：-55px；
z指数：2；
}
.下拉内容sentinal a{
表布局：固定；
颜色：黑色；
左边距：-1px；
填充：12px 16px 13px 30px；
文字装饰：无；
显示：块；
边框：1px实心#000；
边界顶部：无；
字号：21px；
}
.下拉内容sentinal a：第一个孩子{
填充顶部：35px；
背景：url（“Images/sidearrow.png”）不重复7px 36px；
}
.下拉sentinal a{
背景：url（“Images/sidearrow.png”）不重复7px；
}
.下拉内容sentinal a:第一个子项：悬停{
填充顶部：35px；
背景：url（“Images/sidewhite.png”）不重复3px 36px；
颜色：黑色；
背景色：rgb（255131,0）；
}
.下拉内容sentinal a:悬停{
背景：url（“Images/sidewhite.png”）无重复3px；
背景色：rgb（255131,0）；
颜色：白色；
}
.dropdown sentinal：悬停。下拉内容sentinal{
显示：块；
}
.dropdown sentinal:悬停.dropbtn sentinal{
背景色：#3e8e41；
}
分区箭头前哨{
位置：绝对位置；
左边距：10px；
利润上限：11px；
}
div#下拉列表一{
宽度：500px；
高度：198px；
}
div#下拉列表二{
左边距：700px；
利润上限：-198px；
}
div#下拉式内容a{
文字装饰：无；
边框：纯黑1px；
显示：表格标题；
背景色：rgb（237237238）；
背景：url（Images/sidearrow.png）不重复7px 36px；
}

标题
门户
欢迎名字

您上次登录的时间为日期



请在下面选择一个应用程序开始

挑选
挑选

这里-我将示例缩短了一点（我也不认为您需要为多个按钮使用所有单独的CSS，您应该能够利用这些类，只需使用

\dropdown\u two.classname

更改您可能要更改的内容（如位置）的细节即可

我认为Chrome中的问题是，容器的宽度比按钮本身宽，这使得它行为不正常。它可能不是100%，但应该可以让您开始使用。我将一些值更改为动态（

em

，而不是

px

），因此可能会出现一些问题

#下拉列表一{
左侧边缘：20em；
}
.dropbtn{
颜色：白色；
宽度：100%；
身高：3.2