មេរៀនទី១៣: Drop Down Menu – CSS

 

មេរៀនទី១៣: បង្កើត Drop Down Menu – CSS  

11- HTML1

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

2- HTML2

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>

</title>

</head>

<body>

<nav>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Tutorials</a>

<ul>

<li><a href=”#”>Photoshop</a></li>

<li><a href=”#”>Illustrator</a></li>

<li><a href=”#”>Web Design</a>

<ul>

<li><a href=”#”>HTML</a></li>

<li><a href=”#”>CSS</a></li>

</ul>

</li>

</ul>

</li>

<li><a href=”#”>Articles</a>

<ul>

<li><a href=”#”>Web Design</a></li>

<li><a href=”#”>User Experience</a></li>

</ul>

</li>

<li><a href=”#”>Inspiration</a></li>

</ul>

</nav>

</body>

</html>

Web IT2 copy

2.  CSS3

<style>

/*css1*/

nav ul ul {

display: none;

}

nav ul li:hover > ul {

display: block;

}

/*css2*/

nav ul {

background: #efefef;

background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);

box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

padding: 0 20px;

border-radius: 10px;

list-style: none;

position: relative;

display: inline-table;

}

nav ul:after {

content: “”;

clear: both;

display: block;

}

/*css3*/

nav ul li {

float: left;

}

nav ul li:hover {

background: #4b545f;

background: linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);

}

nav ul li:hover a {

color: #fff;

}

nav ul li a {

display: block; padding: 20px 20px;

color: #757575; text-decoration: none;

}

body

{

background-color:#999999;

}

</style>
1

3. CSS4

<style>

/*css1*/

nav ul ul {

display: none;

}

nav ul li:hover > ul {

display: block;

}

/*css2*/

nav ul {

background: #efefef;

background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);

box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

padding: 0 20px;

border-radius: 10px;

list-style: none;

position: relative;

display: inline-table;

}

nav ul:after {

content: “”;

clear: both;

display: block;

}

/*css3*/

nav ul li {

float: left;

}

nav ul li:hover {

background: #4b545f;

background: linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);

}

nav ul li:hover a {

color: #fff;

}

nav ul li a {

display: block; padding: 20px 20px;

color: #757575; text-decoration: none;

}

body

{

background-color:#999999;

}

 

/*css4*/

nav ul ul {

background: #5f6975; border-radius: 0px; padding: 0;

position: absolute; top: 100%;

}

nav ul ul li {

float: none;

border-top: 1px solid #6b727c;

border-bottom: 1px solid #575f6a;

position: relative;

}

nav ul ul li a {

padding: 15px 40px;

color: #fff;

}

nav ul ul li a:hover {

background: #4b545f;

}

</style>
1

4. CSS5

<style>

/*css1*/

nav ul ul {

display: none;

}

 

nav ul li:hover > ul {

display: block;

}

/*css2*/

nav ul {

background: #efefef;

background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);

box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

padding: 0 20px;

border-radius: 10px;

list-style: none;

position: relative;

display: inline-table;

}

nav ul:after {

content: “”;

clear: both;

display: block;

}

/*css3*/

nav ul li {

float: left;

}

nav ul li:hover {

background: #4b545f;

background: linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);

}

nav ul li:hover a {

color: #fff;

}

nav ul li a {

display: block; padding: 20px 20px;

color: #757575; text-decoration: none;

}

body

{

background-color:#999999;

}

/*css4*/

nav ul ul {

background: #5f6975; border-radius: 0px; padding: 0;

position: absolute; top: 100%;

}

nav ul ul li {

float: none;

border-top: 1px solid #6b727c;

border-bottom: 1px solid #575f6a;

position: relative;

}

nav ul ul li a {

padding: 15px 40px;

color: #fff;

}

nav ul ul li a:hover {

background: #4b545f;

}

/ *css5*/

nav ul ul ul {

position: absolute; left: 100%; top:0;

}

</style>
1