我正在尝试使导航的第三级正常工作,但不能。包含在代码段中的代码。导航的第一和第二级效果很好。我希望从右到左打开第三层。
提前致谢。
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/