How to stretch the menu to the full width css. Beautiful horizontal menu with full width. Adaptive menu with scallops

Hello. I haven’t written posts on the topic of html/css work for a very long time. Recently I just started putting together a new layout and in the process I came across an interesting trick that allows you to make the menu flexible (you can add new items to it and the size will not increase, but will always be 100% of the parent block). So, today we will implement a rubber menu using CSS.

If you are too lazy to read the article, you can watch this video. The author also explains everything very well:

Rubber menu with CSS - step 1

The first step is always html markup, where would we be without it? But in our case everything will be simple:

block wrapper for menu

the menu itself, displayed through a bulleted list (ul tag)

Well, the menu items are inside, and, accordingly, they already have links

Everything is clear, here is my markup code:

It all looks standard, like this:

Now we will put everything in the desired form, CSS will get to work.

Step 2 - Basic Styles

Next, I'll add styles to the wrapper block. Namely, I’ll set the maximum width to 600 pixels (just to make it easier to take a screenshot so that the menu fits), and I’ll also center the block.

Wrap(
background: #fff;
max-width: 600px;
margin: 0 auto;
}

Step 3 - implement rubber

Now let's take on the menu itself. I’ll remove the markers from it (the ul tag), make a background linear gradient, and, most importantly, use the display: table-row property to make the container for the menu behave like a table row. This is important to do for further manipulations.

