How to make this navigation menu

Hello, a customer asked me to do a site with a navigation menu very similar to this one:

www.malher.com

Could some expert please tell me where to get a code to do a similar menu?

Thank you!
svensanchezAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul SauvéRetiredCommented:
Why Hover Menus Do Users More Harm Than Good
... Even if users are looking for a menu to open, opening it on hover doesn’t make it that much faster if the menu is hard to use. Hover menus are notoriously hard to use for many reasons. Clicking an item in a hover menu isn’t always as easy as it looks.
That being said, you can use CSS to create 'Hover menus'. The site csswizardry.com has a detailed explanation here: Creating a pure CSS dropdown menu
I was looking at the main menu of the site when inspiration struck. Something as common and simple as a series of dropdown menus under each meta menu item would improve the navigability and usability of the site massively. Also, they are incredibly simple to create, and here's where I teach you how…
0
svensanchezAuthor Commented:
Thank you for the link, it's an interesting tutorial for beginners like me, however it doesn't explain how to:

1) Change the menu items into images
2) Create that white row when there are sub items
3) Show the sub items in a horizontal way

How can I change the code in order to achieve that?
0
Paul SauvéRetiredCommented:
>> 1) Change the menu items into images
For each line
<a href="#">Home</a> (or other menu items)

Change to
<a href="#"><img src="your image.png" alt=""/>Home</a>

>>2) Create that white row when there are sub items
Instead if using text in the line
<a href="#"><img src="your image.png" alt=""/>Home</a>
Create images with the menu item texts and background color you desire... and remove the menu item texts.

>>3) Show the sub items in a horizontal way
I could only find a JavaScript solution to this, but I cannot recommend it since too many browsers have JavaScript turned off!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.