CSS ID和类

我正试图在CSS中创建一个下拉菜单，试图在我的代码中实现一些功能，但我想缩小下拉列表中项目的行高，但当我更改

中的行高属性时，它没有做任何事，它默认为主导航id的行高度

CSS代码：

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #004B60;
    width: 180px;
    box-shadow: 0px 8px 100px 0px rgba(0,0,0,0.2);
    padding: 0px 0px;
    top:100%;
    z-index:1;
    height:380px; 
    line-height:5px; 
    text-decoration: none; 
    color:#fff; 
    padding:0 15px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

#navigation { float:right; white-space:nowrap; }
#navigation ul{ list-style-type: none; height:20px; font-weight: bold; float:left;}
#navigation ul li{ float:left; display:inline; }
#navigation ul li a{ float:left; height:64px; line-height:64px; text-decoration: none; color:#fff; padding:0 15px;}
#navigation ul li a.active,
#navigation ul li a:hover{ background:#fff; color:#8b0000; }

<div id="navigation">
    <ul>
        <li><a href="index.asp" <%if scr = "index.asp" then%> class="active" <%    end if%>>Home</a></li>
        <li><a href="about.asp" <%if scr = "about.asp" then%> class="active" <%end if%>>About Us</a></li>
        <li>
            <div class="dropdown">
                <a href="products.asp" <%if scr = "products.asp" then%> class="active" <%end if%>>Products</a>                           
                <div class="dropdown-content">

                    <P><a href="products.ASP">Item1</a></P>
                    <P><a href="products.ASP">Item2</a></P>                                 
                    <P><a href="products.ASP">Item3</a></P>
                    <P><a href="products.ASP">Item4</a></P>
                    <P><a href="products.ASP">Item5</a></P>
                </div>
            </div>
            <li><a href="shipping.asp" <%if scr = "shipping.asp" then%>class="active" <%end if%>>Shipping</a></li>
            <li><a href="returns.asp" <%if scr = "returns.asp" then%> class="active" <%end if%>>Returns</a></li>
            <li><a href="testimonials.asp"<%if scr = "testimonials.asp" then%> class="active" <%end if%>>Testimonials</a></li>
            <li><a href="contact.asp" <%if scr = "contact.asp" then%> class="active" <%end if%>>Contact</a></li>
        </li>
    </ul>
</div>

HTML代码：

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #004B60;
    width: 180px;
    box-shadow: 0px 8px 100px 0px rgba(0,0,0,0.2);
    padding: 0px 0px;
    top:100%;
    z-index:1;
    height:380px; 
    line-height:5px; 
    text-decoration: none; 
    color:#fff; 
    padding:0 15px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

#navigation { float:right; white-space:nowrap; }
#navigation ul{ list-style-type: none; height:20px; font-weight: bold; float:left;}
#navigation ul li{ float:left; display:inline; }
#navigation ul li a{ float:left; height:64px; line-height:64px; text-decoration: none; color:#fff; padding:0 15px;}
#navigation ul li a.active,
#navigation ul li a:hover{ background:#fff; color:#8b0000; }

<div id="navigation">
    <ul>
        <li><a href="index.asp" <%if scr = "index.asp" then%> class="active" <%    end if%>>Home</a></li>
        <li><a href="about.asp" <%if scr = "about.asp" then%> class="active" <%end if%>>About Us</a></li>
        <li>
            <div class="dropdown">
                <a href="products.asp" <%if scr = "products.asp" then%> class="active" <%end if%>>Products</a>                           
                <div class="dropdown-content">

                    <P><a href="products.ASP">Item1</a></P>
                    <P><a href="products.ASP">Item2</a></P>                                 
                    <P><a href="products.ASP">Item3</a></P>
                    <P><a href="products.ASP">Item4</a></P>
                    <P><a href="products.ASP">Item5</a></P>
                </div>
            </div>
            <li><a href="shipping.asp" <%if scr = "shipping.asp" then%>class="active" <%end if%>>Shipping</a></li>
            <li><a href="returns.asp" <%if scr = "returns.asp" then%> class="active" <%end if%>>Returns</a></li>
            <li><a href="testimonials.asp"<%if scr = "testimonials.asp" then%> class="active" <%end if%>>Testimonials</a></li>
            <li><a href="contact.asp" <%if scr = "contact.asp" then%> class="active" <%end if%>>Contact</a></li>
        </li>
    </ul>
</div>






 
 
 
 
 






问题是您正在修改元素
及其内部的所有链接（“a”）。由于
在
内，因此也将对其进行修改

我建议您两种解决方案：

把
放在

使用！重要符号，即：
下拉内容{line height:30！important；}
因此它将覆盖
#导航
样式
好的，问题出在这里

#navigation ul li a {
   height:64px; 
   line-height:64px;
}

这是解决办法


li{
边框：1px实心；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#004B60；
宽度：180px；
盒子阴影：0px 8px 100px 0px rgba（0,0,0,0.2）；
填充：0px 0px；
最高：100%；
z指数：1；
高度：380px；
线高：5px；
文字装饰：无；
颜色：#fff；
填充：0 15px；
}
.下拉：悬停.下拉内容{
显示：块；
}
#航行{
浮动：对；
空白：nowrap；
}
#导航ul{
列表样式类型：无；
高度：20px；
字体大小：粗体；
浮动：左；
}
#导航ulli{
浮动：左；
显示：内联；
}
#导航ulli a{
浮动：左；
文字装饰：无；
颜色：#fff；
填充：0 15px；
}
#导航ulli a.active，
#导航：悬停{
背景：#fff；
颜色：#8万；
}
/*添加代码*/
#导航ulli a{
高度：35px；
线高：2；
}


























firebug对此有何评论？firebug是firefox的一个插件，您可以使用它打开和分析页面，它会告诉您所有应用的CSS规则以及它们应用的顺序以及哪些规则覆盖了其他规则。它非常有用。它还做很多其他的事情，比如脚本分析。推荐的
 
段落的P应该是小写的
您的导航css位于css文件中的.dropdown内容之后，因此凌驾于它之上--顺序很重要，这是级联样式表的级联部分仍然是相同的结果执行此操作谢谢-厌倦选项2这不起作用。尝试了选项1-一种工作方式，但这会将产品移动到菜单的末尾，而不是坐在菜单和发货之间。我只是尝试使用此代码
。下拉内容a{行高：30px！重要；填充：5px！重要；}
结果是此小提琴：请，检查这是否是您预期的情况，因为我无法完全理解您的问题。您的意思是我的答案是选项2？