Method 1: directly write the code for implementation
The effect is as follows:
The Code is as follows:
Copy codeThe Code is as follows: <Head>
<Title> no table menus required </title>
<Style>
<! --
Body {
Background-color: # ffdee0;
}
# Navigation {
Width: 200px;
Font-family: Arial;
}
# Navigation ul {
List-style-type: none;/* do not display the project symbol */
Margin: 0px;
Padding: 0px;
}
# Navigation li {
Border-bottom: 1px solid # ED9F9F;/* Add underline */
}
# Navigation li {
Display: block;/* block display */
Padding: 5px 5px 5px 0.5em;
Text-decoration: none;
Border-left: 12px solid #711515;/* rough red edge on the left */
Border-right: 1px solid #711515;/* shadow on the right */
Width: 175px;/* other than the xg _ hyperjoin also triggers the CSS style effect */
}
# Navigation li a: link, # navigation li a: visited {
Background-color: # c11136;
Color: # FFFFFF;
}
# Navigation li a: hover {/* When the mouse passes */
Background-color: #990020;/* change the background color */
Color: # ffff00;/* change the text color */
}
-->
</Style>
</Head>
<Body>
<Div id = "navigation">
<Ul>
<Li> <a href = "#"> Home </a> </li>
<Li> <a href = "#"> News </a> </li>
<Li> <a href = "#"> Sports </a> </li>
<Li> <a href = "#"> Weather </a> </li>
<Li> <a href = "#"> Contact Me </a> </li>
</Ul>
</Div>
</Body>
</Html>
Method 2: implement with jQuery code
The Code is as follows:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html>
<Head>
<Title> scaling menu, rewritten with toggle () </title>
<Style>
<! --
Body {
Background-color: # ffdee0;
}
# Navigation {
Width: 200px;
Font-family: Arial;
}
# Navigation> ul {
List-style-type: none;/* do not display the project symbol */
Margin: 0px;
Padding: 0px;
}
# Navigation> ul> li {
Border-bottom: 1px solid # ED9F9F;/* Add underline */
}
# Navigation> ul> li> {
Display: block;/* block display */
Padding: 5px 5px 5px 0.5em;
Text-decoration: none;
Border-left: 12px solid #711515;/* rough red edge on the left */
Border-right: 1px solid #711515;/* shadow on the right */
}
# Navigation> ul> li> a: link, # navigation> ul> li> a: visited {
Background-color: # c11136;
Color: # FFFFFF;
}
# Navigation> ul> li> a: hover {/* When the mouse passes */
Background-color: #990020;/* change the background color */
Color: # ffff00;/* change the text color */
}
/* Submenu CSS style */
# Navigation ul li ul {
List-style-type: none;
Margin: 0px;
Padding: 0px 0px 0px 0px;
}
# Navigation ul li {
Border-top: 1px solid # ED9F9F;
}
# Navigation ul li {
Display: block;
Padding: 3px 3px 3px 0.5em;
Text-decoration: none;
Border-left: 28px solid # a71f1f;
Border-right: 1px solid #711515;
}
# Navigation ul li a: link, # navigation ul li a: visited {
Background-color: # e85070;
Color: # FFFFFF;
}
# Navigation ul li a: hover {
Background-color: # c2425d;
Color: # ffff00;
}
-->
</Style>
<Script language = "javascript" src = "jquery. min. js"> </script>
<Script language = "javascript">
$ (Function (){
$ ("Li"). find ("ul"). prev (). click (function (){
$ (This). next (). toggle ();
});
$ ("Li: has (ul)"). find ("ul"). hide ();
});
</Script>
</Head>
<Body>
<Div id = "navigation">
<Ul id = "listUL">
<Li> <a href = "#"> Home </a> </li>
<Li> <a href = "#"> News </a>
<Ul>
<Li> <a href = "#"> Lastest News </a> </li>
<Li> <a href = "#"> All News </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Sports </a>
<Ul>
<Li> <a href = "#"> Basketball </a> </li>
<Li> <a href = "#"> Football </a> </li>
<Li> <a href = "#"> Volleyball </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Weather </a>
<Ul>
<Li> <a href = "#"> Today's Weather </a> </li>
<Li> <a href = "#"> Forecast </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Contact Me </a> </li>
</Ul>
</Div>
</Body>
</Html>
Note: The code must load the jquery. min. js file, and the written CSS can only be normally displayed in the Firefox browser.