Databases
StackOverflow2013
Postsdbo
POHover not working in the chrome, but working with IE, safari, firefox
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHover not working in the chrome, but working with IE, safari, firefox
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload