title: Change navigation font color based on background
body: <p>My problem is this. I have a fixed left navigation bar and I have to change the list font color based on the background of the section under it. The code is like this <a href="http://jsfiddle.net/76kMN/2/" rel="nofollow">fiddle</a>. So if the section is black and is below a link, the text is not seen. I have to change each list based on the background of a section under it so that it can be readable.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;div id="left_side"&gt;
          &lt;div id="static_menu" class=""&gt;                 
              &lt;div id="main_navigation" class=""&gt;
                  &lt;ul class="menu mainLeft" id="mymenu"&gt;
                      &lt;li&gt;&lt;a href="#section1"&gt;Nav list 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#section2"&gt;Nav list 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#section3"&gt;Nav list 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#section4"&gt;Nav list 4&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#section5"&gt;Nav list 5&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="wrapper"&gt;
          &lt;div class="section" id="section1"&gt;section1&lt;/div&gt;
          &lt;div class="section" id="section2"&gt;section2&lt;/div&gt;
          &lt;div class="section" id="section3"&gt;section3&lt;/div&gt;
          &lt;div class="section" id="section4"&gt;section4&lt;/div&gt;
          &lt;div class="section" id="section5"&gt;section5&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.content{
      position:relative;
  }
  
  #left_side
  {
      position:fixed;
      left: 20px;
      right: 20px;
      z-index:999;
  }
  .mainLeft
  {
      list-style-type:none;
      margin-left:0px;
      padding-left:0px;
  }
  .mainLeft li
  {
      padding:5px 0;
  }
  .mainLeft li a
  {
      color:#000;
      margin-bottom:5px;
  }
  
  #wrapper
  {
      position:relative;
  }
  
  .section
  {
      width: 100%;
      text-align:center;
      padding:150px 0;
      border:1px solid #666;
  }
  
  #section1
  {
      background: #fff;
  }
  
  #section2
  {
      background: #000;
      color:#fff;
  }
  
  #section3
  {
      background: #fff;
  }
  
  #section4
  {
      background: #000;
      color:#fff;
  }
  
  #section5
  {
      background: #fff;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/76kMN/2/" rel="nofollow">Fiddel</a></p>