my dropdown menu has position absolute and I want to center my dropdown menu to its respective li.I dont want to set margin statically because it will affect to other menu as well.HTML\[code\]<div class="top_nav"> <!--naviagation top Begins--> <ul> <li id="active"> <a href="http://stackoverflow.com/questions/13873289/#" id="active"><img src="http://stackoverflow.com/questions/13873289/images/home.png" />home</a> <!-- <div class="DDmenu" id="hmedd" style="display:none"> <ul> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy1</a></li> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy2</a></li> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy3</a></li> </ul> </div>--> <div class="clear"></div> <div class="current_menu"></div> </li> <li id="abt" onmouseover="showmenu('abtdd');" onmouseout="hidemenu('abtdd');" > <a href="http://stackoverflow.com/questions/13873289/#">about us</a> <div class="DDmenu" id="abtdd" style="display:none"> <ul> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy1</a></li> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy2</a></li> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy3</a></li> </ul> </div> </li> <li id="invent" onmouseover="showmenu('inventdd');" onmouseout="hidemenu('inventdd');"> <a href="http://stackoverflow.com/questions/13873289/#">inventions</a> <div class="DDmenu" id="inventdd" style="display:none"> <ul> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy Invent1</a></li> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy Invent2</a></li> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy Invent3</a></li> </ul> </div> </li> <li id="archi" onmouseover="showmenu('archidd');" onmouseout="hidemenu('archidd');"> <a href="http://stackoverflow.com/questions/13873289/#">architectural</a> <div class="DDmenu" id="archidd" style="display:none"> <ul> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy Architecture1</a></li> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy Architecture2</a></li> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy Architecture3</a></li> </ul> </div> </li> <li id="artli" onmouseover="showmenu('artlidd');" onmouseout="hidemenu('artlidd');"> <a href="http://stackoverflow.com/questions/13873289/#">art pieces</a> <div class="DDmenu" id="artlidd" style="display:none"> <ul> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy art1</a></li> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy art2</a></li> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy art3</a></li> </ul> </div> </li> <li id="caravanli" onmouseover="showmenu('caravanlidd');" onmouseout="hidemenu('caravanlidd');"> <a href="http://stackoverflow.com/questions/13873289/#">caravan</a> <div class="DDmenu" id="caravanlidd" style="display:none"> <ul> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy caravan1</a></li> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy caravan2</a></li> <li><a href="http://stackoverflow.com/questions/13873289/#">Dummy caravan3</a></li> </ul> </div> </li> <li id="tab"> <a href="http://stackoverflow.com/questions/13873289/#">tables</a> </li> </ul> <!--naviagation top Ends--> </div>\[/code\]CSS:\[code\] .top_nav{ width:100%; height:30px; /*margin-left:130px;*/}.top_nav ul{ padding:0; margin:0 0 0 68px;}.top_nav ul li#active{ float:left; position:relative; padding:5px 0 0 0; background: #c2cca2; margin:0 8px; color:#000; list-style:none;}.top_nav ul li{ float:left; position:relative; padding:12px 0 7px 35px; /*added padding top+5 to add space between bg and text*/ margin:0 8px; list-style:none;}.top_nav ul li a{ text-decoration:none; text-transform:capitalize; color:#fff; font-size:14px; font-weight:bold; padding-right:6px; vertical-align:baseline;}.top_nav ul li:hover a{color:#000;}.top_nav ul li ul li a{color:#FFF!important;}.top_nav ul li ul li:hover a{color:#000!important;}.top_nav ul li a#active{ text-decoration:none; text-transform:capitalize; color:#000; font-size:14px; font-weight:bold; padding-right:6px; vertical-align:baseline;}/*.top_nav ul li:hover{ /*background:#c2cca2; background:url(../images/menu_bg.png) left top repeat-y;}*/.top_nav ul li#abt{ background:#c2cca2; }.top_nav ul li#invent{ background:#c2cca2; height:19px; }.top_nav ul li#archi{ background:#c2cca2; height:19px;}.top_nav ul li#artli{ background:url(../images/art.png) 5px 5px no-repeat; height:19px;}.top_nav ul li#caravanli{ background:#c2cca2; height:19px;}.top_nav ul li#tab{ background:#c2cca2; height:19px;}.top_nav ul li#abt:hover{ background:#c2cca2; color:#000 !important; height:19px;}.top_nav ul li#abt:hover>a:hover{color:inherit;}.top_nav ul li:hover{ color:#000;}.top_nav ul li#invent:hover{ background:#c2cca2; color:#000;}.top_nav ul li#archi:hover{ background:#c2cca2; color:#000;}.top_nav ul li#artli:hover{ background:#c2cca2; color:#000;}.top_nav ul li#caravanli:hover{ background:#c2cca2; color:#000;}.top_nav ul li#tab:hover{ /*background:#c2cca2;*/ background:#c2cca2; color:#000;}/*.top_nav ul li a:hover{ background:#c2cca2; padding:16px 6px 2px 0; padding:16px 6px 0 0\0/;}*/.top_nav ul li img{ /*float:left; position:relative;*/ padding:0 4px 0 5px;}\[/code\]JS\[code\]function showmenu(idm){ document.getElementById(idm).style.display='';}function hidemenu(idmn){ document.getElementById(idmn).style.display='none'; }\[/code\]any suggestion would be appreciated.
how to center dropdown menu when position is absolute for dropdown menu
- Thread starter crixu
- Start date