title: Hover not working in the chrome, but working with IE, safari, firefox
body: <p>I am new to CSS I was trying to learn how to create a menu using CSS. I created it but found a issue. It is working fine in other browsers but not in chrome. I did not get what is the issue.</p>
  
  <p>Following is the style sheet used in this menu.
      </p>
  
  <pre><code>#main
  {width: 150px;}
  
  #main ul,
  #main li,
  #main a,
  {
  
    padding: 0px;
   border: 0px;
  margin: 0px;
  
  }
  
  #main ul,#main li
  {
   list-style-type: none;
  }
  
  ul#main li &gt; a
  {
  display: block;
      position: relative;
      width: 100px;
      padding-left:10px;
      text-align: left;
  align: center;
      height: 32px;
  
      color: #FFFFFF;
      font: bold 12px/32px Arial, sans-serif;
      text-decoration: none;
  }
  
  ul#main &gt; li
  {
    padding:0px 0px 5px 5px;
    background-color: #E44d2e;
   align:center;
  border-bottom: solid 1px;
  
  }
  
  
  
   ul#submenu
  {
  position: relative;
  z-index: 10;
  float: right;
  border-bottom: solid 1px;
   border: 0px;
  height: 0px;
  overflow: hidden;
  display:none;
  
  }
  
  ul#main li:hover
  {
  height: 40px;
  padding: 0px 0px 0px 0px;
  width: 150px;
  display:block;
    background-color:#ec633f;
  
  border-bottom: solid 1px;
  text-align:center;
  
  
  
  }
  
  ul#main li:hover &gt; ul#submenu
  {
  position: relative;
  z-index: 10;
  float: none;
  top: -32px;
  left: 150px;
  margin: 0px;
  height: auto;
   padding: 0px 0px 0px 0px;
  display:block;
    background-color: #f9e5cc;
  color: black;
  
  
  
  }
  
  ul#submenu li:hover
  {
  
  z-index: 10;
    float: none;
   margin: 0px;
   height: auto;
   padding: 0px 0px 0px 0px;
  display:block;
   background-color: #f3d8bd;
  
  }
  
  
  ul#submenu li &gt; a
  { 
  color: black;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Following is the code used too create the html menu</p>
  
  <pre><code>&lt;ul id="main"&gt;
  &lt;li &gt; &lt;a href="#"&gt;Google&lt;/a&gt;&lt;ul id="submenu"&gt;&lt;li&gt;&lt;a href="#"&gt;Test 1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Test 1&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  &lt;li id="submenu"&gt;&lt;a href="#"&gt; Microsoft&lt;/a&gt;&lt;ul id="submenu"&gt;&lt;li &gt;&lt;a href="#" &gt;Test 1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Test 1&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  &lt;li &gt; &lt;a href="#"&gt;Apple&lt;/a&gt;&lt;ul id="submenu"&gt;&lt;li&gt;&lt;a href="#"&gt;Test 1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Test 1&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  &lt;li &gt; &lt;a href="#"&gt;IBM&lt;/a&gt;&lt;ul id="submenu"&gt;&lt;li&gt;&lt;a href="#"&gt;Test 1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Test 1&lt;/a&gt;&lt;/li&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The above code's working example is present on : [Working code]<a href="http://techisquest.blogspot.in/2013/04/simple-css-menu.html" rel="nofollow">http://techisquest.blogspot.in/2013/04/simple-css-menu.html</a></p>