根據要求完成以下網頁選單： 1、使用無序列表和超連結完成選單； 2、滑鼠懸停選單後，選單樣式發生變化。

<!DOCTYPE html>

<html lang="en">



<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <style>
    \* {
      padding: 0;
      margin: 0;
      text-decoration: none;
      font-size: 20px;
    }
    ul li {
      display: block;
      float: left;
      width: 150px;
      height: 77px;
      margin: 28px;
      border: 1px #000000 solid;
      text-align: center;
    }

    ul li a:hover {
      color: #018001;
    }

    ul li:hover {
      border: 1px #ffffff solid;
    }
  </style>
</head>

<body>
  <ul>
    <li><a href="javascript:;">
                <p><br>首頁<br>Home</p>
      </a></li>
    <li><a href="javascript:;">
                <p><br>社群<br>SNS</p>
      </a></li>
    <li><a href="javascript:;">
                <p><br>技能<br>Skill</p>
      </a></li>
    <li><a href="javascript:;">
                <p><br>科學<br>Science</p>
      </a></li>
  </ul>
</body>
</html>

還沒解決的問題：
1.能不能不用浮動
2.字型能不能調整為自適應邊框