i new html , css. have created horizontal menu , drop-downs hover should.
however, want drop down appear when mouse hovers on links, , not space below occupies actual drop-down content.
if can please point out why happening , how fix great.
here html , css.
nav{ text-align:center; font-family:myfirstfont; display:inline-block; position:absolute; left:320px; top:56px; } .navigation { list-style-type:none; word-spacing:50px; max-width:100%; font-size:1.2em; position:relative; } .navigation li { display:inline-block; position:relative; } .navigation a{ text-decoration:none; color:#00a8e7; } .navigation ul { position:absolute; text-align:justify; } .navigation ul li { display:block; position:relative; right:40px; opacity:0; visibility:hidden; } .navigation li:hover ul li{ opacity:1; visibility:visible; } <nav> <ul class="navigation"> <li><a href="#">about</a> <ul> <li><a href="#">company</a></li> <li><a href="#">team</a></li> </ul> </li> <li><a href="#">services</a> <ul> <li><a href="#">website</a></li> <li><a href="#">seo</a></li> <li><a href="#">logo</a></li> </ul> </li> <li><a href="#">portfolio</a> <ul> <li><a href="#">websites</a></li> <li><a href="#">logo design</a></li> </ul> </li> <li><a href="#">contact</a> <ul> <li><a href="#">phone</a></li> <li><a href="#">email</a></li> </ul> </li> <li><a href="#">testimonials</a></li> </ul> </nav>
nav{ text-align:center; font-family:myfirstfont; display:inline-block; position:absolute; left:320px; top:56px; } .navigation { list-style-type:none; word-spacing:50px; max-width:100%; font-size:1.2em; position:relative; } .navigation li { display:inline-block; position:relative; } .navigation a{ text-decoration:none; color:#00a8e7; } .navigation ul { position:absolute; text-align:justify; } ul.inner li { display:none; position:relative; right:40px; } .navigation li:hover ul.inner li{ display:block }<nav> <ul class="navigation"> <li><a href="#">about</a> <ul class="inner"> <li><a href="#">company</a></li> <li><a href="#">team</a></li> </ul> </li> <li><a href="#">services</a> <ul class="inner"> <li><a href="#">website</a></li> <li><a href="#">seo</a></li> <li><a href="#">logo</a></li> </ul> </li> <li><a href="#">portfolio</a> <ul class="inner"> <li><a href="#">websites</a></li> <li><a href="#">logo design</a></li> </ul> </li> <li><a href="#">contact</a> <ul class="inner"> <li><a href="#">phone</a></li> <li><a href="#">email</a></li> </ul> </li> <li><a href="#">testimonials</a></li> </ul> </nav>