html - 构建响应式导航菜单

Question

我正在尝试使用 Dreamweaver CS6 从现有菜单构建响应式导航菜单。这是我的 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>

导航在 CSS 中被设计为带有蓝色背景和两个下拉菜单的水平菜单。我想添加一些代码，以便在移动屏幕上使用按钮打开它。

这是我的 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;
}

任何人都可以帮助我，我已经转了好几天了。

谢谢。

Answer 1

你有没有考虑过bootstrap框架 ？其主要目的是开发响应式设计。

无需重新发明，您可以使用已经制定并经过良好测试的解决方案来节省时间。