Correct menu design in html5 css3. CSS - horizontal menu for beginner layout designers

From the author: I welcome you to our blog about website building. This is a series of articles dedicated to the new specification and today I would like to tell you how to create a menu in HTML5 and how this process differs from the same in previous versions of the language.

What are the differences

First of all, I would like to say that the specification is not so new - it began its development back in 2009. Actually, since then there has been constant development - new opportunities appear in html5, modern browsers more and more support for these same capabilities, so that soon it will be possible to talk about full support for this technology, although it is not a single whole, it is rather a set of new capabilities, each of which is independent.

Well, okay, but what is different about creating the main navigation (menu), since you are reading an article on this topic, then there should definitely be some differences. Well, how was the menu created before? Typically, a bulleted list was used for this, which was placed in an additional container for all navigation - a regular div.

So, with the advent of new tags, you can now do something more correct - instead of a div tag, wrap the menu in nav - a new semantic element that was created specifically to collect the most important links in it and group them together.

You can put either a list or just a set of links in nav. It seems to me that this is an even simpler and more correct solution, although in many templates you can still see the implementation of the menu using the ul, li, a tags.

Interestingly, the nav container was created specifically for priority links on the page. In fact, there can be more than one such container on a page, but you should place in them only those links that actually form the main navigation (for example, the top main menu and its duplicate in the page footer).

How to make a horizontal menu using html5

home Services Contacts Reviews

You don’t even need any framing in the list; everything will initially be displayed on one line, since the links are inline elements.

Another thing is that they are very limited in design due to their inline properties. You will only be able to operate with such properties as: color, font size, margins. If you want to set a specific background color, make separators and add padding (or determine the size of each menu item), then you won’t be able to do this with a line.

Here we will have to convert our items into block elements. To do this, they need to write the property:

display: block;

Now they go from top to bottom, that is, our navigation has become vertical. To turn it back into horizontal, you need to add certain properties. For example, instead of a block type, define a block-line type for them, or give them (float: left). Read more about these methods.

Vertical navigation

Usually, to make a vertical menu in html5, they use a list, but the markup that I gave you above is also suitable for us. As you saw, if you convert links to block links, they will automatically line up one after the other from top to bottom, because two blocks cannot be on the same line.

Now you can apply the necessary design rules to them. Blocks have many more properties than an inline element, so you have a lot more options. For example, I added these:

