Html 需要我的悬停状态才能使导航栏变大
现在紫色只是覆盖了文本，但它应该是一个很好的颜色块，就像下拉列表一样。此外，我的导航img下有一个横杆，当我悬停时，它不应该在那里。我知道这是一个宽度/高度的问题，但无论我把代码放在哪里，它都不起作用 李{ 列表样式：无； } a{ 颜色：F2F2； 文字装饰：无； } a:悬停{ 背景色：8781bd； } .集装箱{ 最大宽度：100%； 宽度：100%； 保证金：0自动； 文本对齐：居中； } .btn{ 填充：0 20px； 高度：40px； 字号：1em； 字体大小：400； 字体系列：Amatic SC、Roboto、无衬线； 边框：1px 8781bd实心； 边界半径：2px； 背景：8781bd； 颜色：F2F2； 光标：指针； } .电网{ 显示器：flex； } 标题{ 位置：固定； 排名：0； 最小高度：75px； 填充：0px 0px； 显示器：flex； 对齐项目：居中； 背景色：2F； } @介质最大宽度：600px{ 标题{ 柔性包装：包装； } } .标志{ 宽度：60vw； } @介质最大宽度：650px{ .标志{ 边缘顶部：15px； 宽度：100%； 位置：相对位置； } } .logo>img{ 宽度：100%； 身高：100%； 最大宽度：100px； 显示器：flex； 证明内容：中心； 对齐项目：居中； 文本对齐：居中； 左边距：20px； } @介质最大宽度：650px{ .logo>img{ 保证金：0自动； } } 导航{ 字体大小：400； } @介质最大宽度：650px{ 导航{ 边缘顶部：10px； 宽度：100%； 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 文本对齐：居中； 填充：0 50px； } } h1{ 字体系列：Amatic SC、Raleway、Roboto、无衬线； 字号：35pt； 宽度：100%； 文本对齐：居中； } 氢{ 字体系列：Amatic SC、Raleway、Roboto、无衬线； 字号：24pt； 宽度：100%； 文本对齐：居中； } 李海军{ 垫底：30px 0px； } 导航>ul{ 宽度：30vw； 显示器：flex； 弯曲方向：行； 证明内容：周围的空间； } @介质最大宽度：650px{ 导航>ul{ 弯曲方向：立柱； } } .下拉列表>李{ 浮动：对； 溢出：隐藏； } .下拉列表>李a{ 字体大小：16px； 边界：无； 大纲：无； 颜色：F4； 填充：14px 16px； 背景色：继承； 字体家族：继承； 保证金：0； } 导航>导航a:悬停，.下拉菜单：悬停a{ 背景色：8781bd； 颜色：F4； } .下拉内容{ 显示：无； 位置：绝对位置； 盒影：0px 8px 16px 0px rgba0,0,0.2； 颜色：F4； z指数：1； 边缘顶部：20px； 最小宽度：100px； } .下拉列表内容li a{ 浮动：无； 颜色：F4； 填充：10px 14px； 文字装饰：无； 显示：块； 文本对齐：左对齐； } .下拉列表内容li a:悬停{ 背景色：625aa9； 颜色：F4； } .下拉：悬停.下拉内容{ 显示：块； } 无障碍开发 问题是标记a的默认显示是内联的，因此如果要调整标记的高度，必须将其默认显示更改为“显示：内联”块，如下图所示，然后您可以使用该标记执行任何操作，有关详细信息，请参阅下面的代码：Html 需要我的悬停状态才能使导航栏变大,html,css,hover,Html,Css,Hover,现在紫色只是覆盖了文本，但它应该是一个很好的颜色块，就像下拉列表一样。此外，我的导航img下有一个横杆，当我悬停时，它不应该在那里。我知道这是一个宽度/高度的问题，但无论我把代码放在哪里，它都不起作用 李{ 列表样式：无； } a{ 颜色：F2F2； 文字装饰：无； } a:悬停{ 背景色：8781bd； } .集装箱{ 最大宽度：100%； 宽度：100%； 保证金：0自动； 文本对齐：居中； } .btn{ 填充：0 20px； 高度：40px； 字号：1em； 字体大小：400； 字体系
#header a {
display: inline-block; // change display style
height: 75px;
line-height: 75px; // center the text
padding-left: 12px;
padding-right: 12px;
}
.dropdown > li > a {
padding: 0 16px; // no need to padding top and bottom because we already had line-height and height
}
.dropdown-content{
margin-top: 75px; // push the .dropdown-content further to fit new css
}
#header .dropdown-content li a{
display: block; // set an <a> tag to full with of the dropdown
height: auto;
line-height: 16px; // center the text with current font-size
}