CSS ID和Class

Question

我正在尝试在CSS中创建一个下拉菜单，设法使用我的代码处理某些内容，但我想让下拉列表中项目的行高更窄但是当我更改时它不会做任何事情.dropdown-content中的line-height属性，默认为主#navigation 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>
  </ul>
</div>

Answer 1

好的问题就在这里

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

这是解决方案

li {
  border: 1px solid;
}
.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;
  text-decoration: none;
  color: #fff;
  padding: 0 15px;
}
#navigation ul li a.active,
#navigation ul li a:hover {
  background: #fff;
  color: #8b0000;
}
/*Add code*/

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

<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>
  </ul>
</div>

如果您需要任何其他帮助，请告诉我

Answer 2

问题是你正在修改元素String relativePath="/resources/temp/"; String absolutePath= FacesContext.getCurrentInstance.getExternalContext().getRealPath(relativePath); File file = new File(absolutePath); 和其中的所有链接（“a”）。由于<div id="navigation">位于<div class="dropdown-content">内，它也会被修改。

我建议你两个解决方案：

1. 将<div id="navigation">放在<div class="dropdown-content">
之外
2. 使用！important符号修改CSS文件中的<div id="navigation">，即：<div class="dropdown-content">，以便覆盖dropdown-content{ line-height: 30 !important;}样式。