Question

我对html列表有疑问。我用HTML创建了一个列表，并用CSS设置了样式。列表中有孩子。请参阅我所附的屏幕截图。我的问题如下：当有孩子时，我想在父母的文本后面添加一个箭头。箭头应指向下方。打开下拉列表后，箭头应指向上方。

这是关于Wordpress的。我已将代码放在此jsfiddle中：https://jsfiddle.net/ralphsmit/o4a3L86m/1/。请注意，所有样式均已删除，因此看起来很难看；-)，但概念相同。

箭头应如下所示：https://www.kisspng.com/png-chevron-corporation-computer-icons-arrow-symbol-ar-1215165/。如果菜单项已打开，则箭头应指向上方。此外，菜单项的标准不透明度为0.5，将其悬停时会增加到1.0。箭头应该做同样的事情。当页面（说“新闻”）是当前打开的页面时，文本变为红色。我已经使用.current_page_item类完成了此操作。如果箭头也可以做到这一点，那就太棒了！

json_encode

如果您能帮助我，我将不胜感激！

Answer 1

/* Define a fixed width for the entire menu */
.navigation {
  width: 80%;
  position: relative;
  top: 0px;
  left: 0px;
  margin-bottom: 28px;
  pointer-events: none;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}


nav ul:hover > li {
  opacity: 0.5;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .3s ease;
  transition: all .2s ease;
}

nav ul li:hover {
  opacity: 1;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .3s ease;
  transition: all .2s ease;

}


nav>ul, .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* make ALL links (main and sub-menu) have padding and background color */
.mainmenu a {
  display: block;
  font-family: 'Playfair Display', sans-serif;;
  font-weight: normal;
  text-decoration: none;
  font-size: 37px;
  padding: 10px;
  color: rgba(255, 255, 255, 1.0);
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

/* add hover behaviour */
.mainmenu a:hover {
  opacity: 1.0 !important;
}


/* when hovering over a .mainmenu item,
  display the sub-menu inside it.
  we're changing the sub-menu's max-height from 0 to 600px;
*/

.mainmenu li:hover .sub-menu {
  display: block;
  max-height: 600px;
}

/*
  we now overwrite the background-color for .sub-menu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.sub-menu a {
  background-color: rgb(0, 0, 0);
  opacity: 0.5;
  margin-left: 24px;
  font-size: 22px;
}

/* hover behaviour for links inside .sub-menu */
.sub-menu a:hover {
  background-color: rgb(0, 0, 0);
  opacity: 1.0;
}

/* this is the initial state of all sub-menus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.sub-menu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}


ul li.current_page_item > a {
  color: rgba(255, 0, 0, 1.0);
}

.navigation {
  width: 80%;
  position: relative;
  top: 0px;
  left: 0px;
  margin-bottom: 28px;
  pointer-events: none;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}


nav ul:hover > li {
  opacity: 0.5;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .3s ease;
  transition: all .2s ease;
}

nav ul li:hover {
  opacity: 1;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .3s ease;
  transition: all .2s ease;

}


nav>ul, .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* make ALL links (main and sub-menu) have padding and background color */
.mainmenu a {
  display: block;
  font-family: 'Playfair Display', sans-serif;;
  font-weight: normal;
  text-decoration: none;
  font-size: 37px;
  padding: 10px;
  color: rgba(255, 255, 255, 1.0);
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

/* add hover behaviour */
.mainmenu a:hover {
  opacity: 1.0 !important;
}


/* when hovering over a .mainmenu item,
  display the sub-menu inside it.
  we're changing the sub-menu's max-height from 0 to 600px;
*/

.mainmenu li:hover .sub-menu {
  display: block;
  max-height: 600px;
}

.fa-chevron-up {
  display: none;
  opacity: 0;
}

.mainmenu li:hover .fa-chevron-up {
  display: inline-block;
  opacity: 1;
}

.fa-chevron-down {
  opacity: 1;
}

.mainmenu li:hover .fa-chevron-down {
  display: none;
}
/*
  we now overwrite the background-color for .sub-menu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.sub-menu a {
  background-color: rgb(0, 0, 0);
  opacity: 0.5;
  margin-left: 24px;
  font-size: 22px;
}

/* hover behaviour for links inside .sub-menu */
.sub-menu a:hover {
  background-color: rgb(0, 0, 0);
  opacity: 1.0;
}

/* this is the initial state of all sub-menus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.sub-menu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}


ul li.current_page_item > a {
  color: rgba(255, 0, 0, 1.0);
}

* {
margin:0;
padding:0;
}

body {
  background-color: #000000;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
  <nav>
    <ul id="menu-header-menu" class="mainmenu"><li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost/wordpress/page-one/">Work</a></li>
      <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost/wordpress/sample-page/">About</a></li>
      <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19">
        <a href="http://localhost/wordpress/about/">News <i class="fas fa-chevron-down"></i><i class="fas fa-chevron-up"></i>
        </a>
   
        <ul class="sub-menu">
          <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost/wordpress/about/page-two-dropdown-two/">Page two – dropdown two</a></li>
          <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost/wordpress/about/page-two-dropdown-one/">Page two – dropdown one</a></li>
        </ul>
      </li>
      <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a href="#">Link 1</a></li>
      <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="#">2</a></li>
      <li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="#">3</a></li>
      <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27"><a href="#">4</a></li>
      <li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-28"><a href="#">5</a>
        <ul class="sub-menu">
          <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-30"><a href="#">Drop 1</a>
            <ul class="sub-menu">
              <li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a href="#">Drop 2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="#">6</a></li>
      <li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32"><a href="#">7link</a></li>
    </ul>            
  </nav>
</body>
</html>

使用超棒的字体图标来获取箭头。通过此链接https://www.w3schools.com/icons/fontawesome5_intro.asp或您也可以访问他们的official site 希望对您有帮助

Answer 2

您可以使用Pseudo-elements

.menu-item-has-children {
  position: relative;
  margin-left: 40px;
}

.menu-item-has-children:before {
    content: '';
    background: url(https://www.kforce.com/scripts/tablesaw/icons/png/icon-chevron-down.png);
    position: absolute;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
    left: -30px;
    top: 12px;
}

.menu-item-has-children:hover:before {
  transform: rotate(180deg);
}

正在工作的小提琴：https://jsfiddle.net/av70zbcq/

Answer 3

您在这里：https://jsfiddle.net/qunyma6c/ 这是仅CSS的解决方案我所做的就是找到has-children类，然后添加了一个“选择器后的CSS”，这是箭头图标所在的位置，我使用了箭头字符，但是您可以根据需要将其更改为图像或图标，然后添加将鼠标悬停在after选择器上以进行旋转和过渡。

    .menu-item-has-children { position: relative; padding-left: 20px;  }
.menu-item-has-children::after {
    position: absolute;
    top: 20px;
     left: 5px;
    content: "▼";
    color: #fff!important;
}
.menu-item-has-children:hover::after { 
  -webkit-transition: -webkit-transform .2s ease-in-out;
    -ms-transition: -ms-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;  
-ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  }

如何在HTML列表中的文本后面放置箭头？

3 个答案: