html中怎麽設置成圖中那樣的菜單

<!doctype?html>

<html>

<head>

<title>無標題文檔</title>

<!--

*?{?margin:0;?padding:0;?list-style:none;?border:none;}

div?{?margin:0?auto;}

#Menu?{?width:600px;?overflow:hidden;?font-family:"微軟雅黑";?font-size:18px;?line-height:24px;}

#Menu?li?{?float:left;?width:100px;?height:50px;?overflow:hidden;?overflow:hidden;?text-align:center;}

#Menu?li?p?{?font-size:12px;?color:#333;}

#Menu?li?a?{?margin:0?auto;?width:80px;?display:block;?height:48px;?overflow:hidden;}

#Menu?li?a:link,#Menu?li?a:visited?{?color:#666;?text-decoration:none;}

#Menu?li?a:hover?{?border-bottom:2px?solid?#00F;}

#Menu?li?a.act?{?border-bottom:2px?solid?#00F;}

-->

</style>

</head>

<body>

<div?id="Menu">

<ul>

<li><a?href="#">關於<p>ABOUT</p></a></li>

<li><a?href="#">服務<p>SERVIC</p></a></li>

<li><a?href="#">招聘<p>CAREER</p></a></li>

</ul>

</div>

</body>

</html>塗鴉之作，希望能幫上妳的忙，望采納