Css 下拉菜单下的间隙

我有一个下拉菜单在一个网站上，我一直在工作，我需要摆脱这个差距上面的下拉菜单。这很麻烦

所以，为了解决这个问题，我将li线的高度从50px改为47px，得到如下结果：

几乎是我想要的，但不完全是。问题出在哪里？li更高，导致我在li下的小动画不再接触图像

然后，我试着给李一个相对的位置。但现在，下拉列表的宽度与“患者信息”链接的宽度相同

这是我的名片，如果你想摆弄它的话。不用着急。谢谢大家!

代码：

正文{
字体系列：“源Sans-Pro”，无衬线；
最大宽度：2500px；
保证金：0自动30px自动；
}
@导入url（'https://fonts.googleapis.com/css?family=Source+Sans+Pro'）；
h1，
h2，
h3，
h4，
h5，
h6{
字体大小：正常；
}
img#剖面图{
宽度：100%；
最大宽度：64px；
边界半径：100%；
}
.标题，
菜单
英雄
.滑块，
.img显示器{
-webkit触摸标注：无；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
：：选择{
背景：#11b5e4；
颜色：白色；
}
：-moz选择{
背景：#11b5e4；
颜色：白色；
}
/*标题和菜单样式开始*/
.标题{
高度：100px；
填充：15px 10px 10px 10px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.标题h1{
保证金：0px 25px 0px 25px；
}
.标题img{
身高：100%；
指针事件：无；
}
.标题a i{
字体大小：30px；
保证金：0px 0px 0px 15px；
颜色：黑色；
过渡：15s颜色；
}
.标题a i:悬停{
颜色：#11b5e4；
}
.菜单包装{
高度：50px；
显示器：flex；
证明内容：中心；
}
李先生{
显示：内联块；
线高：50px；
}
.菜单李a{
显示：内联块；
字体大小：23px；
利润率：0px 10px；
过渡：.2s立方贝塞尔（.5,3,5,5）背景；
颜色：黑色；
背景：线性梯度（#11b5e4，#11b5e4）50%100%/100%0px无重复；
文字装饰：无；
}
.菜单a:悬停{
背景：线性梯度（#11b5e4，#11b5e4）50%100%/100%5px无重复；
}
.菜单包装器#切换菜单{
显示：无；
}
/*用于堆栈溢出*/
.菜单{
保证金：0；
填充：0；
显示：无；
背景：白色；
}
ullia{
显示：块；
文字装饰：无；
颜色：#ffffff；
填充：5px15px 5px 15px；
}
李：悬停{
显示器：flex；
弯曲方向：立柱；
位置：绝对位置；
}
/*堆栈溢出的结束*/
@仅介质屏幕和（最大宽度：1000px）{
.菜单{
不透明度：0；
位置：相对位置；
顶部：50px；
过渡：25秒不透明度；
指针事件：无；
}
.menu包装器#切换菜单：选中~.menu{
不透明度：1；
指针事件：全部；
}
李先生{
显示：块；
文本对齐：居中；
背景色：白色；
填充：0px 15px；
}
.菜单包装标签{
自对准：居中；
宽度：32px；
高度：32px；
位置：绝对位置；
左：0；
右：0；
保证金：自动；
}
.菜单包装标签：悬停{
光标：指针；
}
.菜单包装标签#打开菜单{
转换：不透明度.5s，转换.3s；
背景：url(http://ianspence.us/stack/menu-open-icon.png)居中/盖不重复；
}
.菜单包装标签#关闭菜单{
转换：不透明度.5s，转换.3s；
背景：url(http://ianspence.us/stack/menu-close-icon.png)居中/盖不重复；
不透明度：0；
}
.menu wrapper#切换菜单：选中~label#打开菜单{
不透明度：0；
变换：旋转（360度）；
}
.菜单包装器#切换菜单：选中~label#关闭菜单{
不透明度：1；
变换：旋转（360度）；
}
}
@仅介质屏幕和（最大宽度：750px）{
.标题{
高度：75px；
}
.标题h1{
利润率：0px 5px；
字体大小：20px；
}
.标题a i{
字体大小：20px；
保证金：0px 0px 0px 5px；
}
}
/*标题和菜单样式结束*/
/*英雄开始*/
.英雄{
显示器：flex；
证明内容：中心；
高度：计算（150px+20vw）；
宽度：100%；
}
.英雄h1{
文本对齐：居中；
字体大小：35px；
填充：8px；
利润率：15px；
背景：rgba（1718122875）；
边界半径：10px；
颜色：白色；
字体大小：粗体；
}
.英雄{
对齐项目：柔性端；
背景：url(http://ianspence.us/stack/hero.a.jpg)中心/盖不重复；
}
.英雄{
对齐项目：柔性端；
背景：url（media/hero.b.jpeg）中心/封面不重复；
}
@仅介质屏幕和（最大宽度：900px）{
.英雄，
.英雄{
高度：300px；
}
.hero.a h1，
.hero.b h1{
字号：26px；
}
}
@仅介质屏幕和（最大宽度：400px）{
.英雄，
.英雄{
高度：250px；
}
.hero.a h1，
.hero.b h1{
字体大小：16px；
}
}
/*英雄结局*/

@pfcainc |主页
Panhandle家庭护理协会











从2002年开始就像我们一样对待你的家人

页边距顶部：-子菜单的3px似乎可以解决所有（主要）浏览器中的问题，但是我建议从我的浏览器中进行修复，为

li

元素提供灵活和定义的高度

快速简单 HTML:

更干净的方法

---

嗯。。。这很简单。我编辑了我的答案。我建议您对

li

元素使用固定高度，而不是

line height

，并对

a

内容使用flex。请看我的。没问题，我很乐意帮忙，并且毫不犹豫地再次询问。

<ul class="submenu">
    <li><a href='patient-forms'>Patient Forms</a></li>
    <li><a href='patient-education'>Patient Education</a></li>
    <li><a href='http://myhealthrecord.com'>Patient Portal</a></li>
</ul>

.submenu {
  margin-top: -3px !important;
}