第三

第三

关注
发信
关注(28)粉丝(399)

css - 第三级导航

我正在尝试使导航的第三级正常工作，但不能。包含在代码段中的代码。导航的第一和第二级效果很好。我希望从右到左打开第三层。

提前致谢。



nav ul {
  list-style: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 11px;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}
.nav ul {
  *zoom: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top:4px;
}
.nav ul:before,
.nav ul:after {
  content: "";
  display: table;
}
.nav ul:after {
  clear: both;
}
.nav ul > li {
  float: left;
  position: relative;
}
.nav a {
  display: block;
  padding: 10px 20px;
  line-height: 1.2em;
  color: #042e79;
}
.nav a.sub{
  display: block;
  padding: 10px 20px;
  line-height: 1.2em;
  color: #FFF;
}
.nav a.secondsub{
  display: block;
  padding: 10px 20px;
  line-height: 1.2em;
  color: #FFF;
}
.nav a:hover {
  text-decoration: none;
  background: #042e79;
  color: #FFF;
}
.nav ul li:hover > a {
    background-color: #042e79;
    color: #FFF;
}
.nav li.active {
  text-decoration: none;
  background: #042e79;
}
.nav li.active a {
  color: #FFF;
}
.nav li ul {
  background: #042e79;
  color: #FFF;
}
.nav li ul li {
  width: 200px;
}
.nav li ul a {
  border: none;
}
.nav li ul a:hover {
  background: rgba(0, 0, 0, 0.2);
}
.nav5 ul > li:hover ul {
  max-height: 1000px;
  -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
}
.nav5 li ul {
  position: absolute;
  right: 0;
  text-align: right;
  top: 29px;
  z-index: 1000;
  max-height: 0;
  overflow: hidden;
  -webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: 50% 0;
  -webkit-transition: 350ms;
  -moz-transition: 350ms;
  -o-transition: 350ms;
  transition: 350ms;
}
.arrow {
    background: url("../images/content/arrow-down.png") no-repeat;
    display: inline-block;
    height: 8px;
    width: 12px;
    margin-right: 4px;
}

        <nav class="nav nav5">
            <ul>
              <li>
                  <a class="wow fadeInDownBig scroll" data-wow-delay="1.3s" href="#lunch">خروج</a>
              </li>
              <li>
                  <a class="wow fadeInDownBig scroll" data-wow-delay="1.3s" href="#lunch">دفترچه تلفن</a>
              </li>
              <li>
                  <a class="wow fadeInDownBig scroll" data-wow-delay="1.1s" href="#lunch">آموزش</a></li>
              <li>
                  <a class="wow fadeInDownBig scroll" data-wow-delay="0.9s" href="#lunch">انتخاب غذای هفتگی</a></li>
              <li>
                  <a class="wow fadeInDownBig scroll" data-wow-delay="0.7s" href="#about">دسترسی سریع</a></li>
              <li>
                  <a class="wow fadeInDownBig scroll" data-wow-delay="0.5s" href="#products"><span class="arrow"></span>سیستم مدیریت یکپارچه</a>
                  <ul class="subs">
                      <li><a class="sub" href="#">نمودار سازمانی</a></li>
                      <li><a class="sub" href="#">ماموریت چشم انداز</a></li>
                      <li><a class="sub" href="#" dir="rtl">خط مشی IMS سازمان</a></li>
                      <li><a class="sub" href="#">شرح وظایف</a></li>
                      <li><a class="sub" href="#" dir="rtl">نظام نامه IMS</a></li>
                      <li><a class="sub" href="#">فرآیندها</a></li>
                      <li>
                          <a class="sub" href="#">روش های اجرایی / دستورالعمل ها</a>
                          <ul class="secondsubs">
                            <li><a class="secondsub" href="#">1</a></li>
                            <li><a class="secondsub" href="#">2</a></li>
                          </ul>
                      </li>
                  </ul>
              </li>
              <li>
                  <a class="wow fadeInDownBig scroll" data-wow-delay="0.3s" href="#cooking"><span class="arrow"></span>واحدها</a>
                  <ul class="subs">
                      <li><a class="sub" href="#">DPA</a></li>
                      <li><a class="sub" href="#">HSEQ</a></li>
                      <li><a class="sub" href="#">ICT</a></li>
                      <li><a class="sub" href="#">امور حقوقی و قراردادها</a></li>
                      <li><a class="sub" href="#">امور مالی</a></li>
                      <li><a class="sub" href="#">برنامه ریزی و سیستم ها</a></li>
                      <li><a class="sub" href="#">تدارکات و امور کالا</a></li>
                      <li><a class="sub" href="#">تعمیرات و نگهداری</a></li>
                      <li><a class="sub" href="#">عملیات</a></li>
                      <li><a class="sub" href="#">منابع انسانی</a></li>
                  </ul>
              </li>
              <li class="wow fadeInDownBig active"><a data-wow-delay="0.1s" href="#stores">صفحه اصلی</a></li>
            </ul>
       </nav>

