Html 列表类型消失

我正在尝试创建一个下拉菜单

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li id="mobile"><a href="#">Mobile</a></li>
</ul>

问题是，当#mobile可见时，仅此项的列表中缺少光盘。

---

这里发生了什么？解决方案是什么？

不要使用

显示：阻止
使用

列表项的单个值将导致元素的行为类似于列表项。这可以与列表样式类型和列表样式位置一起使用


li#mobile{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：800px）{
li#mobile{
显示：列表项；
}
}




您可以在媒体查询中使用
display:revert

revertCSS关键字将属性的级联值从其当前值还原为如果当前样式原点未对当前元素进行任何更改时属性将具有的值。因此，如果属性从其父级继承，它会将属性重置为其继承的值，或者重置为由用户代理的样式表（或用户样式，如果存在）建立的默认值


li#mobile{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：800px）{
li#mobile{
显示：还原；
}
}




执行相反的逻辑，只需设置
dispay:none


@媒体屏幕和（最小宽度：800px）{
li#mobile{
显示：无；
}
}





li#mobile {
    display: none;
}

@media screen and (max-width: 800px) {
    li#mobile {
        display: block;
    }
}