R-menu(
background: linear-gradient(to right, #b0d4e3 0%,#88bacf 100%);
display: table-row;
list-style: none;
}

As you can see, the above code just solved everything I wrote about. By the way, it is convenient to generate gradients using the Ultimate CSS Gradient generator tool. I will write about him again someday.

R-menu(
vertical-align: bottom;
display: table-cell;
width: auto;
text-align: center;
height: 50px;
border-right: 1px solid #222;
}

vertical-align: bottom - this property is necessary so that if the text in a menu item takes 2 lines, it will be displayed evenly. When we make the menu, you can remove this property, zoom in so that the items are compressed and the text is moved onto two lines and you will see a display problem. Return the property and everything will be fine.
display: table-cell - since we set the display menu itself to be a table row, it would be logical to set its items to be displayed as cells in a table. It is necessary.
width: auto — the width will be calculated automatically, depending on the length of the text in the paragraph
text-align: center - this is just to center the text inside
height: 50px — set the height to 50 pixels
well, border-right is just a border on the right, a separator for items

So far the menu looks unsightly, but that’s okay, it’s time to bring it to mind.

The last thing to do is to style the links inside the items. Here I have this code:

R-menu li a(
text-decoration: none;
width: 1000px;
height: 50px;
vertical-align: middle;
display: table-cell;
color: #fff;
font: normal 14px Verdana;
}

And this is what the menu looks like now:

Again, let me explain some lines:

the text-decoration property overrides the default underlining for links
width: 1000px is perhaps the most important line. You need to set the links to approximately this width, maybe less, but definitely larger than the widest possible menu item. The links will not be 1000 pixels wide, since the width will be limited by the li menu item, whose width is set to auto, but this will make it possible to ensure that for any number of items in the menu it will always be 100 percent of the width.
vertical-align: middle and display: table-cell - the first will align the text vertically to the center, and the second will also display links as cells. Both properties are needed.
font - well, this is just a set of settings for the font. Read about css properties for fonts in this article.

Step 4 (optional) You can add interactivity

For example, so that the color of a menu item changes when hovered. This can be implemented quite simply, using the hover pseudo-class:

R-menu li:hover(
background-color: #6bba70;
}

Testing the menu for rubberiness

Great, the menus are ready, but we haven’t checked the most important thing - how rubbery it is, as I promised you. Well, I’ll add 2 more items to the menu:

The menu remains 600 pixels wide. The remaining items were simply shrunk a little to accommodate 2 new ones.

I'll add one more long point:

As you can see, the menu has shrunk a little more and the long item is displayed quite normally. And if it weren't for the vertical-align: bottom property that I told you about, the menu would look worse.

I'll reduce the menu to three items.

The items have become much freer, but the menu itself has not changed in width. So we made a 100% rubber menu!

How to adapt it?

In principle, if you set the wrapper block to a maximum width rather than a fixed one, then it doesn’t even need to be adapted. In my case, I have the max-width property: 600px and when the width becomes less than 600 pixels, the block will simply shrink along with the screen, without forming a horizontal scroll.

Well, if you want to somehow change or correct the menu on mobile devices or wide screens, then media queries will help you! Good luck in website building!

Good afternoon

It is often necessary to make a horizontal menu that will stretch across the entire width of the parent block, regardless of how many items it contains.

Today I would like to show you how to create just such a menu.

So our menu will be as follows:

It is stretched to the full width and stands out when hovered over. The menu is rounded on the sides.

HTML MARKUP

...

home

Interesting news

Another menu item!

To make the menu full width, I used tables with 100% width. Each table has a menu item div container. Depending on whether the first, last or intermediate menu item is a div, the corresponding class is assigned.

Each div container has 2 side borders with absolute positioning, which are necessary for correct display. If you use standard borders, then when you switch menu items, the text will jump by 1-2 pixels, which is good.

The active class is responsible for the selected menu item and highlights it.

In each item we have a picture and text. To ensure that all this is aligned strictly in the middle vertically, we use a table. Thanks to the vertical alignment property, our menu items will always be displayed smoothly and will not move away.

CSS RULES

First, let's set styles for the general display of the menu:

Menu_container ( padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; ) .menu_container td ( vertical-align: middle; /* vertical alignment */ ) .last_point_menu, .first_point_menu, .middle_point_menu ( width: 100%; height: 47px; border: 1px solid #dadbda; z-index: 1000; position: relative; border-left: none; ) .inner_table ( width: 100%; height: 100%; ) .inner_table td ( padding: 0px; vertical-align: middle; border: none; text-align: left; width: 150px; padding-left: 4px; ) .td.inner_table_title ( padding-top: 4px; font-weight: bold; ) .td.inner_table_img ( width: 40px!important; ) .inner_table_menu ( height: 100%; padding: 0px; vertical-align: middle; border: none; text-align: left; ) .inner_table_title ( padding-left: 10px; padding-right: 10px; text-transform: uppercase; line-height: 13px; ) .inner_table_menu td.inner_table_img ( width: 30px!important; height: 30px!important; padding-left: 15px; )

For beauty, let’s round the corners on the sides of the menu:

First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 1px solid #dadbda; ) .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border -bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px ; )

Now our menu has a more beautiful look:

So far, the first point does not have a left border. We'll fix it a little later.

Now let's add hover effects for the menu.

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( background-color: #CAE285; background-image: -moz-linear- gradient(top, #CAE285, #9FCB56); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); background-image: -webkit-linear -gradient(top, #CAE285, #9FCB56); background-image: -o-linear-gradient(top, #CAE285, #9FCB56); background-image: linear-gradient(to bottom, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; ) /* will work out borders on hover */ .first_point_menu ( border: 1px solid #dadbda; ) .first_point_menu:hover, .first_point_menu.active ( border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( border: 1px solid #dadbda; border-left: none; ) .last_point_menu:hover ( border: 1px solid #9FCB56; border-left: none; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: none; )

Now our menu looks much nicer, but for now we don’t have borders for the highlighted menu items. Let's fix this!

/* styles for side borders */ .borderLeftSecond, .borderRightSecond ( display: none; position: absolute; width: 1px; height: 47px; background-color: #9fbb62; top: 0px; z-index: 1000; ) /* absolute offsets for borders */ .borderLeftSecond ( left: 0px; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* handle the cases of the first and last item */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

That's all!

We got an excellent menu stretched across the entire width of the parent block! The items do not overlap each other when you hover the mouse and the layout does not jump.

We continue the series with a lesson on drop-down menus. Next up is a do-it-yourself horizontal drop-down menu using css.

If you got here by accident or you were looking for another implementation of the drop-down menu, I advise you to go to the parent section.

This section will describe a horizontal dropdown menu in CSS and HTML.

Page navigation:

So, our task:

make a horizontal menu with a drop-down list css (on ul li lists) without using jQuery and Javascript, and also without using tables

in the code.

Dropdown horizontal menu html

First of all, before we start writing code, we need to make an html template for the menu.

Due to the fact that we are making a universal menu, I want to make it as similar as possible to the WordPress menu output. In my opinion, this is one of the simplest and most versatile Html menu codes. It looks like this:

home
About Us
Our services
- Our service No. 1
- Our service No. 2
- Our service No. 3
- Our service No. 4
- Service 5
News
Contacts

As you can see from the code, our drop-down menu will be implemented on the ul and li lists. This is what the menu looks like without CSS styles:

Let's face it, it looks ugly, like a regular list. Next we need to decorate this menu using CSS styles.

Horizontal dropdown menu in CSS

CSS styles for drop-down menus and more are as necessary as air. After all, the drop-down tab is made based on the pseudo-class:hover.

For a horizontal drop-down menu we need the following styles:

#menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100 %; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul::after( display:block; width:100%; height:0px; clear:both; content:" "; ) # menu1 ul li( position:relative; display:block; float:left; width:auto; height:auto; ) #menu1 ul li a( display:block; padding:9px 25px 0px 25px; font-size:14px; font- family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; )

This is not the end yet, just part of the CSS for the main horizontal menu. Next we will write styles for the menu dropdown list:

#menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*this line implements drop-out mechanism*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; width: 100%; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a:hover( background:#FDDC96; color:#6572BC; )

That's it now. The drop-out mechanism itself is implemented in one line.

See the skin with this menu:

Rice. 2 (horizontal dropdown menu)

Below is a demo of how the drop-down menu works, as well as a link to download the sources. (The demo will be opened with a drop-down on top of this page, no need to click open in a new window 🙂 or the mouse wheel)

Full width horizontal dropdown menu

Most of you can reproach me, saying that such menus as I showed above are a hello from the past and in part you are right, although I have seen recent layouts with such menus.

I hope you downloaded the example above. Our Html remains the same, but we will change the CSS completely. You can simply take the CSS code from here and paste it into the downloaded example, or watch in demo mode how it works.

#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 ul li a( display:block; padding:9px 35px 0px 35px; font-size :14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left :0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/*the last item will be attached to the right edge*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this line implements the mechanism dropouts*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; width:100% ; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a:hover( background: #FDDC96; color:#6572BC; )

This example also differs from the first one in that the drop-down menu, the drop-down itself, stretches depending on the width of all menu items.

For very long menu items, this option may not be very convenient, since they will go beyond the limits. To disable this property, just find the property "white-space:nowrap;" at the selector #menu1 ul li ul, and delete it.

Below you can watch a demo or download the sources of the horizontal drop-down menu:

Without separators, this menu looks so-so. Separators can be added to HTML manually, but if you have a CMS, such as WordPress, then adding them manually is not very convenient.

Horizontal dropdown menu with dividers

There are several dozen options for adding a stripe (separator) between menu items using pure CSS. I will not duplicate the options that use::before or::after , or much simpler border-left, border-right.

There are situations when the layout is built so wonderfully that you can’t do without jquery.

Our HTML code remains the same, we just include the jQuery library and the file that uses it at the very beginning:

Right after .

As you understand, you need to create a file script-menu-3.js and add this little code there:

$(document).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));

The CSS styles for such a menu should be left as they are, + add this piece to the end:

#menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; )

A horizontal drop-down menu with delimiters in jQuery will look like this:

You can view in demo mode or download the horizontal menu template below:

The advantages of this solution are:

the menu will be drawn dynamically;
the indents from the separator to the paragraph are the same everywhere;
more beautiful and flexible design.

Horizontal Multi-Level Dropdown Menu CSS+HTML

Since we are talking about multi-level drop-down menus on hover, it’s probably worth dividing them into subgroups:

with a vip pad when pointing to the side

with a pop-up drop-down of the third level

In my examples I will show a multi-level CSS menu with 3 levels, then I think it will not be difficult to guess what needs to be done.

Multi-level drop-down menu with a sidebar on hover

First, we need to slightly correct our HTML. A couple of lines will be added there for level 3:

home
About Us
Our services
- Our service No. 1
  - Addition to service 1
  - Addition to service 2
- Our service No. 2
  - Addition to service 3
  - Addition to service 4
- Our service No. 3
- Our service No. 4
- Service 5
News
Contacts
- Road map
  - Map add-on
  - Addition for map 2
- Feedback form

#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3 em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a ( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:last-child > ul(/*the last item will be attached to the right edge*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*this line implements the drop-out mechanism*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border-box ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; ) #menu1 > ul > li:last-child > ul ul(left:auto; right:100%;) #menu1 ul li ul li ul a(color:#F38A01;)

We copy the files for jQuery as they were from the previous example. I decided to leave the dividers so that the menu would look at least a little better. Of course you can do it without them.

This is how it happened:
I made 2 skins in one to show how the drop looks on the right and in the middle.

Below you can watch a demo and download an example:

Multi-level drop-down menu with pop-up pad on hover

There's a little bit of oil in the title, but it'll work, the main thing is the code.

The essence of this example is to create a full-width horizontal drop-down menu with a full-width drop-down + multi-level.

I will not change the HTML code; it can be taken from the previous example. We also leave separators in jQuery.

Only the CSS will change completely:

#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 > ul > li(position:static;) #menu1 ul li.razd( height :28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans- serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; width:100%; height:0px; content:" "; ) #menu1 ul li:hover > ul(display:block;)/*this line implements the drop-out mechanism*/ #menu1 ul li ul li( display :block; width:30%; float:left; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; z-index:15; ) #menu1 ul li ul li ul li(display: block; float:none; width:100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px solid #ffffff; )

This is how the menu will look: The only point is that the site must have enough space, since the last item on the right does not have room for a drop-down. This problem can be solved using:nth-child, but I didn’t bother.

See demo of horizontal multi-level dropdown menu:

As you may have noticed: the bottom die is also full width. This is how drops in several blocks are made.

That's all for me, I hope at least one of my examples suits you. Thank you for your attention.

it will benefit both them and me :)

If you read the entire post, but did not find how to make your own horizontal drop-down menu in css, ask a question in the comments or use the site search.

Also, I advise you to visit the parent page https://site/vypadayushhee-menu/, all examples and types of drop-down menus are collected there.

A horizontal menu is a list of website sections, so it’s more logical to place 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, the html markup is given semantic meaning, and also provides an additional opportunity for formatting 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.

A fairly common layout for a site menu, when the container with it occupies the entire width available on the page. In this case, the first item is adjacent to the left edge, and the last one is adjacent to the right, and the distance between all elements is equal. Today we will tell you how this is done.

We offer you an example of implementing a rubber menu using CSS for your resource. In this menu, the items will be located on one line. Javascript will not be used. The contents of the menu will be enclosed in a regular list. The main feature of such a menu is its versatility, which is expressed in the fact that both the number and length of items can be any.

Each programmer can offer his own way of solving a given problem. It all depends on his imagination, level of professionalism and abilities. The most common solution to this problem is to use a table. Also, many would suggest using javascript. I hasten to disappoint those who would suggest using the display property with the value table or table-cell. This method is not sufficiently cross-browser compatible.

Our offering will be built on a solid foundation of HTML5 and CSS3 knowledge.

The essence of the process is based on the text-align property with the justify value. For those who have forgotten, I remind you: this property orients the text alignment across the entire width of the container.

When using our solution, two mandatory rules must be observed. The first is that the width of the menu item container should be smaller than the text. That is, not in one line. The second important rule is that words are stretched equally, regardless of whether they belong to the same point or not.

Below is code that serves as an example of creating a rubber menu:

HTML

< ul> < li>< a href= "#" >home< li>< a href= "#" >Blog< li>< a href= "#" >News< li>< a href= "#" >Popular< li>< a href= "#" >New items

ul ( text- align: justify; overflow: hidden; /* eliminates the side effects of the method */ height: 20px; /* also eliminates unnecessary */ cursor: default ; /* sets the initial shape of the cursor */ margin: 50px 100px 0 100px; background: #eee; padding: 5px; ) li ( display: inline; /* makes menu items text */ ) li a ( display: inline- block; /* eliminates word breaks in the menu */ color: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* forming the second line to work out the method */ content: "1" ; margin- left: 100 %; height: 1px; overflow: hidden; display: inline- block; )

To work in the good old Internet Explorer, you must additionally add the following code to the CSS

ul ( z- index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( margin-left: 100%; ) * html ul ( /* need ie6 only */ height: 30px; )

Having specified the necessary property values and code, we get this rubber menu:

Volume code
Inability to determine the active state of an element through a class selector. This occurs due to the break of words in paragraphs (if there is one). The solution to this problem is to add another container inside the list elements.
For the dropdown menu, you need to customize the code due to the negative impact of overflow .


6.0+	6.0+	10.5+	5.0+	3.6+	-	-

Seal

Also interesting:

Ivan Franko Lviv National University (LNU): admission, faculties and reviews

Elective course “Olympiad Informatics

Download Battleship for android v

We recommend reading:

2023-11-29 00:09:13

C get main arguments from function

2023-11-29 00:09:13

Deriving an expression for the orbital period of a planetary satellite

2023-11-29 00:09:13

Information security of automated systems Who is an information security specialist

Continuing the topic:

Internet

Geoinformation method presentation

Konovalova N.V., Kapralov E.G. Introduction to GIS. –M.: LLC “Biblion”, p. De Mers M., Geographical information systems. M.: “Data+”, Korolev Yu.K. General geoinformatics. -M.:...