ninjadonkey Posted June 21, 2010 Report Share Posted June 21, 2010 I downloaded this Drop-Down Menu and tried to figure out how to center it with no success. I'm sure its something easy but i'm a rookie. style.css body {margin:25px; font:11px Verdana,Arial; background:#eee} ul.menu {list-style:none; margin:0; padding:0} ul.menu * {margin:0; padding:0} ul.menu a {display:block; color:#000; text-decoration:none} ul.menu li {position:relative; float:left; margin-right:2px} ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none} ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0} ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1} ul.menu ul li a:hover {background-color:#c5c5c5} ul.menu ul ul {left:148px; top:-1px} ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(images/header.gif); width:134px} ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)} ul.menu .sub {background:#d1d1d1 url(images/arrow.gif) 136px 8px no-repeat} ul.menu .topline {border-top:1px solid #aaa} HTML menu section <ul class="menu" id="menu"> <li><a href="#" class="menulink">Dropdown One</a> <ul> <li><a href="#">Navigation Item 1</a></li> <li> <a href="#" class="sub">Navigation Item 2</a> <ul> <li class="topline"><a href="#">Navigation Item 1</a></li> <li><a href="#">Navigation Item 2</a></li> <li><a href="#">Navigation Item 3</a></li> <li><a href="#">Navigation Item 4</a></li> <li><a href="#">Navigation Item 5</a></li> </ul> </li> <li> <a href="#" class="sub">Navigation Item 3</a> <ul> <li class="topline"><a href="#">Navigation Item 1</a></li> <li><a href="#">Navigation Item 2</a></li> <li> <a href="#" class="sub">Navigation Item 3</a> <ul> <li class="topline"><a href="#">Navigation Item 1</a></li> <li><a href="#">Navigation Item 2</a></li> <li><a href="#">Navigation Item 3</a></li> <li><a href="#">Navigation Item 4</a></li> <li><a href="#">Navigation Item 5</a></li> <li><a href="#">Navigation Item 6</a></li> </ul> </li> <li><a href="#">Navigation Item 4</a></li> </ul> </li> <li><a href="#">Navigation Item 4</a></li> <li><a href="#">Navigation Item 5</a></li> </ul> </li> <li><a href="#" class="menulink">Non-Dropdown</a></li> <li> <a href="#" class="menulink">Dropdown Two</a> <ul> <li><a href="#">Navigation Item 1</a></li> <li> <a href="#" class="sub">Navigation Item 2</a> <ul> <li class="topline"><a href="#">Navigation Item 1</a></li> <li><a href="#">Navigation Item 2</a></li> <li><a href="#">Navigation Item 3</a></li> </ul> </li> </ul> </li> <li> <a href="#" class="menulink">Dropdown Three</a> <ul> <li><a href="#">Navigation Item 1</a></li> <li><a href="#">Navigation Item 2</a></li> <li><a href="#">Navigation Item 3</a></li> <li><a href="#">Navigation Item 4</a></li> <li><a href="#">Navigation Item 5</a></li> <li> <a href="#" class="sub">Navigation Item 6</a> <ul> <li class="topline"><a href="#">Navigation Item 1</a></li> <li><a href="#">Navigation Item 2</a></li> </ul> </li> <li><a href="#">Navigation Item 7</a></li> <li><a href="#">Navigation Item 8</a></li> <li><a href="#">Navigation Item 9</a></li> <li><a href="#">Navigation Item 10</a></li> </ul> </li> </ul> Any help would be awesome Kaine Quote Link to comment Share on other sites More sharing options...
newseed Posted June 22, 2010 Report Share Posted June 22, 2010 Wrap a <div> </div> around the menu and then add text-align: center to the <div>. Now apply display: inline-block to the ul.menu css element. Quote Link to comment Share on other sites More sharing options...
ninjadonkey Posted June 22, 2010 Author Report Share Posted June 22, 2010 Thanks Newseed, I spent 2 days trying everything i could google, Your the man Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.