accegercaks
New Member
I have this dynamic UL, and I need it to be centered in my page.Here is my HTML:\[code\]<ul id="nav"> <li><div class="tabquad">First</div> <ul> <li><a class="item" href="http://stackoverflow.com/questions/14623565/#"><div class="tabquad">One</div></a></li> <li><a class="item" href="http://stackoverflow.com/questions/14623565/#"><div class="tabquad">Two</div></a></li> <li><a class="item" href="http://stackoverflow.com/questions/14623565/#"><div class="tabquad">Three</div></a></li> </ul> </li> <li><div class="tabquad">Second</div> <ul> <li><a class="item" href="http://stackoverflow.com/questions/14623565/#"><div class="tabquad">One</div></a></li> <li><a class="item" href="http://stackoverflow.com/questions/14623565/#"><div class="tabquad">Two</div></a></li> <li><a class="item" href="http://stackoverflow.com/questions/14623565/#"><div class="tabquad">Three</div></a></li> <li><a class="item" href="http://stackoverflow.com/questions/14623565/#"><div class="tabquad">Four</div></a></li> <li><a class="item" href="http://stackoverflow.com/questions/14623565/#"><div class="tabquad">Five</div></a></li> </ul> </li> <li><div class="tabquad">Third</div> <ul> <li><a class="item" href="http://stackoverflow.com/questions/14623565/#"><div class="tabquad">One</div></a></li> <li><a class="item" href="http://stackoverflow.com/questions/14623565/#"><div class="tabquad">Two</div></a></li> <li><a class="item" href="http://stackoverflow.com/questions/14623565/#"><div class="tabquad">Three</div></a></li> </ul> </li></ul>\[/code\]My CSS:\[code\].tabquad{ color:white; margin:auto; position:relative; border:2px solid #000; border-color:rgb(82,115,154); width:200px; height:30px; text-align:center; padding-top:10px; top:25px; background-color:rgb(0,56,130);}.tabquad:hover{ background-color:rgb(49,87,132); cursor: hand;}#nav, #nav ul { padding: 0; margin: 0; list-style: none;}#nav a { display: block; width: 15em;}#nav li { float: left; width: 15em;}#nav li ul { position: absolute; width: 15em; left: -999em;}.item{ color:#0E4063; text-decoration:none;}#nav li:hover ul { left: auto;}#nav li:hover ul, #nav li.sfhover ul { left: auto;}\[/code\]My JS:\[code\]sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls.onmouseover=function() { this.className+=" sfhover"; } sfEls.onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } }}if (window.attachEvent) window.attachEvent("onload", sfHover);\[/code\]How do I center the whole thing?Here you can find a test on jsfiddleEDIT: I need 3 columns, all centered in my page.