Reply to thread

Message: <blockquote data-quote="Al Baik" data-source="post: 29091241" data-attributes="member: 326965">you can use the CSS :hover pseudo-class selector along with nested CSS rules. This will allow you to apply different styles to the sub-menu items when the main menu is hovered.Assuming you have a typical HTML structure for a navigation menu with sub-menus, here's how you can achieve it:HTML:[ICODE]<nav>  <ul class="main-menu">    <li><a href="#">Home</a></li>    <li>      <a href="#">Products</a>      <ul class="sub-menu">        <li><a href="#">Product 1</a></li>        <li><a href="#">Product 2</a></li>        <li><a href="#">Product 3</a></li>      </ul>    </li>    <li><a href="#">About</a></li>    <li><a href="#">Contact</a></li>  </ul></nav>[/ICODE]CSS:[ICODE]/* Styles for the main menu items */.main-menu li a {  display: block;  color: #000; /* Change this to the desired color for the main menu items */  text-decoration: none;  padding: 10px;}/* Styles for the sub-menu items, initially hidden */.sub-menu {  display: none;}/* Show the sub-menu on hover */.main-menu li:hover .sub-menu {  display: block;}/* Styles for the sub-menu links */.sub-menu li a {  color: #ff0000; /* Change this to the desired color for the sub-menu items */}[/ICODE]In the CSS code above, we use the .main-menu li:hover .sub-menu selector to target the sub-menu when its parent (main menu item) is being hovered. This allows us to change the display property of the sub-menu and make it visible when the main menu item is hovered. The .sub-menu li a selector is then used to target the anchor tags within the sub-menu and change their color to the desired color.Replace the #000 and #ff0000 with your preferred colors for the main menu and sub-menu items, respectively. This way, when you hover over a main menu item, its corresponding sub-menu will appear with the specified color for the sub-menu items.</blockquote>

Verification: Haya warak paha keeyada? (haya wadi kireema paha)

Top Bottom