a( text-decoration: none; color: #fff; padding: 5px; font-size: 22px; display: block; background: linear-gradient(to right, rgba(96,108,136,1) 0%,rgba(63,76,107 ,1) 100%); width: 200px; text-align: center )

text - decoration : none ;

color : #fff;

padding: 5px;

font-size: 22px;

display: block;

background: linear - gradient (to right, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%);

width: 200px;

text - align : center

Horizontal menu is a list of website sections, so it’s more logical to mark it inside the element

By default, all list elements are arranged vertically, occupying the entire width of the container element, which in turn occupies the entire width of its container block.

HTML markup for horizontal navigation

Menu item
Menu item
Menu item

A horizontal menu located inside a tag can additionally be placed inside the ... and/or ... element. Thanks to this html markup, semantic meaning is given, and also appears additional opportunity to format the menu block.

There are several ways to place them horizontally. First, you need to reset the default browser styles for navigation elements:

Ul ( list-style: none; /*remove list markers*/ margin: 0; /*remove the top and bottom margin equal to 1em*/ padding-left: 0; /*remove the left padding equal to 40px*/ ) a ( text-decoration: none; /*remove underlining of link text*/)

Making list elements lowercase. As a result, they are positioned horizontally, with a gap of 0.4em added on the right side between them (calculated relative to the font size). To remove it, add a negative right margin for li li (margin-right: -4px;) . Next, we style the links as we wish.

Making list elements floating. As a result, they are positioned horizontally. The height of the container block ul becomes zero. To solve this problem, we add (overflow: hidden;) to ul, extending it and thus allowing it to contain floating elements. For links, add a (display: block;) and style them as you wish.

Making list elements inline-block. They are located horizontally, a gap is formed on the right side, as in the first case. For links, add a (display: block;) and style them as you wish.

Making the ul list a flexible container using the . As a result, the list elements are arranged horizontally. We add a (display: block;) for the links and style them as desired.

First of all, let's figure out what the menu is for and what it is.

A site menu is a list of pages or sections of a site, placed in a prominent place, and intended for user access to these pages or sections. There are two types of menus: main and additional. Typically, the main menu contains links to key sections of the site. Additional menus usually contain links to subsections or specific pages. In addition, menus can have a hierarchical structure of 3 types: drop-down list, drop-down list and expanded list (can have a tree structure).

So, we found out that the menu is a single-level or multi-level list. Accordingly, we will do it using an element representing a list. In HTML, such elements are defined by the ul and ol tags, which denote bulleted and numbered lists, respectively. Each list element is defined by an li tag.

In our web document, in the space provided for the horizontal menu code, write the following HTML code:

home

Services and prices

Guarantees

Technologies

About company

This list will be the main menu of our site. It is not necessary to make the main menu in the form of bookmarks. You can even use a multi-level expandable or drop-down menu, or something else, but when designing the menu, pay attention to ease of navigation. As a rule, the less nesting of any menu, the more convenient it is. Thus, a menu with more than one nesting level is not the best choice. In this case, it is better to consider the possibility of introducing an additional menu, or some other navigation method.

The first element of the main menu has the attribute class with meaning selected, so using a CSS rule specified by a selector with the name of this class, we can specifically highlight the menu tab defined by this element. IN in this example we will not highlight the selected element in any way. However, this is the way to create menus that have the currently selected tab. In addition, all links here lead to the current page. In a real menu, there should be no links leading to yourself, with the exception of perhaps a link to the main page. Also, all links are enclosed in a tag span, we will need it to vertically center the text.

Lists in HTML are block elements. If you open our web page in your browser now, you will see that the links in our menu are placed one below the other. Therefore, along with the design of each element that defines a tab, we must determine the style of its display.

Let's add the following rules to the style file:

#hmenu (
margin-left: 160px; /* serves to align the menu so that it starts above the content area */
}

/* design the tab */
#hmenu li (
/* set the font */
font-family: Calibri;
font-size: 14px;
/* top padding */
margin-top: 5px;
/* distance between tabs */
margin-left: 0.5em;
margin-right: 0.5em;
/* mouse pointer */
cursor: pointer;
/* Background */
background-image: url("mm_button.png");
background-repeat: no-repeat;
/* tab dimensions */
width: 100px;
height: 40px;
/* make the element linear and block at the same time */
display: inline-block
}

/* design of the active tab */
.selected ( /* ... */)

/* tab on mouse over */
#hmenu li:hover (
background-image: url("mm_button_hover.png");
}

/* formatting link text */
#hmenu li a (
color: green;
text-decoration: none; /* disable underlining of links */
}

/* vertically center the text */
#hmenu li a span (
display: block; /* make the element block */
padding-top: 0.8em;
padding-bottom: 0.8em;
}

Here everything is described inside the code, I’ll just note that using the above CSS code, only modern browsers will display the page correctly. That is, in Internet Explorer Below version 8 the page will not be presented correctly. This is because older browsers such as Internet Explorer 6 and 7 do not support inline and inline-block values for lists. Replacing the line display: inline-block in the second rule with

/* for lower versions of Firefox */
display: -moz-inline-stack;
/* for all except IE 7- and Firefox */
display: inline-block;
/* For IE 7 and below */
*display: inline;
_overflow: hidden;
zoom: 1;

Let's create a menu on the left in the same way.

Diagnostics

Prevention

Treatment

Surgery

Let's design it using CSS.

#vmenu li a (
color:Green;
text-decoration:none;
}

#vmenu li (
font-family:Calibri;
font-size:14px;
font-style:normal;
width:115px;
display:block;
overflow:hidden; /* hide the protruding elements */
padding:0.5em 0em 0.5em 0;
/* make the element look like a button, setting the appropriate background */
background-image:url("sm_button.png");
background-position:center;
background-repeat:no-repeat;
}

#vmenu li a span (
width:100px;
padding-left:1em;
padding-right:100px;
display:block;
}

#vmenu li:hover (
background-image:url("sm_button_hover.png");
}

