I'm experiencing difficulties with aligning text in a dropdown menu vertically. Any suggestions on how to resolve this issue?
Below is the HTML and C# code:
<ul class="dropdown">
<li>
<p class="MenuHeading">
<a href="#">Products</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 styling:
#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;
}
An image illustrating the issue has been included below.
Any assistance would be greatly appreciated
Some progress has been made by changing visibility: hidden; to display: none;, but the problem persists when hovering over the menu items.