根据要求完成以下网页菜单： 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{
     /* 字体颜色 */
      color: black;
    }
​    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.字体能不能调整为自适应边框
版权声明：本文为lmhnba原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。