最佳答案

使用从右到左的语言时，请使用direction: rtl。
使用float: right代替float: left表示li，以获得更好的RTL一致性。
从overflow: hidden中删除​​.nav5 li ul（它隐藏了第三级ul）
通过应用top: 0; right: 100%使第三级块从右侧出现


最终代码如下所示：



html {direction: rtl;}

nav ul {
  list-style: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 11px;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

.nav ul {
  *zoom: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 4px;
}

.nav ul:before,
.nav ul:after {
  content: "";
  display: table;
}

.nav ul:after {
  clear: both;
}

.nav ul > li {
  float: right;
  position: relative;
}

.nav a {
  display: block;
  padding: 10px 20px;
  line-height: 1.2em;
  color: #042e79;
}

.nav a.sub {
  display: block;
  padding: 10px 20px;
  line-height: 1.2em;
  color: #FFF;
}

.nav a.secondsubs {
  display: block;
  padding: 10px 20px;
  line-height: 1.2em;
  color: #FFF;
}

.nav a:hover {
  text-decoration: none;
  background: #042e79;
  color: #FFF;
}

.nav ul li:hover > a {
  background-color: #042e79;
  color: #FFF;
}

.nav li.active {
  text-decoration: none;
  background: #042e79;
}

.nav li.active a {
  color: #FFF;
}

.nav li ul {
  background: #042e79;
  color: #FFF;
}

.nav li ul li {
  width: 200px;
}

.nav li ul a {
  border: none;
}

.nav li ul a:hover {
  background: rgba(0, 0, 0, 0.2);
}

.nav5 ul > li:hover > ul {
  max-height: 1000px;
  -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
}

.nav5 li ul {
  position: absolute;
  right: 0;
  text-align: right;
  top: 29px;
  z-index: 1000;
  max-height: 0;
  -webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: 50% 0;
  -webkit-transition: 350ms;
  -moz-transition: 350ms;
  -o-transition: 350ms;
  transition: 350ms;
}

.nav5 li ul.secondsubs {
  top: 0;
  right: 100%;
}

.arrow {
  background: url("../images/content/arrow-down.png") no-repeat;
  display: inline-block;
  height: 8px;
  width: 12px;
  margin-right: 4px;
}

<nav class="nav nav5">
<ul>
  <li><a href="#">Nav 1</a></li>
  <li><a href="#">Nav 1</a></li>
  <li>
    <a href="#">Nav 1</a>
    <ul class="subs">
      <li><a href="" class="sub">Nav 2</a></li>
      <li><a href="" class="sub">Nav 2</a></li>
      <li>
        <a href="" class="sub">Nav 2</a>
        <ul class="secondsubs">
          <li><a href="" class="secondsubs">Nav 3</a></li>
          <li><a href="" class="secondsubs">Nav 3</a></li>
          <li><a href="" class="secondsubs">Nav 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</nav>





jsFiddle：https://jsfiddle.net/azizn/bkm1f4gw/

关于css - 第三级导航，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38942251/

10-12 15:25
Powered by LMLPHP ©2024 第三 0.045154