菜单在HTML中的位置

Question

如何在所需位置更改菜单的位置？我得到了圆形菜单的代码，我想将其放在段落中。我希望它看起来像一个文本，如果我单击该文本（它将是一个单词），则希望它用作菜单并根据我单击的子菜单来更改文本。当前，有5个子菜单。例如，如果我单击第一个菜单“百分比”，我希望它将文本从d = -0.32更改为p = 32％，其中d = -0.32是菜单按钮。这是代码。谢谢您的帮助。

CSS：

.circular-menu {
  font-size: 20px;
  width: 380px;
  height: 250px;
  margin-left: 190px;
  margin-top: 5em;
  padding-left: 190px;
  padding-top: 20px;
}
.circular-menu__button {
  display: none;
}
.circular-menu__button:checked + .circular-menu__icon {
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
          transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transition-duration: 0.2s;
  transition-timing-function: linear;
}
.circular-menu__button:checked + .circular-menu__icon > .hamburger-bar-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
          transform: translate3d(0, 0, 0) rotate(45deg);
}
.circular-menu__button:checked + .circular-menu__icon > .hamburger-bar-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
          transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.circular-menu__button:checked + .circular-menu__icon > .hamburger-bar-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
          transform: translate3d(0, 0, 0) rotate(-45deg);
}
.circular-menu__button:checked ~ .circular-menu__item {
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.circular-menu__button:checked ~ .circular-menu__item:nth-of-type(1) {
  transition-duration: 0.18s;
  -webkit-transform: translate3d(0px, -105px, 0);
          transform: translate3d(0px, -105px, 0);
}
.circular-menu__button:checked ~ .circular-menu__item:nth-of-type(2) {
  transition-duration: 0.28s;
  -webkit-transform: translate3d(99.86093418px, -32.446784369999996px, 0);
          transform: translate3d(99.86093418px, -32.446784369999996px, 0);
}
.circular-menu__button:checked ~ .circular-menu__item:nth-of-type(3) {
  transition-duration: 0.38s;
  -webkit-transform: translate3d(61.71745146px, 84.94678437px, 0);
          transform: translate3d(61.71745146px, 84.94678437px, 0);
}
.circular-menu__button:checked ~ .circular-menu__item:nth-of-type(4) {
  transition-duration: 0.48s;
  -webkit-transform: translate3d(-61.71745146px, 84.94678437px, 0);
          transform: translate3d(-61.71745146px, 84.94678437px, 0);
}
.circular-menu__button:checked ~ .circular-menu__item:nth-of-type(5) {
  transition-duration: 0.58s;
  -webkit-transform: translate3d(-99.86093418px, -32.446784369999996px, 0);
          transform: translate3d(-99.86093418px, -32.446784369999996px, 0);
}
.circular-menu__icon {
  background: #dc143c;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  color: #fff;
  height: 80px;
  line-height: 80px;
  margin-left: -40px;
  position: absolute;
  text-align: center;
  top: 20px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  transition: -webkit-transform ease-out 0.2s;
  transition: transform ease-out 0.2s;
  transition: transform ease-out 0.2s, -webkit-transform ease-out 0.2s;
  width: 80px;
  cursor: pointer;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
          transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 2;
}
.circular-menu__icon:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
          transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.circular-menu__icon > .hamburger {
  background: #fff;
  display: block;
  width: 25px;
  height: 3px;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  position: absolute;
  top: 50%;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.circular-menu__icon > .hamburger-bar-1 {
  -webkit-transform: translate3d(0, -8px, 0);
          transform: translate3d(0, -8px, 0);
}
.circular-menu__icon > .hamburger-bar-2 {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.circular-menu__icon > .hamburger-bar-3 {
  -webkit-transform: translate3d(0, 8px, 0);
          transform: translate3d(0, 8px, 0);
}
.circular-menu__item {
  background: #dc143c;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  color: #fff;
  height: 80px;
  line-height: 80px;
  margin-left: -40px;
  position: absolute;
  text-align: center;
  top: 20px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  transition: -webkit-transform ease-out 0.2s;
  transition: transform ease-out 0.2s;
  transition: transform ease-out 0.2s, -webkit-transform ease-out 0.2s;
  width: 80px;
  font-size: 32px;
}
.circular-menu__item:nth-of-type(1) {
  transition-duration: 0.18s;
}
.circular-menu__item:nth-of-type(2) {
  transition-duration: 0.18s;
}
.circular-menu__item:nth-of-type(3) {
  transition-duration: 0.18s;
}
.circular-menu__item:nth-of-type(4) {
  transition-duration: 0.18s;
}
.circular-menu__item:nth-of-type(5) {
  transition-duration: 0.18s;
}
.circular-menu__item:hover {
  color: #dc143c;
  background: #f08080;
}
.circular-menu__item:active,
.circular-menu__item:focus {
  color: #8b0000;
}

HTML

<nav class="circular-menu">
  <input class="circular-menu__button" id="circular-menu" type="checkbox" href="javascript: void 0" checked="checked" />
  <label class="circular-menu__icon" for="circular-menu"><span class="hamburger hamburger-bar-1"></span><span class="hamburger hamburger-bar-2"></span><span class="hamburger hamburger-bar-3"></span></label><a class="circular-menu__item" href="#"><i class="fa fa-chrome"></i></a>
  <a class="circular-menu__item" href="#"><i class="fa fa-firefox"></i></a><a class="circular-menu__item" href="#"><i class="fa fa-edge"></i></a><a class="circular-menu__item" href="#"><i class="fa fa-safari"></i></a>
  <a class="circular-menu__item" href="#"><i class="fa fa-opera"></i></a>
    </nav>