Trying to add a clickable image to a menu structure

HTML-CSS
1

Hi All
Hoping someone can help me with this problem.
I have written a menu structure in VB for an ASPX page to show the user a nice menu down the left side.

See image 1

And the sub menu looks like this

See image 2

What I am trying to do is add a small image box before each sub item that the user can click on, this then sends back the menuID to code behind to add that particular menu item to their favorites (displayed above this menu), the code I have been messing about with as follows.

HTML

<asp:Menu ID=“Menu1” runat=“server”>


<asp:MenuItemStyle CssClass=“PTSmain_menu” />
<asp:MenuItemStyle CssClass=“PTSlevel_menu” HorizontalPadding=“20px” />


</asp:Menu>

Backend

menuItem = New MenuItem() With {
.Value = row(“MenuId”).ToString(),
.Text = row(“Title”).ToString(),
.NavigateUrl = row(“Url”).ToString(),
.Selected = row(“Url”).ToString().EndsWith(currentPage,StringComparison.CurrentCultureIgnoreCase)
}

Menu1.Items.Add(menuItem)

That all displays as above (there is a bit more but not relevant here)

So I need to display something like this.

See image 3

Note the blue box, this is the add to my favourites icon and if clicked calls back to save the menu item in their favourites, and the text after it is the menu url

Now in my menu structure I can add an image as follows

menuItem = New MenuItem() With {
.ImageUrl = “~/images/blue_square.gif”,
.Value = row(“MenuId”).ToString(),
.Text = " " & row(“Title”).ToString(),
.NavigateUrl = row(“Url”).ToString(),
.Selected = row(“Url”).ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
}
And the output

See image 4

But there is no way to make that image clickable as the whole line is the menu item url link.
So I tried to add it this way.

menuItem = New MenuItem() With {
.Value = row(“MenuId”).ToString(),
.Text = “” & " " & row(“Title”).ToString(),
.NavigateUrl = row(“Url”).ToString(),
.Selected = row(“Url”).ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
}

note there is something wrong as the page is not displaying the mod
.Text = “” & " " & row(“Title”).ToString(),

CSS for favorite image

a#ptsheader {
background-image: url(images/orange_square.gif);
background-repeat:no-repeat;
}

But the output is rubbish

See image 5

I just can’t seem to get this to work, the blank row is actually the item url link, then the favorites image and the rest of the row to the height of the image is the call back link and the text row is nothing.

Anybody got any ideas as to how to clean this up?
sorry as a new user could not post more than one image.

allimages
allimages2290×753 207 KB

I should also add the CSS for the menu

.PTSmain_menu, .PTSmain_menu:hover
{
font-family: Arial;
font-size: 10pt;
color: #444;
width: 200px;
/background-color: #FFDAB6;/
color: #333;
text-align: left;
height: 20px;
line-height: 30px;
margin-right: 5px;
margin-left: 5px;
}
.PTSmain_menu:hover
{
/background-color: #ccc;/
}
.PTSlevel_menu, .PTSlevel_menu:hover
{

   font-family: Arial;
   font-size: 11pt;
   /*color: #222;*/
   background-color: #ddd;
   color: #222;
   text-align: left;
   width: 240px;
   height: 15px;
   line-height: 20px;

/* margin-top: 3px;
margin-left: 5px;*/
}
.PTSlevel_menu:hover
{
background-color: #ccc;
}
.PTSselected, .PTSselected:hover
{
background-color: #A6A6A6 !important;
color: #fff;
}

2

The main issue lies in how the Menu control renders the HTML. By default, it makes the entire menu item’s area clickable, including the image specified in the ImageUrl property. This behavior prevents separating the image as a standalone clickable element.

To fix this, you need to avoid using the ImageUrl property and instead include the image in the Text property as raw HTML. However, improper HTML formatting or missing EnableHtmlEncode settings in the Menu control may also result in layout issues like blank rows or misaligned elements. Debug the generated HTML structure to identify these conflicts.