<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <! -- Define the transitional doctype -->
<HTML xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312"> <! -- Define namespace -->
<Head> <! -- Start the webpage header -->
<Title> webpage layout + pure CSS vertical drop-down menu </title> <! -- Title bar -->
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/> <! -- Define language encoding -->
<Meta http-equiv = "content-language" content = "gb2312"/> <! -- Define language encoding for old browsers -->
<Meta content = "all" name = "Robots"/> <! -- Allow robot searching -->
<Meta name = "author" content = "7273771@gmail.com, Yang xiaozi, QQ: 7273771"/> <! -- Author information -->
<Meta name = "Copyright" content = "blog.529600.com"/> <! -- Copyright information -->
<Meta name = "Description" content = "drop-down menu, CSS, layout"/> <! -- Introduction -->
<Meta content = "drop-down list, menu, CSS, layout" name = "keywords"/> <! -- Keyword -->
<! -- CSS style start -->
<Style type = text/CSS>
*{
Margin: 0;
Padding: 0;
Border: 0;
}
HTML {
Background: # bfc4c7;/* Background Color */
}
Body {
Font: 12px/150% 'body ';
Margin: 0 auto;
Width: 770px;
Text-align: center;
}
# Menu, # Nav, # footer {
Clear: both;
}
# Nav {
Padding-left: 20px;
Text-align: left;
Background: # A60;
}
# Footer {
Background: # A30;
}
# Logo, # Banner, # mail, # Left, # Middle, # right {
Float: left;
Width: 180px;
Background: # f00;
}
# Logo, # Banner, # mail {
Height: 60px;
}
# Banner {
Width: 468px;
Background: # f60;
}
# Mail {
Width: 122px;
Background: # f90;
}
# Left, # right {
Width: 200px;
}
# Left {
Background: #093;
}
# Middle {
Width: 370px;
Background: #063;
}
# Right {
Background: #033;
}
/* Menu part */
# Menu {
Margin: 0 auto;
Width: 770px! Important;
Clear: Both
}
# Menu ul {
List-style: none;
}
# Menu Li {
Float: left;
Position: relative;
}
# Menu ul {
Visibility: hidden;
Position: absolute;
Left: 0px;
Top: 30px;
}
# Menu table {
Position: absolute;
Left: 0;
Top: 0;
}
# Menu ul Li: hover ul, # menu ul a: hover ul {
Visibility: visible;
}
# Menu {
Display: block;
Text-align: center;
Text-Decoration: none;
Width: 77px;
Height: 30px;
Color: #000;
Line-Height: 30px;
Background: # c9c9a7;
}
# Menu A: hover {
Color: # FFF;
Background: # b3ab79;
}
# Menu ul Li {
Clear: both;
Text-align: left;
}
# Menu ul Li {
Display: block;
Width: 77px;
Height: 30px;
Background: # faeec7;
Color: #000;
}
# Menu ul Li A: hover {
Background: # dfc184;
Color: #000;
}
</Style> <! -- CSS style ends -->
</Head> <! -- Webpage header end -->
<Body> <! -- Start the webpage subject -->
<Div id = "menu">
<Ul>
<Li>
<A href = ""> Category 1 <! -- [If IE 7]> <! --> </A> <! -- <! [Endif] --> <! -- [If lte ie 6]>
<Table>
<Tr>
<TD> <! [Endif] -->
<Ul>
<Li> <a href = ""> XHTML </a> </LI>
<Li> <a href = ""> CSS </a> </LI>
<Li> <a href = ""> php </a> </LI>
<Li> <a href = ""> mysql </a> </LI>
<Li> <a href = ""> fireworks </a> </LI>
<Li> <a href = ""> Photoshop </a> </LI>
<Li> <a href = ""> flash </a> </LI>
<Li> <a href = ""> illustrator </a> </LI>
</Ul> <! -- [If lte ie 6]>
</TD>
</Tr>
</Table>
</A> <! [Endif] -->
</LI>
</Ul>
</Div>
</Body> <! -- Ends the webpage subject -->
</Html>