Cypress triggers hover hover to reveal element, but still says element has display: none?

I’m create tests in Cypress to test my main menu. I have a step to check if a drop-down menu appears.

The drop-down menu is triggered with CSS and so I am using Cypress Real Events plugin. My code is:

When('I hover over the About menu item a drop down should appear', () => {
    cy.get('.main-menu_primary-item').contains('About').realHover();
    cy.get('.drop-down--about').should('be.visible');
});

When I run the test I can see the .drop-down--about menu appear, but I still get an error:

This element '<div.drop-down--about>' is not visible because it has CSS property:'display: none'

Would anyone know how I can ammend this?