This is an example of a scrollable timeline with time, designed using CSS, HTML, and Bootstrap framework 4. The form is given a background color as #eee. The timeline card is given the styles of position as relative, display as flex, flex-direction as column, background-color as #fff, border as 1px solid rgba(26, 54, 126, 0.125), and border-radius as .25rem.The timeline is given a height of 100%, a width of 4px, and a background color as #e9ecef. The timeline title has the styles of font-size as .8rem, text-transform as uppercase to convert the first letter of each word to uppercase, margin as 0 0 .5rem, and font-weight as bold. The content section of the timeline is given a font-size as .7619rem, and font color as #adb5bd. A scrollbar is given to scroll through the timeline. The dates are indicated with a set of primary, success, warning, and danger badges, which are defined in the HTML. Source: https://bbbootstrap.com/snippets/scrollable-user-timeline-time-12654784

This is a classic example of the navigation bar, with scrollbar effect to the dropdown navigated links. This could be used for the educational or business website. This uses bootstrap and jquery. HTML is quite simple with the tag defining the dropdown and sub menu. It shows the example of a scroll bar effect where the submenus are scrolling without the scroll bar displayed vertically. Also, there is an example where no sub-menus are mentioned under the menu. The scrolling effect is given by javascript, using hover functionality. Javascript takes care of the height and items in sub-menus. It decides the speed of scrolling according to the list in the sub menu. More the list faster is the scrolling. CSS defined the style for each class used in the snippet. Use this snippet to create the desired navbar for your website.