Navigation plays an important role in websites. In the table era, menus are displayed side by side using several TD files.
Now, we can use semantic tags, such as Li.
Menu 1:
<! 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/> * {margin: 0px; padding: 0px; font-family: verdana;} <br/> ul <br/>{< br/> list-style: none; <br/> font-size: 10px; <br/>}< br/> Li ul <br/>{< br/> display: none; <br/>}< br/> # nav LI <br/>{< br/> text-align: center; <br/> margin: 3px; <br/> width: 100px; <br/> border: solid 1px # CCC; <br/> position: relative; <br/> padding: 6px; <br/> display: block; <br/>}< br/> # nav Li ul {position: absolute; top:-4px; left: margin PX ;} <br/> # nav Li ul LI <br/> {<br/> padding: 5px 6px 5px 5px; <br/>}< br/> # nav Li ul Li a <br/>{< br/> display: block; <br/> width: 100px; <br/> text-Decoration: none; <br/> border: solid 1px # FFF; <br/>}< br/> # nav Li: hover <br/> {<br/> Background: # efefef; <br/> border: solid 1px # CCC; <br/> text-indent: 30%; <br/>}< br/> # nav Li: hover ul, # nav Li. over ul <br/>{< br/> display: block; <br/> border: none; <br/>}< br/> </style> <br/> <SCRIPT type = "text/JavaScript"> <br/> var A = function () <br/>{< br/> var nav = document. getelementbyid ('nav'); <br/> var Lis = nav. childnodes; <br/> for (VAR I = 0; I <Lis. length; I ++) <br/>{< br/> If (LIS [I]. nodename = 'lil') <br/>{< br/> var childli = Lis [I]; <br/> childli. onmouseover = function () {This. classname = 'over';} <br/> childli. onmouseout = function () {This. classname = '';}< br/>}< br/> window. onload =; <br/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <ul id = "nav"> <br/> <LI> link <br/> <ul> <br/> <li> <a href = "#1"> link </a> </LI> <br/> </ul> <br/> </LI> <br/> <li> link <br/> <ul> <br/> <li> <a href = "#1 "> link </a> </LI> <br/> <li> <a href =" #1 "> link </a> </LI> <br/> </ul> <br/> </LI> <br/> <li> link <br/> <ul> <br/> <li> <a href = "# 1 "> link </a> </LI> <br/> <li> <a href =" #1 "> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> </ul> <br/> </LI> <br /> <li> link <br/> <ul> <br/> <li> <a href = "#1"> link </a> </LI> <br /> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> Link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> </ul> <br/> </LI> <br/> <li> link <br/> <ul> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> </ul> <br/> </LI> <br/> </ul> <br/> </body> <br/> </ptml> <br/>
List-style: none; remove the list symbol
# It is important that UL under nav Li should be absolutely positioned based on Li.
Because IE does not support # nav Li: hover ul, a simple JS is written for implementation. The purpose is to add a Mouseover and mouseout event to # nav Li,
Dynamically change its cssname.
Menu 2:
<! 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/> * {margin: 0px; padding: 0px; font-family: verdana;} <br/> ul <br/>{< br/> list-style: none; <br/> font-size: 10px; <br/>}< br/> Li ul <br/>{< br/> display: none; <br/>}< br/> # nav <br/>{< br/> width: 700px; <br/>}< br/> # nav LI <br/>{< br/> float: Left; <br/> width: 100px; <br/> text-align: center; <br/> margin: 3px; <br/> border: solid 1px #003399; <br/> cursor: help; <br/> padding: 6px; <br/>}< br/> # nav Li ul LI <br/>{< br/> border: none; <br/> padding: 0; <br/> margin: 0px; <br/>}< br/> # nav Li ul Li a <br/>{< br/> text-Decoration: none; <br/> display: block; <br/> margin: 1px; <br/> padding: 6px 0px; <br/> width: 97px; <br/>}< br/> # nav Li ul Li A: hover <br/>{< br/> Background: # efefef; <br/> border: solid 1px # CCC; <br/> margin: 0px; <br/>}< br/> # nav Li: hover ul, # nav Li. over ul <br/>{< br/> display: block; <br/> border: none; <br/>}< br/> </style> <br/> <SCRIPT type = "text/JavaScript"> <br/> var A = function () <br/>{< br/> var nav = document. getelementbyid ('nav'); <br/> var Lis = nav. childnodes; <br/> for (VAR I = 0; I <Lis. length; I ++) <br/>{< br/> If (LIS [I]. nodename = 'lil') <br/>{< br/> var childli = Lis [I]; <br/> childli. onmouseover = function () {This. classname = 'over';} <br/> childli. onmouseout = function () {This. classname = '';}< br/>}< br/> window. onload =; <br/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <ul id = "nav"> <br/> <LI> link <br/> <ul> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <LI> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> </ul> <br/> </LI> <br/> <li> link <br/> <ul> <br/> <li> <pref = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </Li> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1 "> link </a> </LI> <br/> <li> <a href =" #1 "> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> </ul> <br/> </LI> <br/> <li> link <br/> <ul> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </A> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </ LI> <br/> </ul> <br/> </LI> <br/> <li> link <br/> <ul> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href =" #1 "> link </a> </LI> <br/> <li> <a href =" #1 "> link </a> </LI> <br /> <li> <a href = "#1"> link </a> </LI> <br/> </ul> <br/> </LI> <br/> <li> link <br/> <ul> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> </ul> <br/> </body> <br/> </ptml> <br/>
These two simple menus are mainly about the understanding of the box model. At first, I was confused by box. Pay attention to margin, padding, and border.
Source: http://www.lemongtree.com/Archives/css_menu.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
