title: Targeting a specific LI CSS
body: <p>I am new to css but learning. I am trying to figure out how to setup a specific class that I can target only certain <code>&lt;li&gt;</code> fields. Here is what I tried but it's not working could you please provide any suggestions to help me?</p>
  
  <p>I am trying to create a menu bar for my site and I have css that targets <code>&lt;li&gt;</code> from the parent menu. But I also want to be able to create a specific css for certain <code>&lt;li&gt;</code> to call for example like this:</p>
  
  <pre><code>&lt;li class="nodropdown"&gt;bla... bla...&lt;/&gt;
  </code></pre>
  
  <p>Here is what I tried to do but I don't know how to create the class properly. I know it's really bad but I am new and trying. Thanks!!</p>
  
  <pre><code>#menu li #nodropdown {
      float:left;
      display:block;
      text-align:center;
      position:relative;
      padding: 4px 5px 4px 5px;
      margin-right:30px;
      margin-top:7px;
      border:none;
  }
  
  #menu li:hover #nodropdown {
      border: 1px solid #777777;
  }
  
  #menu li a #nodropdown {
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px; 
      color: #EEEEEE;
      display:block;
      outline:0;
      text-decoration:none;
  }
  
  #menu li:hover a #nodropdown {
      color:#161616;
  }
  </code></pre>