li 写在 ul 前面的 CSS 写法是啥意思？

This topic created in 3933 days ago, the information mentioned may be changed or developed.

.main-navigation .menu li ul {
visibility: hidden;
background: #ffffff;
text-align: left;
padding: 7px 0px;
margin: 0;
position: absolute;
left: 0;
top: 120%;
width: 200px;
z-index: 999;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

0.2s

ease

opacity=0

11 replies • 2015-08-05 18:15:00 +08:00

a591826944

Aug 5, 2015

二级以及二级以后的菜单项

TakanashiAzusa

Aug 5, 2015

@a591826944 li后面找不到ul啊。。还是说他的HTML是
ul>li>ul
这样？

lichao

Aug 5, 2015

@TakanashiAzusa 对了，就是列表中再嵌套列表

haiyang416

Aug 5, 2015

列表嵌套，很正常的情况，一般前端框架中的 subnav 都是这样的。

blacktulip

Aug 5, 2015

嵌套咯，可以一层套一层

1dian01

Aug 5, 2015

问题是html是这样的，下面没有 ul了


<nav class="main-navigation">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header">
<span class="nav-toggle-button collapsed" data-toggle="collapse" data-target="#main-menu">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</span>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="menu">
<li class="nav-current" role="presentation"><a href="/">首页</a></li>
<li role="presentation"><a href="http://wenda.ghostchina.com">论坛</a></li>
<li role="presentation"><a href="/ghost-cheat-sheet/">快捷手册</a></li>
<li role="presentation"><a href="http://docs.ghostchina.com/zh/">中文文档</a></li>
<li role="presentation"><a href="/download/">下载</a></li>
<li role="presentation"><a href="/about/">关于</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>

1dian01

Aug 5, 2015

@blacktulip
@haiyang416
@lichao
@TakanashiAzusa
@a591826944
上面加上了html部分，li下面没有ul了，咋嵌套呢？

http://www.ghostchina.com/ 这个网站

lingyired

Aug 5, 2015

@1dian01

当前网站的需求里面不需要二次菜单嵌套。
但是这个模版/主题支持这种的嵌套。

gongpeione

Aug 5, 2015

他只是没加二级菜单而已，你自己 f12 在某一个li里嵌套一个ul就可以看到效果了

LancerComet

Aug 5, 2015

只说这个问题，这个是为嵌套列表准备的，只是当前 HTML 里没有用到嵌套列表而已。

blacktulip

Aug 5, 2015

@1dian01 css 里面有但是 html 里面不一定要用...