Horizontal menu css with all time visible horizontal sub menu - html

I hope there is someone who can help me:
I would like a horizontal menu with horizontal sub-menues - to be visible all time and submenus to be displayed horizontal, instead of vertical dropdown.
I have created a dropdown vertical - I can not change the submenus to bilve shown constantly horizontal
See example fiddle

See this fiddle: http://jsfiddle.net/PhuBQ/7/
the submenu is always visible and it's displayed horizontally.

Related

Submenu get hidden after adding scrollbar to dropdwon

Full code available here https://www.codeply.com/p/eMoXymAE4E
There is a long menu dropdown and i want to add scroll bar which i added using
max-height:200px;
overflow-y: auto;
Which result in hiding sub menu item inside scrollbar
If i add
overflow-x:hidden;
Then horizontal scrollbar get hidden and i can't get view of submenu items.
Is there any way to solve this issue?

Bootstrap NavSide with Scroll and Dropdown

This is my first time on SlackOverflow, i hope that you can help me.
I'm trying to achieve something tricky regarding my skill on development and specifically on Bootstrap.
I've created a template with dual Navbar (top and left).
The left one is a fixed navside where there is 3 kind of experience : Expanded, Not Expanded, Not visible.
As you can see, my Expanded NavSide is working perfectly with Scrollbar and Dropdown inside the nav
Expanded SideBar with Dropdown
The not visible experience is also working perfectly.
Not Visible SideBar
When i'm working with my not expanded SideBar, everything is perfect if i don't have too many item menus. If i have too much items i can't scroll on the Sidebar because i've only activated my css for expanded js.
Not Expanded SideBar without Scroll
Where is the issue ? I want to keep the same experience for the not Expanded version with Dropdown displayed on the right of my navside. But if i put the overflow-y scroll on my navbar, the dropdown on the right side is not displayed anymore (but the scroll is working well).
Not Expanded Sidebar with scroll but no Dropdown
Any idea if what i'm trying to achieve is possible ?
I can share my code if needed :)
Many thanks !

How to free the dropdown menu?

It's simple but I can't find the solution.
https://prnt.sc/q6mfb6
https://codepen.io/lastofdead/pen/WNbvXRP
As it appears, the drop-down menu stuck in div. What should I do to get dropdown menu out?
You need to remove overflow-y: auto from .hastanotu as it's preventing your div from showing the content when its height increases, and hence showing the scroll bar. By removing it you let the div flow naturally.
solution: https://codepen.io/obedparla/pen/zYxEgGY

How to Remove Indicator under Horizontal Scroll Menu

I created horizontal scroll menu as shown in w3schools how to guide,
but my problem is,
it shows a line/indicator while scrolling,
i want to Remove that line.
https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp
How can i remove that Line/Indicator?

Maintain the same layout position with and without scrollbar at Bootstrap

I have a request from the customer that the menu items position must not change when the page get taller and the scrollbar appears.
If the scrollbar appears, the width of the page get smaller and this is why the centered menu position shifts to the left. How can I preoccupy the scrollbar width so the layout stays the same when it first appears?
To see a live example of this effect
please visit http://getbootstrap.com/,
increase the height of the window that much that the scrollbar disappears and
navigate to an other page using the menu (such as http://getbootstrap.com/customize/)
You will notice that the menu items are shifting a bit to the left. How I may hide this effect?