i doing navigation bar subnav, result below code when hover main link , submenu not come right under main link . if click products link see comes under home link, want product submenu displayed under product link , aligned under p in products starts. 2.also can tell me why link has submenu creates space between next link. in example, there space between home , products no space between contact , payment. how ignore space between link irrespective of of main menu holding submenu or not?
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head profile="http://gmpg.org/xfn/11"> <title></title> <link rel="stylesheet" href="navigation.css" type="text/css"> <!-- <link rel="stylesheet" href="navi.css" type="text/css"> --> </head> <body> <div class="navigation"> <ul> <li> <a href="#">home</a> <ul> <li><a href="#">hello</a></li> <li><a href="#">hi</a></li> <li><a href="#">about us</a></li> </ul> </li> <li><a href="new 2.html">products</a> <ul> <li><a href="#">printing</a></li> <li><a href="#">scanning</a></li> </ul> </li> <li><a href="sidebarright.html">contact</a></li> <li><a href="sidebarright.html">payment</a></li> </ul> </div> </body> </html> css:
.navigation{ width:400px;margin:0; padding:0;} .navigation li{ display:inline; } .navigation li a{ color:white; padding:.2em 1em; background-color:black; text-decoration:none; font-size:20px; background-color:black; border-right:1px white solid; } .navigation li a:hover{background-color:#eee;border-top:2px solid #ddd;color:#333;} .navigation li ul { position: absolute; display: none; width: inherit; } .navigation li:hover ul { display:block; width:100px; margin: 4px 0 0 -20px; } .navigation li:hover ul li{ position: relative; list-style-type:none; float:left; } .navigation li:hover ul li a{ display:block; width:100px; float:left; color:red; padding:.2em 1em; background-color:#eee; border-bottom:thin black solid; }
add position:relative li, give left value submenu, submenu comes under correct parent menu.
also if don't want spaces between menu items, use float:left on li instead of display:inline. can still see small white space, border-right you've added on .navigation li a
Comments
Post a Comment