Beautiful horizontal menu using css. Page navigation plugin
Habr, hello!
There are a lot of good solutions from different specialists appearing on Codepen, and I believe that the best of them should be collected in one place. Therefore, 2 years ago I started saving on my computer interesting scripts on various topics.
I used to post them in the mr cloud IDE product group. Gefest, these were assemblies of 5-8 solutions. But now I have started to accumulate 15-30 scripts in different topics (buttons, menus, tooltips, and so on).
Such large sets should be shown to more specialists. That's why I'm posting them on Habr. I hope they will be useful to you.
In this review we will look at multi-level menus.
Flat Horizontal Navigation
Beautiful navigation bar with a smoothly appearing submenu. The code is well structured and uses js. Judging by the features used, it works in ie8+.
http://codepen.io/andytran/pen/kmAEy
Material Nav Header w/ Aligned Dropdowns
Adaptive link bar with two-column submenu. Everything is done in css and html. Used css3 selectors that are not supported in ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
Stylish vertical menu with smoothly opening elements. Transition, transform js code is used.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigation Menu
Dark vertical navigation bar with icons from ionicons. JavaScript is used. In ie8 it will most likely work without animation.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Pure CSS3 Mega Dropdown Menu With Animation
Stylish menu with two output formats: horizontal and vertical. Icons and CSS3 animation are used. It will definitely look terrible in ie8, but in other browsers everything is cool.
Vertical link: http://codepen.io/rizky_k_r/full/sqcAn/
Link to horizontal: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 Dropdown Menu
Horizontal menu with large elements and a drop-down list of links. Clean and minimalistic code without js.
http://codepen.io/ojbravo/pen/tIacg
Simple Pure CSS Dropdown Menu
Simple but stylish horizontal menu. Uses font-awesome. Everything works on css and html, without js. It will work in ie8.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown menu
An excellent solution for online stores. Displays several levels of categories and large images (for example, a product on sale). It is based on boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
Stylish navigation bar with smooth submenu. In older browsers it will display problems.
http://codepen.io/andytran/pen/YPvQQN
3D nested navigation
Horizontal menu with very cool animation without js!
http://codepen.io/devilishalchemist/pen/wBGVor
Responsive Mega Menu- Navigation
Horizontal responsive menu. Looks good, but mobile version It's a little lame. CSS, html and js are used.
http://codepen.io/samiralley/pen/xvFdc
Pure Css3 Menu
Original menu. With simple and clean code without js. Use for "wow" effects.
http://codepen.io/Sonick/pen/xJagi
Full CSS3 Dropdown Menu
Colorful drop-down menu with one nesting level. Icons from font-awesome, html and css are used.
http://codepen.io/daniesy/pen/pfxFi
Css3 only dropdown menu
A fairly good horizontal menu with three levels of nesting. Works without js.
http://codepen.io/riogrande/pen/ahBrb
Dropdown Menus
Minimalistic menu with original effect the appearance of a nested list of elements. I'm glad that this solution is also without javascript.
http://codepen.io/kkrueger/pen/qfoLa
Pure CSS DropDown Menu
Primitive, but effective solution. Only css and html.
http://codepen.io/andornagy/pen/xhiJH
Pull Menu - Menu Interaction Concept
Interesting menu concept for mobile phone. I've never seen anything like this before. Uses html, css and javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Make Simple Dropdown Menu
Clean and simple code, no js. It will definitely work in ie8.
http://codepen.io/nyekrip/pen/pJoYgb
Pure CSS dropdown
The solution is not bad, but it uses too many classes. I'm glad there's no js.
http://codepen.io/jonathlee/pen/mJMzgR
Dropdown Menu
Nice vertical menu with minimal javascript code. JQuery is not used!
http://codepen.io/MeredithU/pen/GAinq
CSS 3 Dropdown Menu
A horizontal menu with additional captions can decorate your website well. The code is simple and clear. Javascript is not used.
http://codepen.io/ibeeback/pen/qdEZjR
Beautiful solution with a lot of code (html, css and js). 3 submenu formats have been created. The solution is well suited for online stores.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (special solution)!
Dark horizontal menu with thirteen (13) animation options! I definitely advise you to read it, it will be useful in everyday life.
http://codepen.io/cmcg/pen/ofFiz
P.S.
I hope you liked the collection of 23 solutions. If you want to continue reading them, then take the survey below.
Enjoy your work everyone.
In this tutorial we will create horizontal menu in CSS. Of course, you can use ready-made solutions, for example, hire programmers for CMS Made Simple. However, you are not looking for easy ways, are you? :bully:
Step 1 - HTML markup
First, we need to create list items with a tag for each item in our horizontal menu. To create a submenu you need to add another child list inside the parent one.
Step 2 - Create CSS Styles for the Horizontal Menu
Initially, the menu looks vertical, to fix this we will write some styles, edit the indents, borders, background color, and round the corners. We will make the width and height fixed. We will align the menu elements to the left using float: left (so that the navigation acquires a horizontal structure).
Menu, .menu ul, .menu li, .menu a ( margin: 0; padding: 0; border: none; outline: none; ) .menu ( height: 40px; width: 505px; background: #4c4e5a; background: - webkit-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -moz-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -o-linear-gradient( top, #5c5e6a 0%,#3c3d44 100%); background: -ms-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; ) .menu li ( position: relative; list-style: none; float: left; display: block ; height: 40px; )
Let's write the following style for a while, hiding the drop-down list. This will make editing easier.
Step 3 - Link Menu Style
Next, we will write styles that add some basic CSS properties such as font type, colors, padding, etc. Then we'll add a shadow for the text and color transitions to create a smooth effect where the color changes not instantly, but at some interval. To create a link separator, let's add a border to the left and right, and then remove the left border from the first link and the right border from the last link. When you hover over the menu, only the color will change.
Menu li a ( display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #494942; border-right: 1px solid #4f5058; font- family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f4f4f4; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; -ms-transition: color .3s ease-in- out; transition: color .3s ease-in-out; ) .menu li:first-child a ( border-left: none; ) .menu li:last-child a( border-right: none; ) .menu li: hover > a ( color: #9fde63; )
Step 4 - Dropdown Menu
First of all, let's remove this line of code that we added in the second step.
Menu ul ( display: none; )
Now we will edit the style for the submenu. Let's add a submenu positioning of 40px at the top and 0px to the left of the menu item and add rounded corners below. Let's set the opacity to zero and change it to 1 on hover to create a fade in/out effect. For the up/down slide effect, we must set the list height to 0px when the dropdown is hidden, and 36px when hovering over the dropdown.
Menu ul ( position: absolute; top: 40px; left: 0; opacity: 0; background: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border- radius: 0 0 4px 4px; -webkit-transition: opacity .3s ease .1s; -moz-transition: opacity .3s ease .1s; -o-transition: opacity .3s ease .1s; -ms-transition: opacity . 3s ease .1s; transition: opacity .3s ease .1s; ) .menu li:hover > ul ( opacity: 1; ) .menu ul li ( height: 0; overflow: hidden; padding: 0; -webkit-transition: height .3s ease .1s; -moz-transition: height .3s ease .1s; -o-transition: height .3s ease .1s; -ms-transition: height .3s ease .1s; transition: height .3s ease . 1s; ) .menu li:hover > ul li ( height: 36px; overflow: visible; padding: 0; )
Set the width of the clickable drop-down menu to 100px. After each link I added a border to separate them. We will remove the border in the last link.
Menu ul li a ( width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #464649; ) .menu ul li:last-child a ( border: none; )
To complete a horizontal CSS menu, you need to add an icon for each drop-down submenu. To do this, we will create a custom class for each of the submenus and add a background image.
Menu a.d ( background: url(docs.png) no-repeat 6px center; ) .menu a.m ( background: url(bubble.png) no-repeat 6px center; ) .menu a.s ( background: url(arrow.png) no -repeat 6px center; )
Conclusion
We have successfully created a horizontal drop-down menu using CSS3 styles and without using it, although it was also possible. If you have any questions, let me know in the comments.
(downloads: 395)
1. Vertical bright jQuery menu
2. Cool effect. Dancing menu.
4. Dropdown list using jQuery
Excellent styling of the interface element in the form of a drop-down list.
When you hover the mouse over the button, a panel appears on top.
6. jQuery plugin “MobilyBlocks” for displaying a radial menu
7. Menu using sprites
Animated javascript menu with glow effect.
Fresh, nice menu using jQuery.
9. jQuery “GarageDoor” menu
10. jQuery vertical scroll menu
Implementation of a menu with a large number of items. Scrolls when you move the mouse cursor up or down.
11. jQuery drop-down list design
12. Page navigation plugin
Smooth scrolling to to the required section On the page. jQuery plugin One Page Navigation".
13. Plugin “Animated Content Menu”
New jQuery plugin. Excellent implementation of animated site navigation. When you go through menu items, a block with a description and possible links pops up, and depending on the selected item, the background of the page changes, which stretches to fill the entire screen regardless of the size of the browser window. Be sure to check out the demo page.
14. jQuery “Sweet Menu” menu plugin
Animated menu with pop-up items.
15. Fixed jQuery menu
When you scroll down the page, the menu remains fixed at the top of the screen.
16. Slider Kit Scrolling Menus
To implement a vertical menu with a large number of items. Scrolling through items is done using the mouse wheel, or using the “Previos” and “Next” links.
17. Stylish CSS3 menu
18. New CSS3 menu in Apple style
New menu in Apple style. It looks darker than before, but no less cute.
19. Original jQuery menu
Dropdown menu with background effect. Menu sub-items expand upward. When you hover over a menu item, the background image changes.
20. Animated menu with jQuery
Animated menu. Menu items are presented in the form of icons and descriptions. Several great effects when hovering the mouse over a menu item. There are 8 effects, to see them all - follow the links Exemple1-Exemple8 on the demo page.
21. “Scrolling menu” XML menu with scrolling
Vertical and horizontal scrolling menu. Good decision at large quantities menu items.
22. Context menu on a website using jQuery
Menu pops up when clicked right click mouse on a specific area.
23. Circular two-level menu for the site
When you select a menu item, submenu items are displayed on the right.
24. jQuery CSS3 menu with blur effect “Blur Menu” CSS3
The original jQuery CSS3 menu comes in 7 different styles. When you hover your mouse over one of the menu items, the rest seem to blur.
25. Some spectacular animated jQuery CSS3 menus
10 creative animated menus. Horizontal and vertical CSS3 menus with various effects and transitions.
The archive also includes the original PSD file menu.
27. MagicLine menu
The background or underline of a menu item follows the mouse with a slight delay, while the background smoothly changes its color as it moves from item to item. Very beautiful effect, looks unusual. Attention: the effect does not work in opera
28. Image Bubbles
An excellent effect when you hover your mouse over one of the images. The effect is somewhat reminiscent of jQDock described above.
31. Interesting jQuery menus with various effects
Horizontal, vertical menu. Interesting effects.
32. Great Apple-style jQuery menu
34. jQuery menu with an interesting effect
36. Fresh menu with an interesting effect using jQuery
A very interesting effect. Perfect for designing portfolio websites.
Interesting effect of thumbnails popping up on hover.
40. Dropdown list with autoscrolling
Nice transition effect between items.
42. Great jQuery menu
43. Beautiful large jQuery menu
44. jQuery Scrolling Menus
Menu items are presented in the form of thumbnails.
46. jQuery Radial Navigation Menu
47. CSS and jQuery menu
A navigation bar with a search box that becomes translucent as you scroll down the page.
48. Horizontal jQuery menu
49. Vertical jQuery menu
Great vertical menu. When you hover the cursor, a menu item pops up.
50. Horizontal jQuery menu
An interesting effect when hovering the cursor over a menu item.
52. jQuery Dropdown Menu
When you hover your mouse over the menu, its items will appear. The items that appear are displayed in the form of an arc, the radius of which you can set when configuring the plugin. In some browsers you will not see an arc display, the menu will be displayed straight, but this will still not spoil general impression from this jQuery menu implementation.
53. CSS and jQuery navigation bar
An interesting effect when hovering the mouse over a menu item.
54. jQuery popup panel
Fresh animated menu in gray tones.
58. Columnar site navigation using jQuery
An interesting solution for navigation, which is presented in the form vertical stripes. When you hover your mouse over these bars, an image for the item and a list of submenus appear. When you click on a submenu item, a page with a description appears. This implementation is perfect for promotional sites or presentations. Be sure to check out the demo of the plugin.
59. jQuery site navigation
The site navigation is presented in the form of 4 pictures, when you hover over them you will notice an interesting animated effect.
60. Navigation bar scrolls with content
Navigation panel. Clicking on the arrow scrolls the page. The navigation scrolls along with the page content.
61. jQuery panel with various social services
62. Neat animated jQuery menu
63. jQuery “Watercolor Brushes” menu
Task
Display a bulleted list horizontally without bullets.
Solution
Tag bulleted list
- displays elements by default
- vertically above each other. To create navigation elements, in some cases it is convenient to display the list horizontally. There are several ways to achieve this list display.
You should already know that HTML has block and inline elements. Inline elements do not create their own blocks; an example of such elements is tags or . Block elements are displayed with new line and create a rectangular block, an example of such tags
orSo here's the tag
- is also a block element.
To tag
- did not behave like a block element, it is possible with CSS help make it lowercase.
Responsible for how the element will be displayed in the document CSS property display. Let's consider three of its meanings (although there are more):
- block - the element is displayed as a block element.
- inline - the element is displayed as inline.
- inline-block - block-line element, read more about this type of element below, we will use it.
First, let's make a horizontal list by turning its bullet points into inline elements. In CSS style, let's write a rule in which the li selector is set to display property with the value inline .
List horizontally So, this style worked and we got a horizontal arrangement of list items:
Figure 1. Example #1 at work.
This method has disadvantages. The fact is that inline elements have some limitations compared to block elements. For example, they cannot be given width and height, but block ones can.
For example, we need the menu element we create to have a width of 150px and a height of 40px. Let's try to change the style to the following, that is, add two rules that set the size of the menu item:
These edits will not lead to any changes. In order for menu items to be positioned horizontally and to be able to set their width and height, they need to set the type to inline-block . Let's change our example code:
List horizontally This code works and the changes are visible:
Figure 2. Example No. 2 in action. But there may be different variants, for example, we need to display nested lists in the menu:
Nested list. Here is the result of this code:
Figure 3. Example No. 3 at work. We see that the blocks are not aligned in height as we would like. Of course, you can specify the same height for all blocks, but we don’t always know its exact value in advance, and it can change.
But actually, why does this happen?
Our blocks have a display property set to inline-block . This means that they have the qualities of both block elements (the ability to specify width and height) and inline elements. What we are seeing is the quality of the inline elements.
Let's look at a string with "A" characters of different sizes:
A A A A A A A
We see that all letters are vertically aligned along the bottom line. More precisely, along the baseline, but let’s not get into the weeds now. So, the same thing happened with our blocks.
To align text vertically, use vertical-align property. In our example #3, we need to use the value top , which will align the top border of the element to the top of the tallest element on the line.
For now let's apply it to a string with "A" characters of different sizes:
A A A A A A A
The letters seem to "jump" a little. I set the CSS border to the highest letter so that it can be seen that there are actually no jumps, there are empty space between the top border (at which the alignment occurs) and the top point of the "A" symbol.
The vertical-align property must be applied to each inline element, it is not inherited. You can read more about this property: vertical-align .
After this digression, we will continue to place the list elements horizontally.
Second way
You can place list items horizontally using the float property. This property specifies which side the element is aligned on, and has two positions: left and right .
Here's an example using this code:
List horizontally Here is the result of the code:
Figure 4. Example working. The example seems to work. But there is one caveat in using this property. Now we will look at it. For example, let's take a code in which there are two horizontal list With in different ways arrangement of elements horizontally: display and float:
List horizontally Here is the result of the code:
Figure 5. Example working. In these examples the list containers
- have a red border 1 pixel thick. But top list, which uses the display property, includes list items. But the elements of a list created using the float property fall out of their container.
- are still located outside the container
-
.
Figure 7. Example working. In addition, in work we do not always know which element will follow the element using float. The ideal option would be to close the operation of the float property in the same block in which it is open.
This is done using a pseudo element. Here's the code:
List horizontally Now we have 100% working code.
Figure 8. Example working. This technique with float property usually used in website layout to align columns created by tags
. In this way we get a normal construction of columns with the required height alignment. When we create a menu, in most cases the height of the blocks is not important to us; it is almost always the same. Therefore, using the rule (display: inline-block) in these cases is quite justified.But for the completeness of the topic, we have familiarized ourselves with all possible options. Although there may be other ways, for example, using CSS tables, search engines strongly recommend using tables only for their intended purpose, and not for organizing navigation elements or anything else.
Hello dear visitors of my blog! Today we will talk about the main horizontal menu of the site, namely how to align the horizontal menu in the center. Yes, at first glance, what’s so complicated about it - I set the necessary indents, adjusted them and that’s it. But there are some nuances here. A site, first of all, is dynamic, i.e. constantly appears on the site new content, some new blocks with information appear, etc. This is how some items may appear/disappear in the main menu. Taking all this into account, we need to ensure that when we add or remove a menu item, the menu remains in the center. Of course, it is not always necessary to center it, it all depends on the design. But if you still intend to place the horizontal menu in the center, then by using a few simple tricks in CSS we can achieve the desired result.
Article structure
Horizontal menu in the center without drop-down items
First, let's look at the example of a horizontal menu that does not have drop-down items.
HTML code
Css code
*, *::after, *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; ) #mainmenu ( background: #444; position: relative; overflow: hidden; height: 40px; margin: 30px 0 ) #mainmenu ul ( list-style: none; margin: 0; padding: 0; position: relative; left: 50%; float: left; font: 14px Arial, Helvetica, sans-serif; height: 40px ) #mainmenu ul li ( position : relative; left: -50%; float: left; margin: 0 10px; height: 40px ) #mainmenu ul li a ( color: #fff; display: block; text-decoration: none; padding: 0 15px; line- height: 40px; ) #mainmenu ul li a:hover ( background-color: #666; )Let's look at everything in order, everything is simple here. We create a “mainmenu” container where we place our menu in the form of an unordered list.
Now it's a matter of css styles. First we reset all margins and padding to zero for all browsers. Next, using the “float:left” property, we shift our unordered list to the left and then, using relative positioning, we shift it 50% to the right. The width of the "ul" list will be equal to the sum of the lengths of all the "li" items that are inside it. Thus, if we mentally divide the browser window in half, our menu will move to the right of the dividing line. To align we will apply the “li” to the points as well relative positioning and shift them to the left by 50%, specifying the property “left:-50%”. And also, I almost forgot, our “mainmenu” container must specify the property "overflow:hidden", otherwise we will get horizontal stripe scroll.
That's it, now our menu is aligned to the center. Now you can add or subtract points, this will not affect the positioning. You can also use this menu on your websites by simply changing the styles to suit your design.
Horizontal menu in the center with drop-down items
Now let's look at the drop-down sub-items. Here the situation is somewhat different and somewhat more complicated, because in the first case, our sub-items will not appear, because we have specified the “overflow: hidden” property to the “mainmenu” block. This means that elements outside of this block will not be shown. But there is a way out.
So, I modified the previous code and removed the "overflow:hidden" property from it.
HTML code
CSS code
*, *::after, *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; ) #mainmenu ( position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; float: left; width: 100%; z-index: 10 ) #mainmenu ul ( clear: left; position: relative; right: 50%; height: 40px; float: right; text-align: center; font: 15px Arial, Helvetica , sans-serif; list-style: none; padding: 0; margin: 0 ) /** Main points **/ #mainmenu > ul > li ( position: relative; left: 50%; float: left; height: 40px ; padding: 0; margin: 0 ) #mainmenu > ul > li > a ( border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height : 40px; ) #mainmenu > ul > li:first-child > a ( border: none ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li. active > a ( color: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active ( background: #666 ) /* Drop-down subitems */ #mainmenu ul li ul ( position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px ) #mainmenu > ul > li ul li ( background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; ) #mainmenu ul li ul li a ( border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; ) #mainmenu ul li ul li.parent a ( position: relative; ) #mainmenu ul li ul > li.parent > a::before ( border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; ) #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover ( background-color: #444 ) #mainmenu ul li:hover ul, #mainmenu ul li.hover ul ( display: block ) /* Second-level drop-down items */ #mainmenu ul li:hover > ul ( opacity: 1; visibility : visible; margin: 0; ) #mainmenu ul li ul li ul ( top: 0; left: 200px; margin: 0 0 0 20px; width: 180px )Now our menu is placed in the center and sub-items appear when you hover over it.
Centering menus with flexbox
Align menu to center You can also apply a new rule in css - flexbox. In general, I want to dedicate a separate post to tricks with flexbox, it’s worth it, it greatly simplifies the life of a layout designer. In general, we will not go deeper here... I will only give here css code for a menu with drop-down items. The HTML code is the same as above.
CSS code
*, *::after, *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; ) #mainmenu ( position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; width: 100%; z-index: 10 ) #mainmenu ul ( display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit- box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 40px; text-align: center; font: 15px Arial, Helvetica, sans-serif ; list-style: none; padding: 0; margin: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; ) / ** Main points **/ #mainmenu > ul > li ( position: relative; height: 40px; padding: 0; margin: 0 ) #mainmenu > ul > li > a ( border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; ) #mainmenu > ul > li:first-child > a ( border: none ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a ( color: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active ( background: #666 ) /* Drop-down sub-items */ #mainmenu ul li ul ( position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px ) #mainmenu > ul > li ul li ( background-color : #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; ) #mainmenu ul li ul li a ( border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; ) #mainmenu ul li ul li.parent a ( position: relative; ) #mainmenu ul li ul > li.parent > a::before ( border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(- 50%) rotate(45deg); height: 6px; width: 6px; ) #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover ( background-color: #444 ) #mainmenu ul li:hover ul, #mainmenu ul li.hover ul ( display: block ) /* Drop-down items second level */ #mainmenu ul li:hover > ul ( opacity: 1; visibility: visible; margin: 0; ) #mainmenu ul li ul li ul ( top: 0; left: 200px; margin: 0 0 0 20px; width : 180px )As you can see, the rules have changed only for the parent list - #mainmenu ul. The only thing was that I had to add prefixes for previous versions browsers. I note that the flexbox rule is correctly understood only by modern browsers. If you are targeting older browsers, then the flex option will have to be postponed. You can see which browsers understand flexbox well
At first glance, everything works. But let's swap our lists. Let's put the list with the menu-1 class in the code before the list with the menu-2 class (now it is lower).
This is what we get as a result:
Figure 6. Example working. The items in the bottom menu also wrap around the top menu, because the effect of the float property has not been canceled and it applies to all subsequent elements.
How to solve this problem?
To do this, you need to use the clear property, it cancels the element's wrapping around another element if it has the float property set.
Here's a modified example using the clear property:
List horizontally It can be seen that the lower list no longer wraps around the upper one, the elements do not collide with each other. But in the first list there are tags
- is also a block element.