Horizontal submenu html. Simple cross-browser horizontal menu

It’s rare to see horizontal menus on a website that drop down when you hover the mouse, but they are very beautiful and functional. Or as they say - usable. Today we will create a usable horizontal drop-down menu using pure CSS code. I have often noticed that people use javascript to achieve this effect. In fact, everything can be done only with CSS. Let's look at two options for drop-down horizontal menus using CSS. It's good to have a choice, I think you agree.

If you need a simple horizontal menu. Reading the article about creation. Once you've mastered the basics, start creating a drop-down menu.

For clarity, see the screenshot below. You are probably familiar with this horizontal menu structure.

For even greater clarity, let's look at the HTML structure of the menu. Let’s make sure what exactly achieved the horizontal position of the menu and its validity. Menu css structure:

Showing and hiding menu children is done using CSS: ul > li:hover ul. That is quite simple. This switch allows you to define the behavior of all child menus. When creating a regular horizontal menu, in addition to display:block we add other styles, such as background color, etc. The only difference between a regular menu and a dropdown menu is that we don't style the nested ULs. You need to place it on the dependent LI element, which is hovered (UL > LI: hover).

Let's look at the CSS code:

#header ( height:120px; position:relative; background: transparent url(header_bkg.png) repeat-x scroll top center;) #nav ( margin:0px; padding:0px; position:absolute; top: 70px; display:block ;) #nav > li ( list-style-type:none; float:left; display:block; margin:0px 10px; position:relative; padding:10px; width:100px;) #nav > li:hover ul ( display :block; ) #nav > li:hover ( background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; ) #nav li ul ( margin:0px; padding:0px; display:none;) #nav li ul li ( list-style-type:none; margin:10px 0 0 0;) #nav li ul li a ( display:block; padding:5px 10px; color:#A2E200; text- decoration:none;) #nav li ul li:hover a ( background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;) #nav li span ( cursor:pointer; margin :0px 10px; font-weight:bold;

Here's how to do it using pure CSS code. I still can’t figure out why I should use JavaScript, except maybe for .

Please note that option 1 will not work in IE6. The solution to compatibility of the menu with IE6 will be a piece of js code. More to the point, let's create a menu. Below is a screenshot of the future menu:

The menu design is similar to the first version, so let's move on to the code itself.

• Point No. 1
• Point No. 2
  • Sub-item No. 1
  • Sub-item No. 2
  • Sub-item No. 3
• Point No. 3
  • Sub-item No. 1
  • Sub-item No. 2
  • Sub-item No. 3
  • Sub-item No. 4
  • Sub-item No. 5
• Point No. 4
  • Sub-item No. 1
• Point No. 5
  • Sub-item No. 1
  • Sub-item No. 2
  • Sub-item No. 3
  • Sub-item No. 4
  • Sub-item No. 5

#menu ( padding: 0; margin: 0; font-size: 100%; font-family: Georgia; ) #menu li ( list-style: none; float: left; height: 33px; padding: 0; margin: 0 ; width: 150px; text-align: background: #171717; position: relative padding-top: 12px; display: none; position: absolute; left: 0; top: 45px; ) #menu li ul li ( float: none; margin: 0; width: 150px; text-align: center; background: #7F7F7F; ) #menu li a ( display: block; width: 150px; height: 33px; color: #fff; text-decoration: none; ) #menu li:hover ul, #menu li.jshover ul ( display: block; ) # menu li:hover, #menu li.jshover ( background: #424242; )

JS - solution for IE6

jsHover = function() ( var hEls = document.getElementById("menu").getElementsByTagName("li"); for (var i=0, len=hEls.length; i

All tags after this (and other tags related to HTML5) will be perceived normally by older browsers.

Let's return directly to our markup. Next, we need to insert a bulleted list into our tag, for me it looks like this:

• home
• About Us
• Portfolio
• Blog
• Contacts

So, we seem to have finished with the markup, it’s time to start writing styles, since now our menu doesn’t look very good, to put it mildly:

And so, the first thing we need to do when laying out the menu is to remove the list markers, we obviously don’t need them, we do it like this:

Ul( list-style:none; )

After this our menu will look like this:

I don't really like how our menu is stuck to the edges of the browser, let's fix that:

With this code, we set the width of our menu, gave it 50px top and bottom margins, and positioned it in the center. Who knows, if a block element has a width, then in order to position this element strictly in the center we just need to give it an external margin (margin) on the right and left with the value auto.

The next step is to finally make our menu horizontal; this is done by setting the elements