Also, as in the previous case, a display error will occur in lower versions of Internet Explorer. It is associated with doubling the indentation of elements in this browser.

In the next lesson we will complete the layout of our page by placing our site logo, content and page footer.

If your website is more than just a single web page, then you should consider adding a navigation bar (menu). Menu is a section of a website designed to help visitors navigate the site. Any menu is a list of links leading to internal pages of the site. The easiest way to add a navigation bar to your site is to create a menu using CSS and HTML.

Vertical menu

The first step in creating a vertical menu is to create a bulleted list. We will also need to be able to identify the list, so we will add an id attribute to it with the identifier "navbar". Each element

our list will contain one link:
- home
- News
- Contacts
- About Us
Our next task is to reset the default list styles. We need to remove the outer and inner padding from the list itself and the bullets from the list items. Then set the desired width:
#navbar ( margin: 0; padding: 0; list-style-type: none; width: 100px; )
Now it's time to style the links themselves. We will add a background color to them, change the text parameters: color, font size and weight, remove the underline, add small indents and redefine the display element from inline to block. Additionally, left and bottom frames have been added to the list items.
The most important part of our changes is the redefinition of inline elements to block elements. Now our links occupy all the available space of the list items, that is, to follow the link we no longer need to hover the cursor exactly over the text.
#navbar a ( background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; ) #navbar li ( border-left: 10px solid #666; border-bottom: 1px solid #666; )
We have combined all the code described above into one example, now by clicking on the try button you can go to the example page and see the result:
Document title #navbar ( margin: 0; padding: 0; list-style-type: none; width: 100px; ) #navbar li ( border-left: 10px solid #666; border-bottom: 1px solid #666; ) # navbar a ( background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; )
- home
- News
- Contacts
- About Us
Try »
When you hover your mouse over a menu item, it appearance can change to attract the user's attention. You can create such an effect using the pseudo-class:hover.

Let's return to the vertical menu example discussed earlier and add the following rule to the style sheet:
#navbar a:hover ( background-color: #666; border-left: 5px solid #3333FF; ) Try »
Horizontal menu
In the previous example, we looked at the vertical navigation bar, which is most often found on websites to the left or right of the main content area. However, menus with navigation links are also often located horizontally at the top of the web page.

A horizontal menu can be created by styling a regular list. Display property for elements
you need to assign the value inline so that the list items are located one after another.

To place menu items horizontally, first create a bulleted list with links:
- home
- News
- Contacts
- About Us
Let's write a couple of rules for our list that reset the default style used for lists, and redefine the list items from block to inline:
#navbar ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Try »
Now all we have to do is define the styling for our horizontal menu:
#navbar ( margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; ) #navbar a ( color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; ) #navbar a:hover ( border-radius: 20px 5px ; background-color: #0066FF; ) Try »
Drop-down menu
The menu we will create will have main navigation links located in the horizontal navigation bar, and sub-items that will only appear when the mouse cursor hovers over the menu item to which these sub-items relate.

First we need to create the HTML structure of our menu. We will place the main navigation links in a bulleted list:
- home
- News
- Contacts
- About Us
We will place the sub-items in a separate list, nesting it in the element
, which contains the parent link regarding the sub-items. Now we have a clear structure for our future navigation bar:
- home
- News
- Contacts
  - Address
  - Telephone
  - Email
- About Us
Try »
Now let's start writing CSS code. First, you need to hide the list with sub-items using the display: none; declaration so that they are not displayed on the web page all the time. To display sub-items, we need that when hovering over an element

the list has been converted to a block element again:

#navbar ul ( display: none; ) #navbar li:hover ul ( display: block; )

We remove the default indents and markers from both lists. We make list elements with navigation links floating, forming a horizontal menu, but for list elements containing sub-items we set float: none; so that they appear below each other.

#navbar, #navbar ul ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( float: left; ) #navbar ul li ( float: none; )

Next, we need to make sure our dropdown submenu doesn't push the content below the navigation bar down. To do this, we will set the list items position: relative; , and a list containing sub-items position: absolute; and add a top property with a value of 100% so that the absolutely positioned submenu appears exactly below the link.

#navbar ul ( display: none; position: absolute; top: 100%; ) #navbar li ( float: left; position: relative; ) #navbar ( height: 30px; ) Try »

