"CSS" flattened, supports IE6 navigation bar with block hyperlinks and navigation bar with drop-down menus that support IE8

Last in the "Bootstrap" navigation bar NavBar on the IE8 of Defects and solutions (click Open link) to recommend the navigation bar how to write,

This time without any framework, pure handwritten CSS, the original ecology, convenient for you to rewrite! Please consultation fee.

First, the navigation bar containing the hyperlink of a block, such as:

This thing personally think splicing in some of the gray screen under the main page navigation bar good

Or you can put it on some tab.

The code is as follows:

<div style= "width:70%; Text-align:center; Margin-left:auto; Margin-right:auto; border-top:1px solid #d4d4d4; " ><a href= "#" style= "Display:block; Float:left; border-right:1px solid #dddddd; Height:3em; width:120px; Text-align:center; Padding-top:1.5em; Text-decoration:none; font-family: Microsoft ya Black, Arial, song body; Background: #eeeeee; Color: #aaaaaa; " > button 1</a><a href= "#" style= "Display:block; Float:left; border-right:1px solid #dddddd; Height:3em; width:120px; Text-align:center; Padding-top:1.5em; Text-decoration:none; font-family: Microsoft ya Black, Arial, song body; Background: #eeeeee; Color: #aaaaaa; " > button 2</a></div>

First you want to define a large div to put these square block hyperlinks, this big Div, I define its width is 70, the content is centered, the center itself, these are not key attributes,

Key attribute a gray top border of only 1px long, which is the long #d4d4d4 Gray line that you see at the top of the bar.

After that is the hyperlink, where the hyperlink to show as blocky need to use the Display:block property, and then each hyperlink with Float:left side by side in a row, otherwise the Block property by default is a Div occupy a line, and then each block with a gray right border # DDDDDD, in fact, the same as the big Div color, with #d4d4d4 is no problem

The content is centered, set the upper padding 1.5em to the height of 3em half, so that it vertically centered, EM is a relative unit, this component can be changed according to the size of the browser size

Text-decoration:none is not the underline below the hyperlink

Then put the font in place,

Background for lighter grey #eeeeee

Text color darker point, for #aaaaaa, there is a sense of falling.

Second, then, to provide you with a support IE8 drop-down menu navigation bar

This drop-down menu is as follows, without scripting like JavaScript, purely CSS:

Hover appears link,

The original ecological, just in IE6 seems not to work.

The code is as follows:

<div style= "width:70%; Text-align:center; Margin-left:auto; Margin-right:auto; border-top:1px solid #d4d4d4; " ><style>.drop>.dropdown{Display:none;}. drop:hover>.dropdown{Display:block;} </style><div class= "Drop" style= "border-right:1px solid #dddddd; width:15%; Float:left; " > Drop-down menu 1 <div class= "dropdown" ><a href= "#" > Links 1</a><br/><a href= "#" > Links 2</a> <br/><a href= "#" > Links 3</a><br/><a href= "#" > Links 4</a><br/><a href= "#" > Link 5</a><br/><a href= "#" > Links 6</a><br/></div></div><div class= "Drop" Style= "border-right:1px solid #dddddd; width:15%; Float:left; " > Drop-down menu 2 <div class= "dropdown" ><a href= "#" > Links 1</a><br/><a href= "#" > Links 2</a> <br/><a href= "#" > Links 3</a><br/><a href= "#" > Links 4</a><br/><a href= "#" > Link 5</a><br/><a href= "#" > Links 6</a><bR/></div></div><div class= "Drop" style= "border-right:1px solid #dddddd; width:15%; Float:left; " > Drop-down menu 3 <div class= "dropdown" ><a href= "#" > Links 1</a><br/><a href= "#" > Links 2</a> <br/><a href= "#" > Links 3</a><br/><a href= "#" > Links 4</a><br/><a href= "#" > Link 5</a><br/><a href= "#" > Links 6</a><br/></div></div></div>

The core code is the <style><style> tag, which indicates that a div of class dropdown is displayed when the mouse hovers over the class drop DIV, otherwise it is not displayed

As a result, it has the above effect.

The rest of the style is the same as the Super link with the box.

Unfortunately in the IE6 support div hover effect, that pull-down menu like zombies do not move, online check data said to introduce CSSHOVER3.HTC file, but seems not to work, t^t, estimated to be compatible with jquery or JavaScript write, this thing

The IETester test is as follows:

"CSS" flattened, supports IE6 navigation bar with block hyperlinks and navigation bar with drop-down menus that support IE8