Imagine you have the following code snippet :
<ul>
<li>Menu1
<ul class="submenu">
<li class="firstmenu">submenu-1</li>
<li>submenu-2</li>
<li>submenu-3</li>
</ul>
</li>
<li>Menu2
<ul class="submenu">
<li class="firstmenu" id="first">submenu-1</li>
<li>submenu-2</li>
<li>submenu-3</li>
</ul>
</li>
</ul>
In this particular case, padding-left has been applied to the first item of sub-menu's li with the following CSS:
.submenu li:first-child{padding-left: 173px;}
However, I require a different padding for the first li of 'Menu2'. To achieve this, its ID is utilized in the following manner:
#first{padding-left:500px !important;}
To ensure responsiveness, the following media query is employed:
@media only screen
and (min-width : 768px)
and (max-width : 894px) {
#first{padding-left:150px !important;}
}
Nevertheless, due to the prior application of !important on the global styling, the specified responsive padding is not being considered. Consequently, a solution is sought to apply distinct padding for screen resolutions between 768 to 894.
Is there a method to accomplish this task effectively?