title: Trying to select nav ul li ul li in javascript
body: <p>I have tried many options, but this what I have so far and it doesnt work. </p>
  
  <pre><code>document.querySelectorAll('ul li').querySelectorAll('ul li').style.background = color;
  
  document.getElementsByTagName("NAV").getElementsByTagName("UL").getElementsByTagName("LI").getElementsByTagName("UL").getElementsByTagName("LI").style.background = color;
  </code></pre>
  
  <p>my html</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul id = "mainNav"&gt;
          &lt;li&gt;&lt;center&gt;
              &lt;img id = "logo" src = "https://31.media.tumblr.com/cfc2c43f7e34ec3fcb60405fa5d4f5a5/tumblr_n9nvpjtNNW1tgkx81o1_1280.png"&gt;&lt;/center&gt;
          &lt;/li&gt;
          &lt;li id = "search"&gt;
  
              &lt;form name = "searchField"&gt;
                  &lt;img src = "http://31.media.tumblr.com/7732f8901e9c94cb94aa5cff9e11b2ae/tumblr_n8zm5cD1SL1tgkx81o1_1280.png"&gt;&lt;input name = "search" type = "text" placeHolder = "" id = "search"&gt;
              &lt;/form&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href ="#"&gt;
              &lt;img src = "https://38.media.tumblr.com/f319cbdb3a9bd4041fd2c6056827794b/tumblr_n9lpsfYFOB1tgkx81o3_1280.png" alt = "img/home.png"&gt;HOME&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href ="#"&gt;
              &lt;img src = "https://31.media.tumblr.com/1dc400960f59fca2f738ceab516d24f4/tumblr_n9lpsfYFOB1tgkx81o4_1280.png" alt = "img/info.png"&gt;ABOUT&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id = "section"&gt;&lt;a href ="#"&gt;
              &lt;img src = "https://38.media.tumblr.com/11cb610a9c031eaf5bb8789cb9739717/tumblr_n9lpsfYFOB1tgkx81o1_1280.png"alt = "img/camera.png"&gt;PHOTOGRAPHY&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href = "/photography"&gt;San Francisco&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href = "#"&gt;Lake Tahoe&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li id = "section"&gt;&lt;a href ="#"&gt;
              &lt;img src = "https://31.media.tumblr.com/bd112082d5c902750e78aa9d7dd817fc/tumblr_n9lpsfYFOB1tgkx81o5_1280.png"alt = "img/projects.png"&gt;PROJECTS&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href = "/projects#informative"&gt;Informative&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href = "/projects#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li id = "section"&gt;&lt;a href ="#"&gt;
              &lt;img src = "https://33.media.tumblr.com/e9a7f9ae946bdf2950be96f27023bb78/tumblr_n9lpsfYFOB1tgkx81o2_1280.png"alt = "img/contact.png"&gt;CONTACT&lt;/a&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href = "http://www.twitter.com/skarchmit" target =" _blank"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href = "http://www.instagram.com/skarchmit" target =" _blank"&gt;Instagram&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="mailto:skarchit@gmail.com" target="_top"&gt;Email&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
              &lt;nav&gt;
                  &lt;ul id = "viewNav"&gt;
                      &lt;a href = "#"&gt;&lt;li&gt; Some things here&lt;/li&gt;&lt;/a&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  </code></pre>
  
  <p>Does anyone have an idea how to select nav ul li ul li with javascript?</p>
  
  <p>P.S. I havent learned jquery. So I want to do it with pure javascript.</p>