如何使用CSS设置子菜单的这一部分的样式?

时间:2019-07-02 07:29:52

标签: css wordpress styles submenu

我一直在使用自定义样式以及Chrome的开发工具,它一直在帮助我精确定位网站中特定元素的类,但是我似乎无法弄清楚该使用哪种类来移动标题向左转。 这是屏幕截图 https://imgur.com/0Wt3wPl HTML代码是:

<ul class="mega-sub-menu">
<li class="mega-menu-row" id="mega-menu-206-0">
    <ul class="mega-sub-menu">
<li class="mega-menu-column mega-menu-columns-1-of-2" id="mega-menu-206-0-0">
        <ul class="mega-sub-menu">
<li class="mega-menu-item mega-menu-item-type-widget widget_media_image mega-menu-item-media_image-19" id="mega-menu-item-media_image-19"><img width="219" height="219" src="http://localhost/wordpress/wp-content/uploads/2019/07/cebu.png" class="image wp-image-925 cebu attachment-full size-full" alt="" style="max-width: 100%; height: auto;" srcset="http://localhost/wordpress/wp-content/uploads/2019/07/cebu.png 219w, http://localhost/wordpress/wp-content/uploads/2019/07/cebu-150x150.png 150w" sizes="(max-width: 219px) 100vw, 219px">
</li>
<li class="mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-trip mega-menu-item-921" id="mega-menu-item-921"><a class="mega-menu-link" href="http://localhost/wordpress/trip/cebu-city-tour-package/">Cebu City Tour Package</a>
</li>       
</ul>
</li>
<li class="mega-menu-column mega-menu-columns-1-of-2" id="mega-menu-206-0-1">
        <ul class="mega-sub-menu">
<li class="mega-menu-item mega-menu-item-type-widget widget_media_image mega-menu-item-media_image-20" id="mega-menu-item-media_image-20"><img width="219" height="219" src="http://localhost/wordpress/wp-content/uploads/2019/07/davao.png" class="image wp-image-928 wp-image-65 attachment-full size-full" alt="" style="max-width: 100%; height: auto;" srcset="http://localhost/wordpress/wp-content/uploads/2019/07/davao.png 219w, http://localhost/wordpress/wp-content/uploads/2019/07/davao-150x150.png 150w" sizes="(max-width: 219px) 100vw, 219px"></li>
<li class="mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-trip mega-current-menu-item mega-menu-item-922" id="mega-menu-item-922"><a class="mega-menu-link" href="http://localhost/wordpress/trip/davao-fun-affordable-package/">Davao Fun-Affordable Package</a></li>

这段代码与标题有关

<li class="mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-trip mega-current-menu-item mega-menu-item-922" id="mega-menu-item-922"><a class="mega-menu-link" href="http://localhost/wordpress/trip/davao-fun-affordable-package/">Davao Fun-Affordable Package</a></li>      

我尝试使用

.mega-menu-link{} 
.mega-menu-item-922{}
#mega-menu-item-922{}
.li#mega-menu-item-922{}
#mega-menu-item-922 li{}

似乎没有任何作用。

我希望输出内容可以有效地对被包围的标题进行一些更改,尤其是将其向左移动。

0 个答案:

没有答案