i trying make dropdown menu in css, managed working code want make line height of items in dropdown narrower isn't doing when change line-height attribute in .dropdown-content, defaults line height of main #navigation id. appreciated.
the 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; } the 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> </ul> </div>
ok problem here it's in
#navigation ul li { height:64px; line-height:64px; } here 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 { 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 { 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 need other help
Comments
Post a Comment