以下是一种使用Ajax更新CSS菜单的最佳实践方法：

HTML 结构：

  

    
菜单项1
    
菜单项2
    
菜单项3
  

CSS 样式：

#menu ul li {
  display: inline;
}

#menu ul li a {
  text-decoration: none;
  padding: 5px;
}

#menu ul li.active a {
  color: red;
  font-weight: bold;
}

JavaScript 代码：

// 使用jQuery库简化Ajax操作
$(document).ready(function() {
  // 绑定菜单项点击事件
  $('#menu ul li a').click(function(e) {
    e.preventDefault(); // 阻止默认链接行为
    var url = $(this).attr('href'); // 获取目标页面的URL

    // 发起Ajax请求
    $.ajax({
      url: url,
      type: 'GET',
      success: function(response) {
        // 更新菜单项样式
        $('#menu ul li').removeClass('active');
        $(e.target).parent().addClass('active');

        // 更新页面内容
        $('#content').html(response);
      },
      error: function() {
        alert('加载页面失败！');
      }
    });
  });
});

在上面的代码中，我们使用jQuery库来简化Ajax操作。当用户单击菜单项时，阻止默认的链接行为，并使用Ajax请求目标页面。请求成功后，我们更新菜单项的样式为active，并将目标页面的内容更新到指定的容器中（假设容器的id为content）。

这是一个基本的示例，你可以根据自己的需求进行修改和扩展。