Zurb Foundation のトップ ナビゲーション バーについて理解しようとしています。js インクルードを介してナビゲーション マークアップをインクルードしていたときに、初めて機能させるのに苦労しました。コードを各htmlページにコピーすると、突然機能しました。これは問題ありませんでしたが、ページがルビで動的に形成される新しいセクションをサイトに追加しました。
実際の問題は、画面が小さい場合、ページの右上にあるドロップダウン メニューが機能しなくなることです。
私のサイトのトップページでは、ナビゲーションは小さな画面で動作します: Mac Media Production のホームページ ですが、このページ: Mac Media Production Hosting のページでは、ナビゲーション バーが正しく動作しなくなり、私が認識する限り、マーク-up は同じです:
<!-- Header and Nav -->
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name">
<h1>
<a href="http://www.mac-media.co.uk">
mac media
</a>
</h1>
</li>
<li class="toggle-topbar"><a href="http://www.mac-media.co.uk/hosting"></a></li>
</ul>
<section>
<!-- Top Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="active" href="http://www.mac-media.co.uk/index.html">Menu</a>
<ul class="dropdown">
<li><label>Pages</label></li>
<li><a href="http://www.mac-media.co.uk/index.html">Home</a></li>
<li><a href="http://www.mac-media.co.uk/contact-us.html">Contact Us</a></li>
<li class="divider"></li>
<li><label>Our Services</label></li>
<li><a href="http://www.mac-media.co.uk/web-design.html">Web Design</a></li>
<li><a href="http://www.mac-media.co.uk/photo.html">Photo</a></li>
<li><a href="http://www.mac-media.co.uk/video-production.html">Video</a></li>
<li><a href="http://www.mac-media.co.uk/hosting.html">Hosting</a></li>
<li><a href="http://www.mac-media.co.uk/email.html">Emails</a></li>
<li><a href="http://www.mac-media.co.uk/domain-names.html">Domain Names</a></li>
<li class="divider"></li>
<li><label>Existing Clients</label></li>
<li><a href="http://www.mac-media.co.uk/hosting/front-page">Control Panel</a></li>
<li><a href="http://www.outitgoes.com/">Webmail Login</a></li>
</ul>
</li>
<li class="divider hide-for-small"></li>
</ul>
</section>
</nav>
誰か助けてください!?