易优eyoucms关于二级栏目调用的问题

Question

易优eyoucms 二级栏目太多，超过了页面之后就不显示了，想把竖列改成横列。

html部分

      <nav class="nav-bar" id="nav-box" data-type="index" data-infoid="">
        <ul class="nav">
          <li {eyou:eq name='$Request.param.m' value='Index'} class="active"{/eyou:eq}><a href="{eyou:global name='web_basehost' /}">首页</a></li>
          {eyou:models type="top" id="field" currentstyle="active"}
          <li class="{$field.currentstyle}"><a href="{$field.typeurl}">{$field.typename}</a> {eyou:notempty name="$field.children"}
            <ul class="sub-menu">
              {eyou:models name="$field.children" id="field2"}
              <li><a href="{$field2.typeurl}">{$field2.typename}</a></li>
              {/eyou:models}
            </ul>
            {/eyou:notempty} </li>
          {/eyou:models}
        </ul>
      </nav>

CSS部分

.header .nav-bar {
    float: left;
    margin-left: 4%;
}

.header .nav-bar li {
    display: inline-block;
    height: 78px;
    line-height: 78px;
    position: relative;
    vertical-align: top;
}

.header .nav-bar li a {
    display: inline-block;
    padding: 0 15px;
    color: #6b7386;
    font-size: 16px;
    position: relative;
    z-index: 2;
    min-width: 68px;
    text-align: center
}

.header .nav-bar li em[class*="dot"] {
    display: inline-block;
    position: relative;
    left: -10px;
    z-index: 1;
    width: 16px;
}

.header .nav-bar li em[class*="dot"] .fa {
    color: #666;
    font-size: 16px;
    width: 16px;
    display: block;
}

.header .nav-bar li a:hover {
    color: #ff3366;
    transition: all 500ms ease;
}

.header .nav-bar li.active:before,.header .nav-bar li[class*="li-cate-"]:before {
    position: absolute;
    content: '';
    background: #ff3366;
    width: 0;
    height: 5px;
    left: 0px;
    right: 0;
    margin: 0px auto;
    bottom: 0px;
}

.header .nav-bar li.active:after,.header .nav-bar li[class*="li-cate-"]:after {
    position: absolute;
    content: '';
    background: #ffffff;
    width: 6px;
    height: 3px;
    right: 32%;
    bottom: 18px;
}

.header .nav-bar li.on:before,.header .nav-bar li.active:before {
    width: 40px;
}

.header .nav-bar li.active > a {
    color: #ff3636;
}

@-webkit-keyframes shine {
    from {
        -webkit-mask-position: 150%;
    }

    to {
        -webkit-mask-position: -50%;
    }
}

.header .nav-bar ul li>ul {
    width: 100%;
    min-width: 110px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    background: #fff;
    z-index: 888;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0px 8px 20px 0px rgba(0,0,0,0);
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.1);
}

.header .nav-bar ul li>ul li {
    width: 100%;
    height: 42px;
    line-height: 42px;
    display: block;
}

.header .nav-bar ul li>ul li a {
    width: 100%;
    text-align: center;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    color: #6b7386;
    opacity: 1
}

.header .nav-bar ul li>ul li.on a:hover {
    color: #ff3366;
}

.header .nav-bar ul li.on>ul {
    visibility: visible;
    opacity: 1;
}

.header .nav-bar ul li>ul li em[class*="dot"] {
    position: absolute;
    right: 5px;
    left: auto;
    top: 10px;
    z-index: 3;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.header .nav-bar ul li.on>ul li em[class*="dot"] .fa {
    color: #6b7386;
}

.header .nav-bar ul li>ul li .sub-menu {
    visibility: hidden;
    opacity: 0;
    display: none;
    left: -100%;
    transform: none;
}

.header .nav-bar ul li>ul li.on .sub-menu {
    right: -100%;
    left: auto;
    top: 0;
    visibility: visible;
    opacity: 1;
    display: block;
}

.header .nav-bar ul li>ul li.on .sub-menu li a,.header .nav-bar ul li>ul li.on .sub-menu li a:hover {
    background: rgba(0,0,0,0);
    color: #6b7386);
}

.header .nav-bar ul li>ul li.on .sub-menu li.on a,.header .nav-bar ul li>ul li.on .sub-menu li.on a:hover {
    color: #ff3366;
}

Answer 1

AIGC生成：

---

易优eyoucms关于二级栏目调用的问题

问题描述：在易优eyoucms中，二级栏目太多，超过了页面后不显示，想把竖列改成横列。

解决方案：可以通过CSS的flexbox布局来实现横列显示。首先，需要在HTML部分添加一个容器元素，例如

，然后在CSS文件中添加以下代码：

.nav-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav-bar {
  margin: 10px;
}

这段代码将容器元素设置为flexbox布局，并将其子元素（nav-bar）设置为flexbox布局。然后，使用justify-content: space-between将子元素水平居中，并使用margin: 10px添加间距。

接下来，在HTML部分添加以下代码：

<nav class="nav-bar" id="nav-box">
  <ul>
    <li><a href="#">一级栏目1</a></li>
    <li><a href="#">一级栏目2</a></li>
    <li><a href="#">一级栏目3</a></li>
    <!-- 添加更多的二级栏目 -->
  </ul>
</nav>

这段代码添加了一个nav元素，并将其子元素设置为ul列表。然后，添加更多的li元素作为二级栏目。

最终的效果将是横列显示的二级栏目。

示例：

<nav class="nav-bar" id="nav-box">
  <div class="nav-container">
    <ul>
      <li><a href="#">一级栏目1</a>
        <ul>
          <li><a href="#">二级栏目1.1</a></li>
          <li><a href="#">二级栏目1.2</a></li>
          <li><a href="#">二级栏目1.3</a></li>
        </ul>
      </li>
      <li><a href="#">一级栏目2</a>
        <ul>
          <li><a href="#">二级栏目2.1</a></li>
          <li><a href="#">二级栏目2.2</a></li>
          <li><a href="#">二级栏目2.3</a></li>
        </ul>
      </li>
      <li><a href="#">一级栏目3</a>
        <ul>
          <li><a href="#">二级栏目3.1</a></li>
          <li><a href="#">二级栏目3.2</a></li>
          <li><a href="#">二级栏目3.3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

示例输出：

一级栏目1 • 二级栏目1.1 • 二级栏目1.2 • 二级栏目1.3

一级栏目2 • 二级栏目2.1 • 二级栏目2.2 • 二级栏目2.3

一级栏目3 • 二级栏目3.1 • 二级栏目3.2 • 二级栏目3.3