Menu bar alignment problem
<p>this is my simple html , css code to create a menu</p>

<pre><code>&lt;style type="text/css"&gt;
    li.Bg:hover ul
    {
        background-color: Lime;
    }
    li.Bg ul
    {
        display: none;
    }
    .Bg
    {
        width:auto;
        display: inline;
        background-color: Green;
    }
&lt;/style&gt;


&lt;ul&gt;
    &lt;li class="Bg"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;New&lt;/li&gt;
            &lt;li&gt;Open&lt;/li&gt;
            &lt;li&gt;Save&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="Bg"&gt;&lt;a href="#"&gt;File&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;New&lt;/li&gt;
            &lt;li&gt;Open&lt;/li&gt;
            &lt;li&gt;Save&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="Bg"&gt;&lt;a href="#"&gt;Edit&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;Cut&lt;/li&gt;
            &lt;li&gt;Copy&lt;/li&gt;
            &lt;li&gt;Paste&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>but when i move mouse over "File" It shows sub menus but "Edit" option goes down &amp; there is also an alignment problem. I am new to css Any help will be greatly appreciated </p>

<p>thanks, </p>