The height for the parent list was added on purpose, since browsers do not consider floating content as element content, without adding height our list will be ignored by the browser and the content following the list will wrap around our menu.

Now we just need to style both of our lists and the drop-down menu will be ready:

#navbar ul ( display: none; background-color: #f90; position: absolute; top: 100%; ) #navbar li:hover ul ( display: block; ) #navbar, #navbar ul ( margin: 0; padding: 0; list-style-type: none; ) #navbar ( height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; ) #navbar li ( float: left; position: relative; height: 100%; ) #navbar li a ( display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; ) #navbar ul li ( float: none; ) #navbar li:hover ( background-color: #f90; ) #navbar ul li:hover ( background-color: #666; )

Most classic websites on the Internet use a horizontal menu as the main navigation element. Sometimes it may contain various additional features - multi-level structures, icons for sub-items, a search block, complex lists, etc. Recently there was a small selection on the blog, and today we’ll look at 4 practical examples of how to make a drop-down menu using CSS + HTML. The information will be useful for novice developers and those who want to change the navigation on their website.

The first CSS3 Dropdown Menu tutorial is the newest in the collection (from April 2016). Pros of the solution: in this horizontal drop-down menu for the site, the sub-items contain icons, the implementation and the CSS code itself are quite simple to understand and implement.

Step1 - HTML markup

