CODEWITHSUNDEEP
css
Emma
Emma

Reputation: 562

CSS ID and Class

I am trying to make a dropdown menu in CSS, managed to get something working with my code but I want to make the line height of the items in the dropdown narrower but it isn't doing anything when I change the line-height attribute in .dropdown-content, it defaults to the line height of the main #navigation id.

CSS code:

.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; }

HTML code:

<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>

Upvotes: 1

Views: 72

Answers (2)

Mohammed Moustafa
Mohammed Moustafa

Reputation: 630

Ok the problem here it's in 

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

here is the solution 

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>

Let me know if you need any other help

Upvotes: 1

ldepaula3
ldepaula3

Reputation: 56

The thing is that you are modifying the element <div id="navigation">and all of links ("a") inside it. As <div class="dropdown-content"> is inside <div id="navigation"> it will be modified too.

I would suggest you two solutions:

  1. Put <div class="dropdown-content"> outside <div id="navigation">
  2. Modify <div class="dropdown-content"> in your CSS file using the !important notation, ie.: dropdown-content{ line-height: 30 !important;} so it would overwrite the #navigation style.

Upvotes: 0

Related Questions