After a simple horizontal, vertical, and secondary menu, start the "Sliding Door" tour.
(I borrowed an image from Alibaba Cloud website)
The idea is to use unordered list ul for implementation.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> new document </title> <br/> <meta name = "generator" content = "editplus"/> <br/> <meta name = "author" content = ""/> <br/> <meta name = "keywords" content = ""/> <br/> <meta name = "Description" content =" "/> <br/> <style type =" text/CSS "> <br/> # nav <br/> {<br/> padding: 10px 0 0 46px; <br/> margin: 0px; <br/> width: 80%; <br/> list-style: none; <br/> Height: 26px; <br/> border-bottom: solid 1px #690; <br/>}< br/> # nav LI <br/>{< br/> float: left; <br/> margin-Right: 6px; <br/> padding: 0px; <br/> display: block; <br/> Height: 25px; <br/> width: 80px; <br/> border: 1px solid #690; <br/> border-bottom: none; <br/> line-Height: 25px; <br/>}< br/> # nav A <br/>{< br/> Height: 25px; <br/> width: 80px; <br/> font-family: verdana; <br/> display: block; <br/> color: #333; <br/> text-Decoration: none; <br/> text-align: center; <br/> Background: # f9e9a9; <br/> font-size: 12px; <br/>}< br/> # nav Li. active <br/> {<br/> Background: white; <br/> padding-bottom: 5px; <br/>}< br/> # nav Li: hover, # nav Li. over a <br/> {<br/> Background: white; <br/> padding-bottom: 2px; <br/> position: absolute; <br/>}< br/> </style> <br/> <SCRIPT type = "text/JavaScript"> <br/> var init = function () <br/>{< br/> var nav = document. getelementbyid ('nav'); <br/> var Childs = nav. childnodes; <br/> for (VAR I = 0; I <Childs. length; I ++) <br/>{< br/> If (Childs [I]. nodename = "Li") <br/>{< br/> Childs [I]. onmouseover = function () {This. classname = 'over';} <br/> Childs [I]. onmouseout = function () {This. classname = '';}< br/>}< br/> window. onload = Init; <br/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <ul id = "nav"> <br/> <li id = "1"> <a href = "#1"> AAA </a> </LI> <br/> <li> <a href = "#1"> AAA </a> </LI> <br/> <li> <a href = "#1"> AAA </a> </LI> <br/> <LI> <a href = "#1"> AAA </a> </LI> <br/> <li> <a href = "#1"> AAA </> </LI> <br/> <li> <a href = "#1"> AAA </a> </LI> <br/> </ul> <br /> </body> <br/> </ptml> <br/>
Each Li sets the border attribute, except for the bottom, because the bottom line needs UL's border-bottom to process it.
Because of horizontal display, Li needs float: left;
Then, after Li executes float: Left, UL cannot determine its own height, so you need to specify a height:
# Nav
{
Padding: 10px 0 0 46px;
Margin: 0px;
Width: 80%;
List-style: none;
Height: 26px;/* It must be specified here */
Border-bottom: solid 1px #690;/* set the bottom line */
}
Due to the difference between IE and Firefox, you must specify the width/height values of both Li and Li.
I didn't expect such a small stuff, but it was so annoying t_t
In addition, the CSS selector will also be dizzy for beginners.
Reference from: http://www.cnblogs.com/adandelion/archive/2007/05/23/757141.html
(1). AA {} indicates a pseudo class, and class = "AA" is used"
(2) Table {} indicates setting the default style for the table
(3) when using the table. Table1 {} table style, class = "Table1" in the <Table> element is not available in other HTML tags.
(4) Div # When the DIV whose search ID is "Search" is used to set the style, this Div does not need to set the class attribute.
(5) Div # headtop Li indicates to set the style for the <li> element in the DIV whose ID is headtop. This element does not need to set the class attribute.
(6) Div # headtop Li. Left indicates to set the style for the <li> element of class = "Left" in the DIV whose ID is headtop.
(7 ). rightcontent Li ,. rightcontent H3 A {color: #1f3a87;} indicates that <A> set the color attribute in <li> of the element of class = "rightcontent;
The color attribute of <A> in (8). rightcontent. thetip {clear: Both; padding: 9px 0 0;} indicates to set the style for class = "thetip" in the sub-element in calss = "rightcontent.
(9) Div # Head ul # globalnav Div. navall Li: hover {} indicates that the style of A is set for the Li element in the DIV element whose ID is head and whose ID is UL in globalnav and whose ID is navall.
(10) # listpathlinks ul {float: Left;} indicates that the ID is the UL element in listpathlinks to set the style.
(11) # dl_centerlist {} indicates to set the style for the element id = "dl_centerlist"
(12) Difference between Div # dl_centerlist and # dl_centerlist: The DIV element specifies id = "dl_centerlis ";
If "Div # dl_centerlist" exists, the style takes effect. Otherwise, the style of # dl_centerlist takes effect.
Source: http://www.lemongtree.com/Archives/733.aspx
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
