My database dynamically populates an unordered list with content, utilizing the following code in the back end:
StringBuilder output = new StringBuilder();
int lastDepth = -1;
int numUL = 0;
foreach (DataRow row in dt.Rows)
{
int currentDepth = Convert.ToInt32(row["Depth"]);
if (lastDepth < currentDepth)
{
output.Append("<ul class=\"dropdown\">");
numUL++;
}
else if (lastDepth > currentDepth)
{
output.Append("</li></ul></li>");
numUL--;
}
else if (lastDepth > -1)
{
output.Append("</li>");
}
output.AppendFormat("<li><span class=\"text\"><a href=\"{1}\" title={1}>{0}</a></span>", row["ApplicationName"], row["Url"]);
lastDepth = currentDepth;
}
for (int i = 1; i <= numUL; i++)
{
output.Append("</li></ul>");
}
Literal1.Text = output.ToString();
The above code utilizes the "dropdown" class to style the ul and is functioning correctly.
This code produces an unordered list similar to this example:
<ul>Home
<li><a href="#">Country</a></li>
<li>State</li>
<li>City</li>
</ul>
More ul's are being generated from the database as well. The issue I am facing is that I want to set the width of all li elements under a ul to match the width of the longest content within that ul. For instance, if "Country" is the longest item under "Home", then all li elements under "Home" should have the same width.
The styling for the navigation bar is defined in an external CSS file:
(CSS stylying rules here...)
Thank you in advance for your assistance!