Way One: Directly write code implementation
The effect is as follows:
The code is as follows:
Copy Code code as follows:
<title> Menu without table </title>
<style>
<!--
body{
Background-color: #ffdee0;
}
#navigation {
width:200px;
font-family:arial;
}
#navigation ul {
List-style-type:none; /* Do not display bullets * *
margin:0px;
padding:0px;
}
#navigation Li {
border-bottom:1px solid #ED9F9F; /* Add underline/*
}
#navigation Li a{
Display:block; /* Block Display * *
padding:5px 5px 5px 0.5em;
Text-decoration:none;
border-left:12px solid #711515; * * The thick red edge on the left/*
border-right:1px solid #711515; /* Right Shadow * *
width:175px; /* Xg_ also triggers CSS style effects outside of the hyperlink * *
}
#navigation li A:link, #navigation Li a:visited{
Background-color: #c11136;
Color: #FFFFFF;
}
#navigation Li a:hover{* * When the mouse passes by * *
Background-color: #990020; /* Change background color * *
Color: #ffff00; /* Change text color * *
}
-->
</style>
<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>
mode two: using jquery code to implement
The code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> telescopic menu, with toggle () rewrite </title>
<style>
<!--
body{
Background-color: #ffdee0;
}
#navigation {
width:200px;
font-family:arial;
}
#navigation > UL {
List-style-type:none; /* Do not display bullets * *
margin:0px;
padding:0px;
}
#navigation > Ul > li {
border-bottom:1px solid #ED9F9F; /* Add underline/*
}
#navigation > Ul > li > a{
Display:block; /* Block Display * *
padding:5px 5px 5px 0.5em;
Text-decoration:none;
border-left:12px solid #711515; * * The thick red edge on the left/*
border-right:1px solid #711515; /* Right Shadow * *
}
#navigation > Ul > li > A:link #navigation > Ul > li > a:visited{
Background-color: #c11136;
Color: #FFFFFF;
}
#navigation > Ul > li > a:hover{/* Mouse passing time * *
Background-color: #990020; /* Change background color * *
Color: #ffff00; /* Change text color * *
}
/* submenu CSS style * *
#navigation ul Li ul{
List-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation UL Li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul Li ul Li a{
Display:block;
padding:3px 3px 3px 0.5em;
Text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul Li ul Li A:link, #navigation ul Li ul Li a:visited{
Background-color: #e85070;
Color: #FFFFFF;
}
#navigation ul Li 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>
<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>
Note: The code must load the Jquery.min.js file, and the CSS that is written can only be displayed correctly in the Firefox browser.
