Centralized unorderlist using CSS

I’ve recieved the order to centralize unorderlist using CSS & HTML as the image below:
It looks quite easy at the first time, does it? However, Takaji made a try first and he found out that it’s not as easy as it does. So, we tried again. If someone is looking for it, just take a look. Hope that it’s helpful!

Here’s the source code to be implemented:

1. css.css

@charset “utf-8″;
/* CentrelizedCSS using div by Tham Thi Van Anh 2009 */

.menucontainer {
width:30%; height:20%;     margin: auto;
}

.mymenu {
margin: auto;
border-top: 2px solid #999999;
border-left: 2px solid #999999;
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}

.mymenu: after {margin:0px; padding:0px;}
.mymenu ul {
list-style:none;
text-align:center;
margin-left:auto;
margin-right:auto;
padding:inherit;
padding-left: 10%; padding-right:10%;
}
.mymenu ul li {    border: none; }
.mymenu ul li:hover {
border: 1px solid #99CC00;
background-color:#FFFF99;
}

2. .html code: import the code below into the body tag

<div class=”menucontainer”>
<div class=”mymenu”>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
P.S: If anyone’s got a better solution, please post!!!

~ by vanganhxinh on January 29, 2009.