造型导航果园中的两种不同方式页面

Question

我有一个正在使用的果园网站。该站点在页面的页眉和页脚中使用相同的导航链接。诀窍是，链接需要以不同的风格。下面是我的代码过于简单求版本：该类名称中的第二个用途列出两次

<header> 
    <div class="zone zone-navigation"> 
    <article class="widget-navigation widget-menu-widget widget"> 
     <nav> 
     <ul class="menu menu-main-menu">   
      <li class="current first"><a href="/Site/">Home</a></li> 
      <li><a href="/Site/Blog">Blog</a> </li> 
      <li><a href="/Site/Contact">Contact</a></li> 
      <li class="last"><a href="/Site/About">About Us</a></li> 
     </ul> 
     </nav> 
    </article> 
    </div> 
</header> 

... 

<footer> 
    <div class="zone zone-navigation zone zone-navigation"> 
    <article class="widget-navigation widget-menu-widget widget widget-navigation widget-menu-widget widget"> 
     <nav> 
     <ul class="menu menu-main-menu menu menu-main-menu">   
      <li class="current first"><a href="/Site/">Home</a></li> 
      <li><a href="/Site/Blog">Blog</a> </li> 
      <li><a href="/Site/Contact">Contact</a></li> 
      <li class="last"><a href="/Site/About">About Us</a></li> 
     </ul> 
     </nav> 
    </article> 
    </div> 
</footer> 

这似乎很奇怪：

<header> 
    @Display(Model.Navigation) 
</header> 

... 

<footer> 
    @Display(Model.Navigation) 
</footer> 

当我运行的页面，会生成以下HTML Model.Navigation。无论如何，我现在有一个CSS文件下面的CSS类定义，我引用：

.menu-main-menu { list-style-type:none; display:inline; vertical-align:bottom; } 
.menu-main-menu ul { float:left; margin-left:-1em; } 
.menu-main-menu li { float:left; line-height:32px; border-left:1px solid green width:auto; font-size:10.5pt; font-weight:bold; font-family:Arial; } 
.menu-main-menu li:first-child { border: 0;} 
.menu-main-menu li a { display: block; padding: 0 1em; height:48px; } 
.menu-main-menu li.current a, .menu-main-menu li.current a:hover {background:#d8e0be} 
.menu-main-menu li a:hover {background:#e9e6d7; text-decoration:none} 

我的第一导航部分看起来正确。如何在页脚中设置导航项目的样式，使其看起来不同？谢谢

Answer 1

使用包含.menu-main-menu类的页眉和页脚标签。这将帮助您区分页面上的两个：

.menu-main-menu { ... } 
header .menu-main-menu { ... } 
footer .menu-main-menu { ... }