Currently, I am facing a requirement to create a menu that should resemble the image provided below.
In the past, I have experience working on simple drop-down menus, but this time the specifications are a bit unique. The top menu links should change color to blue when hovered over or when on the corresponding page.
The submenus should slide in with a different color and a transparent background image. Additionally, the submenus should feature an arrow pointing towards the parent menu, as depicted in the image.
Despite my efforts to find a similar menu example to replicate, I have not been successful.
I would greatly appreciate any guidance or assistance in achieving this specific design.
I have created an example on jsFiddle, but I need to incorporate the additional features mentioned above.
In the meantime, I will continue exploring potential solutions. While I am not a CSS expert, I am proficient in handling development and design tasks. This menu is required for an ASP.NET webform-based website.
Sample Code
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
</body>
UPDATE:
I have made some progress. Please review the link http://jsfiddle.net/4wrDx/10/