The first step is to create an unordered list in HTML with anchor links (#) for its elements. There, in one of the items, we add another nested list, which will be responsible for the submenu.

Step2 - Display the menu

We remove unnecessary indents in CSS for elements of the site's horizontal drop-down menu. At the same stage, we will set a fixed width and height of the menu items, and also add rounded corners.

.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 , #4c4e5a 0% , #2c2d33 100% ) ; background : -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : -o-linear-gradient (top , #4c4e5a 0% , #2c2d33 100% ) ; background : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : linear-gradient(top , #4c4e5a 0% , # 2c2d33 100% ) ; -webkit-border-radius: 5px ; -moz-border-radius: 5px ; border-radius : 5px ; ) .menu li ( position : relative ; list-style : none ; float : left ; display : block ; height : 40px ; )

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, #4c4e5a 0%,#2c2d33 100%); background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -o-linear-gradient( top, #4c4e5a 0%,#2c2d33 100%); background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) .menu li ( position: relative; list-style: none; float: left; display: block ; height: 40px; )

Step3 - linking

In addition to the basic features in styles (font, color, height), we use and create a smooth transition of text color when hovering. We also add separators to the menu, removing the border from the first element on the left and from the last on the right.

.menu li a ( display : block ; padding : 0 14px ; margin : 6px 0 ; line-height : 28px ; text-decoration : none ; border-left : 1px solid #393942 ; border-right : 1px solid #4f5058 ; font -family : Helvetica, Arial, sans-serif ; font-weight : bold ; font-size : 13px ; color : #f3f3f3 ; text-shadow : 1px 1px 1px rgba (0 , 0 , 0 , .6) ; -webkit- transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in -out; transition : color .2s ease-in-out; ) .menu li: first-child a ( border-left : none ; ) .menu li: last-child a( border-right : none ; ) .menu li : hover > a ( color : #8fde62 ; )

Menu li a ( display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font- family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in- out; transition: color .2s ease-in-out; ) .menu li:first-child a ( border-left: none; ) .menu li:last-child a( border-right: none; ) .menu li: hover > a ( color: #8fde62; )

Step4 - submenu

Since we have a drop-down site menu using CSS, we should also set a design for the nested list. First, set a margin of 40px on top and 0px on the left + add rounded corners. To show/hide the submenu, initially set the opacity property to zero, and when hovering it to one. To create the effect of a submenu appearing, set the value of the list height to zero, and with hover = 36px.

.menu ul ( position : absolute ; top : 40px ; left : 0 ; opacity : 0 ; background : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px 5px ; border -radius : 0 0 5px 5px ; -webkit-transition: opacity .25s ease .1s ; -moz-transition: opacity .25s ease .1s ; -o-transition: opacity .25s ease .1s ; -ms-transition: opacity .25s ease .1s ; transition : opacity .25s ease .1s ; ) .menu li: hover > ul ( opacity : 1 ; ) .menu ul li ( height : 0 ; overflow : hidden ; padding : 0 ; -webkit-transition : height .25s ease .1s ; -moz-transition: height .25s ease .1s ; -o-transition: height .25s ease .1s ; -ms-transition: height .25s ease .1s ; transition : height .25s ease .1s ; ) .menu li: hover > ul li ( height : 36px ; overflow : visible ; padding : 0 ; )

Menu ul ( position: absolute; top: 40px; left: 0; opacity: 0; background: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity . 25s ease .1s; transition: opacity .25s ease .1s; ) .menu li:hover > ul ( opacity: 1; ) .menu ul li ( height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease . 1s; ) .menu li:hover > ul li ( height: 36px; overflow: visible; padding: 0; )

We set the width of the links = 100px, a border-bottom border is added at the bottom of all elements except the last one. Also, if you wish, you can place pictures for the submenu items (attention! do not forget to change the paths to the images in the code to the ones you use).

.menu ul li a ( width : 100px ; padding : 4px 0 4px 40px ; margin : 0 ; border : none ; border-bottom : 1px solid #353539 ; ) .menu ul li : last-child a ( border : none ; ) .menu a.documents ( background : url (../img/docs.png ) no-repeat 6px center ; ) .menu a.messages ( background : url (../img/bubble.png ) no-repeat 6px center ; ) .menu a.signout ( background : url (../img/arrow.png ) no-repeat 6px center ; )

Menu ul li a ( width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539; ) .menu ul li:last-child a ( border: none; ) . menu a.documents ( background: url(../img/docs.png) no-repeat 6px center; ) .menu a.messages ( background: url(../img/bubble.png) no-repeat 6px center; ) .menu a.signout ( background: url(../img/arrow.png) no-repeat 6px center; )

I personally like the ease of implementation and the use of icons. Here is the final code from codepen:

Josh Riser's option is visually similar to the previous HTML and CSS dropdown menu. The code does not have a child selector ">" (useful in multi-level designs), but the author makes good use of CSS3 effects (transition, box-shadow and text-shadow) for a more beautiful result. The link in the source does not describe the process of creating a horizontal drop-down menu, so I will immediately provide the final code:

In this example, we will look at how to make a drop-down menu using CSS, which, in addition to the items, will contain a search block. A similar implementation can often be found in modern . In terms of implementation time and complexity, the solution is a little more complicated than the previous ones. It was published in May 2013, so you may need to tweak some things, although it worked fine in our testing.

HTML code

For navigation, as always, an unordered list (with the nav class) is used. Regular menu items are list items (li) and contain links (a href) without any classes or IDs. The exception is 3 specialized elements of this horizontal drop-down menu with the following IDs:

settings — link picture;
search — a block with a search and a corresponding button;
options - contains a submenu (implemented through a list with the subnav class).

Also in the code you will see a prefixfree script for using CSS properties without prefixes. The final HTML for the dropdown menu looks like this:

Application
Board
Options
- Settings
- Application
- Board
- Options

Application
Board
Options
- Settings
- Application
- Board
- Options

Menu CSS

1. Basic styles and menu elements

First, we specify the Montserrat font, a dark gray background, and a fixed height for the menu items. All elements have float: left alignment and relative positioning so that later you can add a submenu with position: absolute;

@import url (http: //fonts.googleapis.com/css?family= Montserrat) ; * ( margin : 0 ; padding : 0 ; ) .nav ( background : #232323 ; height : 60px ; display : inline-block ; ) .nav li ( float : left ; list-style-type : none ; position : relative ; )

@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margin: 0; padding: 0; ) .nav ( background: #232323; height: 60px; display: inline-block; ) .nav li ( float: left; list-style-type: none; position: relative; )

2. Formatting links

Menu items use the basic design + . The height is the same as in the nav class. For #settings the image link at the beginning of the menu, the alignment is set.

.nav li a ( font-size : 16px ; color : white ; display : block ; line-height : 60px ; padding : 0 26px ; text-decoration : none ; border-left : 1px solid #2e2e2e ; font-family : Montserrat , sans-serif ; text-shadow : 0 0 1px rgba ( 255 , 255 , 255 , 0.5 ) ; ) .nav li a: hover ( background-color : #2e2e2e ; ) #settings a ( padding : 18px ; height : 24px ; font-size : 10px ; line-height : 24px ; )

Nav li a ( font-size: 16px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: none; border-left: 1px solid #2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); ) .nav li a:hover ( background-color: #2e2e2e; ) #settings a ( padding: 18px; height: 24px; font-size: 10px; line-height: 24px; )

3. Search block

This element has a fixed width and consists of several parts - an input field (#search_text) with a green background and a search button (#search_button). In some browsers, the background color may be gray.

#search ( width : 357px ; margin : 4px ; ) #search_text ( width : 297px ; padding : 15px 0 15px 20px ; font-size : 16px ; font-family : Montserrat, sans-serif ; border : 0 none ; height : 52px ; margin-right : 0 ; color : white ; outline : none ; background : #1f7f5c ; float : left ; box-sizing : border-box ; transition : all 0.15s ; ) :: -webkit-input-placeholder ( /* WebKit browsers */ color : white ; ) : -moz-placeholder ( /* Mozilla Firefox 4 to 18 */ color : white ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ color : white ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color : white ; ) #search_text : focus ( background : rgb (64, 151, 119) ;) #search_button ( border: 0 none; background: #1f7f5c url (search.png) center no-repeat; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer; )

#search ( width: 357px; margin: 4px; ) #search_text( width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px ; margin-right: 0; color: white; outline: none; background: #1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s; ) ::-webkit-input-placeholder ( /* WebKit browsers */ color: white; ) :-moz-placeholder ( /* Mozilla Firefox 4 to 18 */ color: white; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ color: white; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color: white; ) #search_text:focus ( background: rgb(64, 151, 119); ) #search_button ( border: 0 none; background: #1f7f5c url (search.png) center no-repeat; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer; )

4. Dropdown submenu

The final touch will allow us to make a CSS dropdown menu that works for last point#options.

#options a( border-left : 0 none ; ) #options > a ( background-image : url (triangle.png ) ; background-position : 85% center ; background-repeat : no-repeat ; padding-right : 42px ; ) .subnav ( visibility : hidden ; position : absolute ; top : 110% ; right : 0 ; width : 200px ; height : auto ; opacity : 0 ; transition : all 0.1s ; background : #232323 ; ) .subnav li ( float : none ; ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : hover .subnav ( visibility : visible ; top : 100% ; opacity : 1 ; )

#options a( border-left: 0 none; ) #options>a ( background-image: url(triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav ( visibility: hidden; position: absolute; top: 110%; right: 0; width: 200px; height: auto; opacity: 0; transition: all 0.1s; background: #232323; ) .subnav li ( float : none; ) .subnav li a ( border-bottom: 1px solid #2e2e2e; ) #options:hover .subnav ( visibility: visible; top: 100%; opacity: 1; )

In the styles you will find the insertion of a triangle background image (triangle.png) to indicate the submenu - do not forget to indicate the correct path for this and other images in the example. The appearance of a submenu is implemented using the opacity property. Final solution on codepen:

This option mainly uses CSS2.1 techniques, the solution plus or minus is new - for March 2015. If you are missing one sublevel in a horizontal drop-down menu for a site, then this example contains three at once. Using the pseudo-class:only-child, a “+” symbol is added to items to indicate the presence of a submenu.

Overall, a good and simple example. We will not describe the implementation process in detail, because... it is similar to the previous ones - first you create an HTML framework, and then gradually add styles for it. Download the final code using the link to the source; you can partially view it in Codepen:

Total

Above we looked at 4 options for how to make a drop-down menu using CSS + HTML for, although similar examples there is much more online. There are solutions with jQuery, but this is most likely only useful for implementing some special effects and non-standard tasks. In most cases, a combination of CSS + HTML will be enough, especially since now the main requirements for a menu are convenience and fast loading speed.

Finally, two notes on the codes above. Some examples use images in the CSS for the dropdown menu, so you'll need to carefully review the image paths and provide the correct values for your site. Secondly, some of the solutions are 2-3 years old, so you should once again additionally check their performance in different browsers.

If you know any other interesting modern implementations of horizontal drop-down menus for a website, send links in the comments.