C#/Monogame: Menu Items Change color on Mouse Hover Issue

Question

I have a menu for my game that looks like this:

The Code for it:

for (int i = 0; i < menuItems.Length; i++)
            {
                //create collision detectiong rectangle x and y pos same as text below, length and width based on font.
                collisionRectangle = new Rectangle(100, 300+(space*i), menuItems[i].Length*10, 24);


                //determine if menu posisiton is on the current for loop draw position or if the mouse is hovering the current item. If it is, color the text red
                if (mpos == i || collisionRectangle.Contains(mousePoint))
                {
                    spritebatch.DrawString(basic, menuItems[i].ToString(), new Vector2(100, 300 + (space * i)), Color.Red);
                }
                //Otherwise the text is not selected and is black
                else
                    spritebatch.DrawString(basic, menuItems[i].ToString(), new Vector2(100, 300 + (space * i)), Color.Black);
            }
        }
        else
        {
            //Output the result based on user choice
            spritebatch.DrawString(basic, result.ToString(), new Vector2(100, 300), Color.Black);
        }

Currently, when I mouse over a menu item the one above it gets highlighted in red. Eg:

https://gyazo.com/472352a190398785f81854387902bf7d

The Beige Background on each menu item is the collision hit box.

Any Idea why this is happening?

Thanks

Answer 1

I've solved my issue: Turns out the debug boxes were misaligned somehow. setting the collisionRectangle y value to (300-space) solved my issue.