如何在圆形设计中使用HTML、CSS和JQuery创建交互式导航

<div class="nav-container">
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

.nav-container {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border-radius: 50%;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.nav-list li {
  margin-top: 20px;
}

.nav-list li a {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}

.nav-list li a:hover {
  color: #ff0000;
}

$(document).ready(function() {
  $('.nav-list li').hover(function() {
    $(this).animate({ marginTop: '30px' }, 200);
  }, function() {
    $(this).animate({ marginTop: '20px' }, 200);
  });

  $('.nav-list li a').click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    window.location.href = href;
  });
});