2014-12-04 102 views
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&Ccedil;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; 
 
}

任何人都可以请帮我,我转圈数天。

谢谢。

回答

1

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

而是重塑的,你可以通过使用已经作出和良好测试的解决方案节省时间。