Computers, Software
How to make a drop-down menu of CSS
Today we will consider the question "How to create a drop-down menu of CSS?". It should immediately be said that this element will be made without the connection of any additional means. That is, the menu will be created only with CSS and HTML.
Preparation
To fully understand what is going on in the article, you need at least a little acquaintance with the theoretical material. But if you are familiar with pseudo-classes, you can skip this paragraph. So, to create a vertical CSS drop-down menu, we need an element such as ": hover". A pseudo-class ": hover" can be assigned to any HTML tag. It allows you to determine when a mouse cursor is pointing to an item. For example, we assigned a property: "a: hover {color: red;}". This entry means that when you hover over any tag, its contents turn red. It's worth noting that this pseudo-class means still an unactivated item. By the way, ": hover" has related similar elements. But it is with the help of this pseudo-class that we will create a drop-down CSS menu.
Instructions
First of all, it's worth understanding what the drop-down menu is. Under this definition, there are many different methods of constructing various mock-ups. In this case, we will disassemble the construction consisting of several constantly visible items and several additional (hidden) ones. Let's finish with the theory and get down to practice.
- Create a layout of our menu. To do this, we'll make the HTML markup. Create a nested list:
- < / Ul>. This should look like your drop-down menu. CSS will come into action a little later. In this case, the main list consists of three main items and two nested ones.
- Hide the additional menu. To do this, we use style sheets, define the following property: ul ul {display: none;} This will remove the elements of the second list from the screen.
- Create a menu in the CSS, dropping out of the main list. In cascading style sheets, we write the following rule: ul li: hover ul {display: block;}. This entry means that when you hover the mouse over the li element that is in the ul list, ul (nested) appears on the screen. At first glance, such a scheme may seem too complicated and confusing. But in fact, everything is very simple.
- Use this layout yourself, inserting your content between the
- tags. You can change the number of items in the list.
Decorative changes
As soon as the main menu layout is ready, you can proceed with its design. Probably, many in the first place want to get rid of the markers, which designate the element of the list. This is done with a single CSS property, namely, list-style-type. You need to add this entry: li {list-style-type: none;}. Next, you can insert a frame and make a background. The border and background properties will help you. Perhaps, some will not like that the drop-down menu appears as an additional list, while expanding the main elements. To fix this, you can position it. To do this, in the cascading style sheets write the following entry: ul ul {position: absolute; Left: 15px; Right: 15px; Top: 15px; Bottom: 15px;}. Naturally, the values you will use your own. Depending on where you want to see the drop-down menu, CSS will offer many more properties that can add different effects and decorate our lists.
Conclusion
Once again, it is worth noting the design of the menu layout. To assign CSS rules in this case, you use nested values, for example ul ul. If you have other similar designs in the document, then there may be big problems. In these situations, you need to use a more specific purpose, for example, selectors or id-identifiers. The layout of the drop-down menu shown in the article is intended for acquaintance with the general design. The rest of the work is on your shoulders.
Similar articles
Trending Now