在我的WordPress网站上，我使用了wp_nav_menu来创建导航栏。因此我对HTML的控制有限，对于其中一个导航链接，我已经开始将其设置为下拉列表。但是，导航栏其余部分的CSS干扰了这一点，我如何修改HTML以便将两者分开？
HTML -
<nav class="site-nav">
<div class="menu-primary-menu-links-container"><ul id="menu-primary-menu-links" class="menu"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://localhost/testsite/contact/">Contact</a></li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://localhost/testsite/tuition/">Tuition</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-28 current_page_item current_page_parent menu-item-38"><a href="http://localhost/testsite/blog/">Blog</a></li>
<li id="menu-item-107" class="test menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-107"><a href="http://localhost/testsite/shop/">Gallery</a>
<ul class="sub-menu">
<li id="menu-item-119" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-119"><a href="http://localhost/testsite/product-category/animals/">Animals</a></li>
<li id="menu-item-120" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-120"><a href="http://localhost/testsite/product-category/contemporary-space-images/">Contemporary Space Images</a></li>
</ul>
</li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-42"><a href="http://localhost/testsite/">Home</a></li>
</ul>