Contents
There you can just use width:100%; and position:absolute with left:0 . Alternatively to get the submenu out of the flow of the page, you could use position:fixed . And width:100% .
What is sub menu in Computer?
A sub-menu is a derivative menu that is reliant on a top-level menu in a graphical user interface system. Common software environments such as Microsoft Windows have more or less trained users to be able to recognize controls for accessing sub-menus, which are often invisible from a start screen.
Note: in order for your dropdown menus to be full width, you must first make your header full width. To do this, navigate to Divi > Theme Customizer > Header & Navigation > Primary Menu Bar, and tick the box for “Make Full Width.” So this next set of CSS is what fixes the giant icons.
How to create menu with submenu using HTML?
Figure 1: Above figure is simple menu with submenu created by div tag which contains four main menu and 16 submenu (4 submenu for each main menu) and we have used standard HTML as a baseline. In this example we can remove bullets and the margins and padding from the list.
The common way to address this issue, is to simply add a class to the s that contain s (sub menus) so that we can style those items differently from those that do not contain sub navigation. Pretty simple, but also pretty tedious and not particularly graceful.
How to create a subnavigation menu in HTML?
Use any element to open the subnav/dropdown menu, e.g. a , or element. Use a container element (like ) to create the subnav menu and add the subnav links inside it. Wrap a element around the button and the to position the subnav menu correctly with CSS. Step 2) Add CSS:
This is handy if your drop-down is simple and you can structure it specifically that way. It’s cleaner in that you don’t have to add “submenu” classes to your markup but, just as before, it still requires that you structure the content of your list manually or that your CMS can foretell which list items will contain other s as sub menus.