用html和css以及js写一个扇形菜单,分别有一级、二级、三级菜单;当鼠标悬浮在一级菜单上时,二级菜单将会展开;当鼠标悬浮在二级菜单上时,三级菜单将会展开;当鼠标点击三级菜单时,页面的背景图片将会进行更换。

这是一个比较复杂的项目，需要用到HTML、CSS、JavaScript以及一些算法。以下是一个简单的实现方案：

HTML部分：

<div class="menu">
  <div class="item">
    <a href="#">一级菜单1</a>
    <div class="sub-menu">
      <div class="item">
        <a href="#">二级菜单1</a>
        <div class="sub-menu">
          <div class="item"><a href="#">三级菜单1</a></div>
          <div class="item"><a href="#">三级菜单2</a></div>
          <div class="item"><a href="#">三级菜单3</a></div>
        </div>
      </div>
      <div class="item"><a href="#">二级菜单2</a></div>
      <div class="item"><a href="#">二级菜单3</a></div>
    </div>
  </div>
  <div class="item"><a href="#">一级菜单2</a></div>
  <div class="item"><a href="#">一级菜单3</a></div>
</div>

CSS部分：

.menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  position: relative;
  margin: 0 20px;
  font-size: 18px;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

.sub-menu .item {
  display: block;
  margin: 10px 0;
}

.sub-menu .sub-menu {
  top: 0;
  left: 100%;
  min-width: 100%;
}

.active {
  background-image: url('new-background.jpg');
}

JavaScript部分：

var items = document.querySelectorAll('.item');
var activeSubMenu = null;

function showSubMenu(subMenu) {
  if (activeSubMenu) {
    activeSubMenu.style.display = 'none';
  }
  subMenu.style.display = 'block';
  activeSubMenu = subMenu;
}

function hideSubMenu() {
  if (activeSubMenu) {
    activeSubMenu.style.display = 'none';
    activeSubMenu = null;
  }
}

items.forEach(function(item) {
  var subMenu = item.querySelector('.sub-menu');
  if (subMenu) {
    item.addEventListener('mouseover', function() {
      showSubMenu(subMenu);
    });
    item.addEventListener('mouseout', function(e) {
      if (!e.relatedTarget.closest('.sub-menu')) {
        hideSubMenu();
      }
    });
  }
  var subItems = item.querySelectorAll('.sub-menu .item');
  if (subItems.length) {
    subItems.forEach(function(subItem) {
      subItem.addEventListener('mouseover', function() {
        showSubMenu(subItem.querySelector('.sub-menu'));
      });
      subItem.addEventListener('mouseout', function(e) {
        if (!e.relatedTarget.closest('.sub-menu')) {
          hideSubMenu();
        }
      });
      subItem.addEventListener('click', function() {
        document.body.classList.add('active');
      });
    });
  }
});

这个实现方案使用了事件委托来监听鼠标事件，当鼠标悬浮在菜单项上时，会展开下一级菜单，当鼠标移开时会自动收起菜单。当点击三级菜单时，页面的背景图片会更换。