Create Pop Up Menu

for Create pop up menu we need "CSS Script" and "HTML Script".
for the first we create CSS file, with extention ".css e.g (filename.css)

content of the CSSfile is like this :

#menu {
	width:100%;
	height:36px;
	background:#000000;
}

#menu a.selected{
     text-align: center;
     display: block;
     white-space: nowrap;
     margin-right: 3px;
     padding-top:8px;
     height:28px;
     width:150px;
     border: 1px solid brown;
     background: #000000;
}

#menu a{
     text-align: center;
     display: block;
     white-space: nowrap;
     margin-right: 3px;
     padding-top:8px;
     width:150px;
     color: #0000ff;
     text-decoration:none;
     font-size:16px;
     border: 1px solid brown;
     height:28px;
/*IE 7*/
}

#menu a:hover /* mouse-over  */{
     color: #ff0000;
     text-decoration: none;
     background-color: #ffffff;
     width:150px;
}
	
#menu li{
     position: relative;
     min-height: 1px; 	/*IE7 */
     vertical-align: bottom; /* IE7 */
     padding-left: 0px;
     padding-right: 0px;
     font-weight: bold;
}

#menu ul ul a:link, #menu ul ul a:visited, #menu ul ul a:active {
     background: #ffffff;
     color: #0000ff;
     border-bottom: 1px solid #c3c9d5;
     border-left: 1px solid #c3c9d5;
     border-right: 1px solid #d7deea;
     margin-right: 5px;
     height:20px;
     font-weight:bold;
     font-size:12px;
     padding:0 0 0 5px;
     text-align:left;
     vertical-align: middle;
     width:150px;
}

#menu ul ul a:hover {
     background: #000000;
     color: #ff0000;
     margin-right: 5px;
     width:150px;
}

#menu ul{
     list-style: none;
     margin: 0;
     padding: 0;
     float: left;
}

#menu ul ul{
     position: absolute;
     z-index: 500;
     top: 30px;
     display: none;
     padding: 0.3em;
     margin: 0.2em 0 0 -0.4em;
     width:170px;
}

div#menu li:hover{
     cursor: pointer;
     z-index: 100;
}

div#menu li:hover ul ul, div#menu li li:hover ul ul {
     display: none;
}

div#menu li:hover ul, div#menu li li:hover ul{
     display: block;
}

Nb :

if you're XTgem user, create CSS file but at TEXT mode. I mean is when you create a file, you have option to create HTML file, XHTML file and TEXT file. You must choose TEXT option

How it work ?

Create HTML file, insert this code before tag <head> but before tag </head>
the code is like this :

<link href="http://your site addres/filename.css" rel="stylesheet" type="text/css" />

and now, we edit this file
after tag <body but before tag </body>

we call the CSS which has we create with <div id="menu>menu content in here</div>

example all code is like this :

it will be like this :