Question

Im having problems getting some text in a dropdown menu under each other. Any idea how to fix it?

Here is the HTML and C#

<ul class="dropdown">
  <li>
     <p class="MenuOverskrift">
        <a href="#">Produkter</a>
     </p>

     <ul>
        <asp:Label ID="lbl_Standard_Panel" runat="server" Text="" />
     </ul>
   </li>
</ul>

string standard_Menu = "";

        foreach (Products group in Products.GetEvereGroup(connection))
        {
            standard_Menu += "<li>" +
                "<p>" +
                group.GroupName +
                "</p>" +
                "<ul>";

            foreach (Products product in Products.GetProductsByGroup(group.GroupID, connection))
            {
                standard_Menu += "<li>" +
                    "<p>" +
                    "<a href=\"_" + product.Link + "\">" + product.ProductName + "</a>" +
                    "</p>" +
                    "</li>";
            }

            standard_Menu += "</ul>" +
                "</li>";

            lbl_Standard_Panel.Text = standard_Menu;
        }

And here is the CSS

#Menu_Standard
{
position: relative;
left: 550px;
width: 100px;
}
#Menu_Standard ul li ul li p
{
    color: #9c8b5c;
}
    #Menu_Standard ul ul ul
    {
        right: 100px;
    }
        #Menu_Standard ul li ul li a
        {
            color: #9c8b5c;
            text-decoration: none;
            font-size: medium;
        }
            #Menu_Standard a
            {
                color: #9c8b5c;
                text-decoration: none;
                font-size: x-large;
            }

ul.dropdown ul
{ 
visibility: hidden;
position:relative; 
z-index:1;
width: auto;
}

ul.dropdown li:hover > ul
{ 
visibility: visible;
background-color: #373741;
filter:alpha(opacity=60);
border-radius: 15px;
padding: 5px;
}

and here is a picture of the problem

Any help would be appreciated

fixed some of the problem by changing visibilty: hidden; to diplay: none;

but the problem still occour while hovering

Answer 1

when visibility: hidden property is set for an element that element behaves as its opacity is 0, use display: none instead.