建立响应式导航菜单

Question

I am trying to build a responsive navigation menu from an existing one, using Dreamweaver CS6. There is my HTML:

 <div id="nav"><nav> <ul> <li class="subNav"><a href="#">PROGRAM</a> <ul> <li><a href="pre-summit-seminars.html">PRE-SUMMIT <br> SEMINARS</a></li> <li><a href="summit-program.html">SUMMIT <br> PROGRAM</a></li> <li><a href="other-activities.html">OTHER <br> ACTIVITIES</a></li> </ul> </li> <li><a href="registration.html">REGISTRATION</a></li> <li class="subNav"><a href="#">VENUE</a> <ul> <li><a href="venue-accommodations.html">VENUE AND<br> ACCOMMODATIONS</a></li> <li><a href="getting-there.html">GETTING THERE</a></li> <li><a href="travelling-canada.html">TRAVELLING<br> TO CANADA</a></li> </ul> </li> <li><a href="documentation.html">DOCUMENTATION</a></li> <li><a href="previous-summits.html">PREVIOUS SUMMITS</a></li> <li><a href="partners.html">PARTNERS</a></li> <li><a href="sponsors.html">SPONSORS</a></li> <li><a href="media.html">MEDIA</a></li> <li class="end"><a href="http://...html" target="_self">FRAN&Ccedil;AIS</a></li> </ul> <a href="#" id="pull">Menu</a> </nav></div> 

The navigation is styled in CSS as a horizontal menu with a blue background and with two drop downs. I would like to add some code for it to open with a button in mobile screens.

There is my CSS:

 #nav { clear: both; float: left; margin-left: 0; width: 100%; display: block; margin-top: 10px; background-color: #051A37; margin-bottom: 10px; } nav { background-color: #051A37; border-bottom: 4px solid #051A37; height: auto; } nav ul { list-style: none; padding: 0; margin: 0; } nav ul li { float: left; display: block; padding: 0; } nav ul li a { color: #ffffff; display: block; font-family: 'Pontano Sans',Arial,sans-serif; font-size: 12px; letter-spacing: 0; margin: 0; padding: 15px 15px; text-decoration: none; text-transform: uppercase; } nav ul li.selected a, nav ul li.selected a:hover { background-color: #051A37; color: #66cc99; } nav ul li a:hover { color: #66cc99; text-decoration: none; } nav li.subNav ul { display:none; } nav li.subNav:hover ul { display: block; position:absolute; } nav li.subNav ul li { background-color: #051A37; text-align: left; height: auto; float: none; } nav li.subNav ul li a { color: #FFF } nav li.subNav ul li a:hover { color: #66cc99 } .end { float:right; } 

Can anyone please help me, I am turning in circles for days.

Thank you.

Answer 1

Have you considered bootstrap framework ? its main purpose is to develop responsive designs.

Instead of reinventing , you can save time by using already made and well tested solutions.