Help! How to develop this UI

After working on a whole day I couldn't develop this. It's very complex. This is a React project. Developing these two navigation bars quite difficult. I couldn't imagine how should I develop html structure and how can I achieve this with css. Can anyone give me a guide or a hint, I really appreciate it. πŸ€— Live link : https://www.shangri-la.com/en/colombo/shangrila/
Luxury Hotel in Colombo | Shangri-La Colombo
Our well-situated luxury Shangri-La Colombo offers exquisite rooms, suites and extensive dining choices with heartfelt and thoughtful service.
No description
6 Replies
vince
vinceβ€’13mo ago
Build the dropdown container separately and then display it on hover
danushka
danushkaβ€’13mo ago
@vince Same thing I have done.. two problems araised. 1. When cursor left the nav item to click the item from dropdown, dropdown container disappeared, becz navitem left the hover effect. 2. When dropdown pops up, slider from the behind get down. Try to achieve with z-index but does not work. πŸ₯Ί
vince
vinceβ€’13mo ago
What do you mean by number 2? For number 1 you just gotta select it in your css. Here's a codepen I made a while back: https://codepen.io/vince1444/pen/vYvBGLx
danushka
danushkaβ€’13mo ago
Thank you for the example.. πŸ€— What I meant by number 2 is when dropdown menu pops up, it should be in the top from the z stack, the slider should be behind it. Now what happens is when the dropdown pops up it rendered in between the navbar and the slider. πŸ₯² (z-index) did not work..
vince
vinceβ€’13mo ago
oh huh.. I'd have to see your code, can you put it in a codepen?
danushka
danushkaβ€’13mo ago
I saw the msg now... it"s okay... I figured it out... I didn't even no what the concept is.. My method was completely wrong. I learnt how to develop a Mega Menu.. ☺️ @vince Thank you so much for helping me out... πŸ€—
Want results from more Discord servers?
Add your server