因此,就像在照片上一样,我在li.parent > div:after
下添加了标记以清除移动菜单的视图,但是对于某些项目,当显示另一级菜单时,它似乎在不同的地方。图片显示应该在哪里(#2)及其在哪里。看起来他在适当的地方,但这是我标记的div的一部分。
示例网站: https://www.miyou.pl/pl/p/ZLOTA-BRANSOLETKA-585-BEADS-DO-ZAWIESZEK-PANDORA/16352 (移动设备,宽度小于700像素)
CSS
@media (max-width: 767px)
li.parent > div:after {
font-family: FontAwesome;
font-style: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
color: #000 !important;
font-size: 20px;
content: "\f107";
position: absolute;
top: 10px;
right: 10px;
display: block;
cursor: pointer;
font-weight: 700;
z-index: 1;
}
菜单代码
<ul class="menu-list large standard">
<li class="parent" id="hcategory_631">
<div class="menuh3">
<a href="/bizuteria" id="headlink45" class="spanhover mainlevel">
<span>BIŻUTERIA</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
<div class="submenu level1">
<ul class="level1 sub-right">
<li class="parent" id="hcategory_419">
<div class="menuh3">
<a href="/bransoletki" id="headercategory419" class="spanhover">
<span>BRANSOLETKI</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
<div class="submenu level2">
<ul class="level2 sub-right">
<li class="" id="hcategory_605">
<div class="menuh3">
<a href="/bransoletki-celebrytki" id="headercategory605" class="spanhover">
<span>Bransoletki celebrytki</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_607">
<div class="menuh3">
<a href="/bransoletka-bangle" id="headercategory607" class="spanhover">
<span>Bransoletka bangle</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="parent" id="hcategory_435">
<div class="menuh3">
<a href="/bransoletki-na-noge" id="headercategory435" class="spanhover">
<span>Bransoletki na nogę</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
<div class="submenu level3">
<ul class="level3 sub-right">
<li class="" id="hcategory_566">
<div class="menuh3">
<a href="/zlota-bransoletka-na-noge-585" id="headercategory566" class="spanhover">
<span>Złota bransoletka na nogę 585</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_565">
<div class="menuh3">
<a href="/srebrna-bransoletka-na-noge" id="headercategory565" class="spanhover">
<span>Srebrna bransoletka na nogę 925</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_567">
<div class="menuh3">
<a href="/bransoletki-na-noge-blueberry" id="headercategory567" class="spanhover">
<span>Bransoletka na nogę blueberry</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
</ul>
</div> </li>
<li class="parent" id="hcategory_594">
<div class="menuh3">
<a href="/bransoletki-na-reke" id="headercategory594" class="spanhover">
<span>Bransoletki na rękę</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
<div class="submenu level3">
<ul class="level3 sub-right">
<li class="parent" id="hcategory_570">
<div class="menuh3">
<a href="/zlota-bransoletka-na-reke-585" id="headercategory570" class="spanhover">
<span>Złota bransoletka na rękę 585</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
<div class="submenu level4">
<ul class="level4 sub-right">
<li class="" id="hcategory_641">
<div class="menuh3">
<a href="/bransoletka-zlota-585-recznie-wykonana" id="headercategory641" class="spanhover">
<span>Bransoletka złota ręcznie wykonana</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_642">
<div class="menuh3">
<a href="/bransoletka-zlota-kolko" id="headercategory642" class="spanhover">
<span>Bransoletka złota kółko</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_635">
<div class="menuh3">
<a href="/bransoletka-zlota-serce" id="headercategory635" class="spanhover">
<span>Bransoletka złota serce</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_636">
<div class="menuh3">
<a href="/bransoletka-zlota-nieskonczonosc" id="headercategory636" class="spanhover">
<span>Bransoletka złota nieskończoność</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_638">
<div class="menuh3">
<a href="/bransoletka-zlota-koniczynka" id="headercategory638" class="spanhover">
<span>Bransoletka złota koniczynka</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_637">
<div class="menuh3">
<a href="/bransoletka-zlota-kluczyk" id="headercategory637" class="spanhover">
<span>Bransoletka złota kluczyk</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_639">
<div class="menuh3">
<a href="/bransoletka-zlota-motywy" id="headercategory639" class="spanhover">
<span>Bransoletka złota inne motywy</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
</ul>
</div> </li>
<li class="" id="hcategory_569">
<div class="menuh3">
<a href="/zlota-bransoletka-na-reke-333" id="headercategory569" class="spanhover">
<span>Złota bransoletka na rękę 333</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_571">
<div class="menuh3">
<a href="/srebrna-bransoletka-na-reke-925" id="headercategory571" class="spanhover">
<span>Srebrna bransoletka na rękę 925</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_572">
<div class="menuh3">
<a href="/bransoletki-na-reke-murano" id="headercategory572" class="spanhover">
<span>Bransoletka na rękę Murano</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_568">
<div class="menuh3">
<a href="/bransoletki-na-reke-blueberry" id="headercategory568" class="spanhover">
<span>Bransoletka na rękę blueberry</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
</ul>
</div> </li>
</ul>
</div> </li>
<li class="parent" id="hcategory_418">
<div class="menuh3">
<a href="/naszyjniki" id="headercategory418" class="spanhover">
<span>NASZYJNIKI</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
<div class="submenu level2">
<ul class="level2 sub-right">
<li class="parent" id="hcategory_626">
<div class="menuh3">
<a href="/naszyjniki-z-cyrkoniami" id="headercategory626" class="spanhover">
<span>Naszyjniki z cyrkoniami</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
<div class="submenu level3">
<ul class="level3 sub-right">
<li class="" id="hcategory_627">
<div class="menuh3">
<a href="/naszyjniki-zlote-z-cyrkoniami" id="headercategory627" class="spanhover">
<span>Naszyjniki złote z cyrkoniami</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_629">
<div class="menuh3">
<a href="/naszyjniki-srebrne-z-cyrkoniami" id="headercategory629" class="spanhover">
<span>Naszyjniki srebrne z cyrkoniami</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
</ul>
</div> </li>
<li class="" id="hcategory_584">
<div class="menuh3">
<a href="/zloty-naszyjnik-585" id="headercategory584" class="spanhover">
<span>Złoty naszyjnik 585</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_587">
<div class="menuh3">
<a href="/pl/c/Zloty-naszyjnik-333/587" id="headercategory587" class="spanhover">
<span>Złoty naszyjnik 333</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_585">
<div class="menuh3">
<a href="/srebrny-naszyjnik-925" id="headercategory585" class="spanhover">
<span>Srebrny naszyjnik 925</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_582">
<div class="menuh3">
<a href="/zloty-naszyjnik-z-diamentami" id="headercategory582" class="spanhover">
<span>Złoty naszyjnik z diamentami</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_586">
<div class="menuh3">
<a href="/naszyjniki-wisiorki-ze-szkla-murano" id="headercategory586" class="spanhover">
<span>Naszyjnik Murano</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_583">
<div class="menuh3">
<a href="/naszyjniki-blueberry-ze-stali-chirurgicznej" id="headercategory583" class="spanhover">
<span>Naszyjnik blueberry</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
</ul>
</div> </li>
<li class="parent" id="hcategory_421">
<div class="menuh3">
<a href="/kolczyki" id="headercategory421" class="spanhover">
<span>KOLCZYKI</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
<div class="submenu level2">
<ul class="level2 sub-right">
<li class="parent" id="hcategory_437">
<div class="menuh3">
<a href="/kolczyki-do-pepka" id="headercategory437" class="spanhover">
<span>Kolczyki do pępka</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
<div class="submenu level3">
<ul class="level3 sub-right">
<li class="" id="hcategory_564">
<div class="menuh3">
<a href="/kolczyk-do-pepka-stal-chirurgiczna" id="headercategory564" class="spanhover">
<span>Stal chirurgiczna kolczyk do pępka</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_562">
<div class="menuh3">
<a href="/zlote-kolczyki-do-pepka" id="headercategory562" class="spanhover">
<span>Złoty kolczyk do pępka 585</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
<li class="" id="hcategory_563">
<div class="menuh3">
<a href="/srebrny-kolczyk-do-pepka-925" id="headercategory563" class="spanhover">
<span>Srebrny kolczyk do pępka 925</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>
</li>
</ul>
</div> </li>
<li class="" id="hcategory_438">
<div class="menuh3">
<a href="/pl/c/Kolczyki-do-nosa/438" id="headercategory438" class="spanhover">
<span>Kolczyki do nosa</span>
<img src="/public/images/1px.gif" alt="" class="px1">
</a>
</div>