0
我正尝试使用Dreamweaver CS6从现有菜单构建响应式导航菜单。 还有就是我的HTML:构建响应式导航菜单
<div id="nav"><nav>
\t
<ul>
\t \t <li class="subNav"><a href="#">PROGRAM</a>
\t \t <ul>
\t \t <li><a href="pre-summit-seminars.html">PRE-SUMMIT <br>
\t \t SEMINARS</a></li>
\t \t <li><a href="summit-program.html">SUMMIT <br>
\t \t PROGRAM</a></li>
\t \t <li><a href="other-activities.html">OTHER <br>
\t \t ACTIVITIES</a></li>
\t \t </ul>
\t \t </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>
\t \t <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ÇAIS</a></li>
\t </ul>
<a href="#" id="pull">Menu</a>
</nav></div>
导航在CSS样式为具有蓝色背景水平的菜单,并有两个下拉菜单。我想添加一些代码让它在移动屏幕上用按钮打开。
还有就是我的CSS:
#nav {
\t
\t clear: both;
\t float: left;
\t margin-left: 0;
\t width: 100%;
\t display: block;
\t margin-top: 10px;
\t background-color: #051A37;
\t margin-bottom: 10px;
}
nav {
\t background-color: #051A37;
\t border-bottom: 4px solid #051A37;
\t height: auto; \t
}
nav ul {
\t list-style: none;
\t padding: 0;
\t margin: 0;
}
nav ul li {
\t float: left;
\t display: block;
\t 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 {
\t background-color: #051A37;
\t color: #66cc99;
}
nav ul li a:hover {
\t color: #66cc99;
\t text-decoration: none;
\t
}
nav li.subNav ul {
\t display:none;
}
nav li.subNav:hover ul {
\t display: block;
\t position:absolute;
\t
\t
\t
}
nav li.subNav ul li {
\t
\t background-color: #051A37;
\t text-align: left;
\t height: auto;
\t float: none;
\t }
\t
nav li.subNav ul li a {
\t color: #FFF
\t }
\t
nav li.subNav ul li a:hover {
\t color: #66cc99
\t }
.end {
\t float:right;
}
任何人都可以请帮我,我转圈数天。
谢谢。