/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Author: Your Name
Version: 1.0
*/
/*
  Custom CSS for Child Theme - Dropdown Hover Effect
  ---------------------------------------------------
  Place this in your child theme's style.css file.
  You may need to adjust selectors based on your specific menu's HTML structure.
*/

/*
  This targets common navigation menu structures.
  When a dropdown menu item (link or list item) is hovered over:
  - The background color changes to #efefef (very light grey).
  - The text color changes to #333333 (dark grey) for good contrast.
*/

/* Style for hover directly on the link element within a dropdown */
.main-navigation ul ul li a:hover,
.primary-navigation ul ul li a:hover, /* Common class for primary navigation */
nav ul ul li a:hover, /* More generic nav menu */
header nav ul ul li a:hover, /* Nav inside a header */
.elementor-nav-menu--dropdown li a:hover, /* Elementor Nav Menu widget dropdown links */
.elementor-nav-menu .sub-menu li a:hover, /* Elementor Nav Menu widget dropdown links (alternative) */
.elementor-widget-nav-menu nav ul ul li a:hover /* Elementor Nav Menu widget (another common structure) */
 {
    background-color: #efefef !important; /* Your desired light grey background */
    color: #333333 !important;          /* Dark grey text color for contrast */
}

/*
  Alternatively, if the hover effect is better applied to the list item (<li>)
  and you want the link text (<a>) inside it to change color as well.
  This can be useful if the <li> has padding and the <a> does not fill it.
*/
.main-navigation ul ul li:hover > a,
.primary-navigation ul ul li:hover > a,
nav ul ul li:hover > a,
header nav ul ul li:hover > a,
.elementor-nav-menu--dropdown li:hover > a,
.elementor-nav-menu .sub-menu li:hover > a,
.elementor-widget-nav-menu nav ul ul li:hover > a {
    color: #333333 !important; /* Dark grey text color when parent li is hovered */
}

.main-navigation ul ul li:hover,
.primary-navigation ul ul li:hover,
nav ul ul li:hover,
header nav ul ul li:hover,
.elementor-nav-menu--dropdown li:hover,
.elementor-nav-menu .sub-menu li:hover,
.elementor-widget-nav-menu nav ul ul li:hover {
    background-color: #efefef !important; /* Your desired light grey background on li hover */
}

/*
  Important Note for <select> dropdowns (e.g., WooCommerce variations):
  Styling the hover state of native <option> elements within a <select> tag
  is very limited with CSS and usually controlled by the browser/OS.
  The CSS above is for navigation-style dropdown menus (<ul>, <li>, <a>).
  The default blue highlight in <select> dropdowns will likely remain.
*/