title: CSS Tabs in emails
body: <p>I am trying to create an email template for my site, in the template i need CSS tabs that work even without JavaScript, </p>
  
  <p>I have css tabs like that:</p>
  
  <p>Styling:</p>
  
  <pre><code>#globalnav {
      position:relative;
      float:left;
      width:100%;
      padding:0 0 1.75em 1em;
      margin:0;
      list-style:none;
      line-height:1em;
  }
  
  #globalnav LI {
      float:left;
      margin:0;
      padding:0;
  }
  
  #globalnav A {
      display:block;
      color:#444;
      text-decoration:none;
      font-weight:bold;
      background:#ddd;
      margin:0;
      padding:0.25em 1em;
      border-left:1px solid #fff;
      border-top:1px solid #fff;
      border-right:1px solid #aaa;
  }
  
  #globalnav A:hover,
  #globalnav A:active,
  #globalnav A.here:link,
  #globalnav A.here:visited {
      background:#bbb;
  }
  
  #globalnav A.here:link,
  #globalnav A.here:visited {
      position:relative;
      z-index:102;
  }
  
  /*subnav*/
  
  #globalnav UL {
      position:absolute;
      left:0;
      top:1.5em;
      float:left;
      background:#bbb;
      width:100%;
      margin:0;
      padding:0.25em 0.25em 0.25em 1em;
      list-style:none;
      border-top:1px solid #fff;
  }
  
  #globalnav UL LI {
      float:left;
      display:block;
      margin-top:1px;
  }
  
  #globalnav UL A {
      background:#bbb;
      color:#fff;
      display:inline;
      margin:0;
      padding:0 1em;
      border:0
  }
  
  #globalnav UL A:hover,
  #globalnav UL A:active,
  #globalnav UL A.here:link,
  #globalnav UL A.here:visited {
      color:#444;
  }
  </code></pre>
  
  <p>Code in html:</p>
  
  <pre><code>  &lt;ul id="globalnav"&gt;
                                  &lt;li&gt;&lt;a href="#" class="here"&gt;INFOmail Hoy&lt;/a&gt;
  
  
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href="#"&gt;Vieron&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;OTFs&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Eventos&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;ECos&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Encuetams&lt;/a&gt;&lt;/li&gt;
  
                              &lt;/ul&gt;
  </code></pre>
  
  <p>But this doesn't really work out for me, because it does not change or do anything when you click or move on to it. </p>
  
  <p>I can't get it do work so that it will really be tabs, i.e. changing the content when clicked. I need it to work on email clients like gmail or outlook.</p>