我有一个包含多个导航的页面（这个被称为ModX的cms处理，但对于任何导航都应该是相同的）。标题导航只是为了在大多数网站上浏览网站。现在我的客户想要一个下拉多个元素（从主菜单中分离）。现在是我的问题，我可以根据具体情况设计这些导航的样式吗？那孩子呢？
如果我想要将第二个
.nav_name_1 li ul li{ some awesome styling }
.nav_name_2 li ul li{ more awesome styles }
我会添加ModX标记，因为可能有一个片段可以解决这个问题。
修改
<section id="main" role="main">
<div id="slider">
<div class="row">
<div class="large-12 columns nopad">
<div class="slidercontainer">
<ul class="cycle-slideshow" data-cycle-auto-height="calc" data-cycle-slides="> li" data-cycle-fx="scrollHorz" data-cycle-next=".slidercontainer .next" data-cycle-prev=".slidercontainer .prev" data-cycle-swipe="true" data-cycle-log="false" style="position: relative;"><li class="cycle-sentinel cycle-slide" style="position: static; top: 0px; left: 0px; z-index: 99; opacity: 1; visibility: hidden; display: block;">
<img src="/i/slide/Slidewb.jpg" alt="Weidse Blik" style="visibility: hidden;">
<div class="text hide-for-small" style="visibility: hidden;">
<h2 style="visibility: hidden;"></h2>
<p style="visibility: hidden;"></p>
</div>
</li>
<li class="cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1;">
<img src="/i/slide/Slidewb.jpg" alt="Weidse Blik">
<div class="text hide-for-small">
<h2></h2>
<p></p>
</div>
</li></ul>
<div class="controls hide-for-touch">
<a href="#" class="prev control" title="vorige slide"></a>
<a href="#" class="next control" title="volgende slide"></a>
</div>
</div>
<div class="text show-for-small">
<h2>Weidse Blik </h2>
<p>Uw partner in agrarisch ondernemen!</p>
<a href="diensten" class="cta" title="Bekijk onze diensten">Bekijk onze diensten</a>
</div>
</div>
</div>
</div>
<div class="tagline hide-for-small">
<div class="row">
<div class="large-12 columns hide-for-small">
Uw partner in agrarisch ondernemen!
</div>
</div>
</div>
<div id="services">
<div class="row">
<div class="small-12 large-12 columns">
<ul class="small-block-grid-1 large-block-grid-4">
<li>
<div class="icon">
<a href="producten/producten" title="Kunsmest">
<img src="/i/overview/Fotolia_45201390_XS.jpg" alt="Kunstmest">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/producten" title="Kunsmest">
Kunsmest
</a>
</li>
</ul>
</nav>
</h2>
<p>
</p>
<a href="producten/producten" class="more" title="Kunsmest">Meer over Kunsmest</a>
</div>
</li>
<li>
<div class="icon">
<a href="producten/zaden" title="Zaden">
<img src="/i/overview/zadenwb.png" alt="Zaden">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/zaden" title="Zaden">
Zaden
</a>
</li>
</ul>
</nav>
</h2>
<p>
</p>
<a href="producten/zaden" class="more" title="Zaden">Meer over Zaden</a>
</div>
</li>
<li>
<div class="icon">
<a href="producten/handelsartikelen" title="Handelsartikelen">
<img src="/i/overview/artikelenwb.png" alt="Handelsart">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/handelsartikelen" title="Handelsartikelen">
Handelsartikelen
</a>
</li>
</ul>
</nav>
</h2>
<p>
</p>
<a href="producten/handelsartikelen" class="more" title="Handelsartikelen">Meer over Handelsartikelen</a>
</div>
</li>
<li>
<div class="icon">
<a href="producten/veevoer/" title="Veevoer">
<img src="/i/overview/veevoerwb.png" alt="Veevoer">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/veevoer/" title="Veevoer">
Veevoer
</a>
</li>
</ul>
</nav>
</h2>
<p>
</p>
<a href="producten/veevoer/" class="more" title="Veevoer">Meer over Veevoer</a>
</div>
</li>
<li>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="diensten" title="Diensten">
Diensten
</a>
</li>
</ul>
</nav>
</h2>
<p>
</p>
<a href="diensten" class="more" title="Diensten">Meer over Diensten</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="twitter">
<div class="row">
<div class="small-12 large-12 columns nopad">
<ul class="cycle-slideshow" data-cycle-auto-height="calc" data-cycle-slides="> li" data-cycle-fx="scrollHorz" data-cycle-swipe="true" data-cycle-log="false">
<strong>TwitterX Error:</strong> Could not load TwitterX as required values were not passed.
</ul>
</div>
</div>
</div>
<div id="information">
<div class="row">
<div class="small-6 large-6 columns nopad info">
<div class="picture">
<a href="" title="">
<img src="/i/info/WBinfo.png" alt="">
</a>
</div>
<div class="text">
<h3><a href="" title="">Informatie</a></h3>
<div class="content hide-for-small">
<p><span> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat mass</span></span></p>
</div>
</div>
</div>
<div class="small-6 large-6 columns nopad info">
<div class="picture">
<a href="" title="">
<img src="/i/info/WBinfo.png" alt="">
</a>
</div>
<div class="text">
<h3><a href="" title="">Informatie</a></h3>
<div class="content hide-for-small">
<p><span> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat mass</span></span></p>
</div>
</div>
</div>
</div>
</div>
<div class="references">
<div class="row">
<div class="large-12 small-12 columns nopad">
<ul class="cycle-slideshow" data-cycle-auto-height="calc" data-cycle-slides="> li" data-cycle-fx="scrollHorz" data-cycle-next=".references .next" data-cycle-prev=".references .prev" data-cycle-swipe="true">
</ul>
</div>
</div>
</div>
</section>