title: jquery css display block
body: <p>I am trying to have a simply inline menu that when a certain element is hovered a row below appears offering a submenu. Unfortunately I can not get the sub menu to show when hovered. I have display none in the CSS and display block in the query, wondering if the CSS is overriding it somehow?</p>
  
  <p>CSS</p>
  
  <pre><code>ul.main_menu  {
      list-style-type: none;
      text-align: center;
  }
  ul.main_menu li  {
      margin-left: 20px;
      display: inline;
  }
  ul.main_menu li a  {
      text-decoration: none;
      color: white;
  }
  .submenu  {
      height: 20px;
      width: 100%;
  }
  #services_menu  {
      display: none;
      margin-top: 10px;
  }
  #services_menu ul {
      list-style-type: none;
      text-align: center;
  }
  #services_menu ul li  {
      margin-left: 20px;
      display: inline;
  }
  #service_menu ul li a  {
      text-decoration: none;
      color: white;
  }
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$("#servicebutton").hover(
    function () {
      $('#services_menu').css("display","block");
    }, 
    function () {
      $('#services_menu').css("display","none");
    });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="main_menu"&gt;
    &lt;li id="homebutton"&gt; &lt;a href="#"&gt;Home &lt;/a&gt;&lt;/li&gt;
    &lt;li id="servicebutton"&gt; &lt;a href="#" &gt;Services &lt;/a&gt;&lt;/li&gt;
    &lt;li id="packagebutton"&gt; &lt;a href="#" &gt;Packages &lt;/a&gt;&lt;/li&gt;
    &lt;li id="spabutton"&gt; &lt;a href="#"&gt;The spa &lt;/a&gt;&lt;/li&gt;
    &lt;li id="productbutton"&gt; &lt;a href="#"&gt;Product &lt;/a&gt;&lt;/li&gt;
    &lt;li id="mebutton"&gt; &lt;a href="#"&gt;About Me &lt;/a&gt;&lt;/li&gt;
    &lt;li id="contactbutton"&gt; &lt;a href="#"&gt;Contact &lt;/a&gt;&lt;/li&gt;
                &lt;div class="submenu"&gt;
                &lt;div id="services_menu"&gt;
                &lt;ul&gt;
                  &lt;li&gt;Services1&lt;/li&gt;
                  &lt;li&gt;Services2&lt;/li&gt;
                  &lt;li&gt;Services3&lt;/li&gt;
                  &lt;li&gt;Services4&lt;/li&gt;
                  &lt;li&gt;Services5&lt;/li&gt;
                &lt;/ul&gt;
                &lt;/div&gt;
                &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>