basmak03.tr.gg

cssmenu

CSS Akordiyon menü 1

<title>CSS3 Accordion</title>
<style type=text/css>/*  
CSS3 Horizontal Accordion Theme 1
Version: 1.0
Author: Webarti
Author URL: http://www.webarti.com/
*/

/*********** Theme Styles ***********/
.accordion  {
	font-family: Arial, Helvetica, sans-serif;
	border-right:1px solid #CCCCCC;
}

.accordion>ul>li>a {
	-moz-box-shadow:inset 1px 0px 0px 0px #787178;
	-webkit-box-shadow:inset 1px 0px 0px 0px #787178;
	box-shadow:inset 1px 0px 0px 0px #787178;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6b666b, endColorstr=#575257);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #6b666b), color-stop(1, #575257) );
	background: -moz-linear-gradient( center top, #6b666b 5%, #575257 100%);
	background-color:#6b666b;
	border-style:solid;
	border-color:#423d42;
	color:#ebe4eb;
	font-size:15px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:-1px -1px 0px #000000;
}

.accordion>ul>li>a:hover{
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b666b', endColorstr='#333033');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #6b666b), color-stop(1, #333033) );
	background:-moz-linear-gradient( center top, #6b666b 5%, #333033 100% );
	color:#fff;
}

.accordion>ul>li>div {
	background-color:#ededed;
	border-style:solid;
	border-color:#ccc;
}

/******** Theme Structure *********/
.accordion>ul>li>div {
	border-width:1px 0;
	height:200px;
	padding:10px;
	width:580px;
}

.accordion>ul>li>a {
	border-width:0 1px 0 0;
	width:40px;
}

ul.accordion-ie>li>a >span { /* IE only */
	margin-left:10px;
	/* This value is  necessary for centering rotated texts in Internet Explorer. */
}

.accordion  {	
	width:764px;
	/* 	This value refers to the total width of visible components
		width = accordion>ul>li>div ( width + paddingRight + paddingLeft )  
			+ accordion>ul>li>a ( number of accordions x ( width + borderRrightWidth ) )  
		width = ( 580px + 10px + 10px ) + ( 4 x ( 40px +1px ) )
		width = 764px
	*/
}

.accordion, .accordion>ul>li>a  {	
	height:222px;
	/* 	This value refers to the total height of visible area
		height = accordion>ul>li>div ( height + paddingTop + paddingBottom + borderTopWidth + borderBottomWidth ) 
		width = ( 200px + 10px + 10px + 1px +1px )
		width = 222px
	*/
}

.accordion>ul>li {
	margin-right:-600px; 
	/* 	This value refers to the negative of total width of content <div>
		margin-right = accordion>ul>li>div (width + padding-right + padding-left)
		margin-right = 580px + 10px + 10px 
		margin-right = 600px
	*/
	
	width:641px;
	/* 	width = .accordion>ul>li>div (width + padding-right + padding-left) 
				+ .accordion>ul>li>a ( width + borderRrightWidth )
		width = 580px + 10px + 10px + 40 + 1
		width = 641px
	*/
	
	/* Transition Effect */
	transition: margin-right 0.6s ease 0.2s;
    -moz-transition: margin-right 0.6s ease 0.2s;
    -webkit-transition: margin-right 0.6s ease 0.2s;
    -o-transition: margin-right 0.6s ease 0.2s;
}

/*******  Do not change folllowing properties  **********/
.accordion {overflow:hidden;}
.accordion>ul {margin:0;padding:0;list-style:none;width:9999em;}
.accordion>ul>li {float:left;overflow:hidden;}
.accordion>ul>li>a {float:left;margin:0;position:relative;z-index:1;-moz-outline-style:none;outline:none;}
.accordion>ul>li>a>span{ /* Text Rotation for all browsers */
	-moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
	-ms-writing-mode:lr-bt;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	bottom:20px;display:block;position:absolute;width:100%;white-space:nowrap;
}
ul.accordion-ie>li>a>span {cursor:pointer;width:auto;} /* IE only */
.accordion>ul>li>div {float:left;overflow-y:auto;overflow-x:hidden;}
.accordion>ul>li:hover {margin-right:0px;}
ul.accordion-ie>li:hover {margin-right:0px;} /* IE only */</style>
</head>
<body>

<div class="accordion">
	
	<ul>
				<li>	
					<a href="##"><span>başlık 1</span></a>
					<div>
						başlık 1 in alanı
					</div>
				</li>
				<li>
					<a href="##"><span>başlık 2</span></a>
					<div>
						başlık 2 nin alanı
					</div>
				</li>
				<li>
					<a href="##"><span>başlık 3</span></a>
					<div>
						başlık 3 ün alanı
					</div>
				</li>
				<li>
					<a href="##"><span>başlık 4</span></a>
					<div>
						başlık 4 ün alanı
					</div>
				</li>
			</ul>
		</div>

CSS Akordiyon menü 2

Önizlemeyi gör

<title>CSS3 Horizontal Accordion</title>
<style type="text/css">/*  
CSS3 Horizontal Accordion Slider Theme 2
Version: 1.0
Author: Webarti
Author URL: http://www.webarti.com/
*/

/*********** Theme Styles ***********/
.accordion  {
	font-family:Times News Roman;
	font-size:15px;
}

.accordion>ul>li {
	background-color:#FFFFFF; 
}

.accordion>ul>li>a {
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	background-color:#000000;
	color:#FAFAFA;
	font-size:17px;
	font-weight:bold;
	letter-spacing:2px;
	text-decoration:none;
}

.accordion>ul>li>a:hover{
	background-color:#743d94;
	color:#fff;
}

.accordion>ul>li>div {
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;	
	background-color:#F5F5F5;
	border-color:#BBBBBB #ddd #ddd #BBBBBB;
	border-style:solid;
}

/******** Theme Structure *********/
.accordion>ul>li>div {
	border-width:1px;
	height:340px;
	margin-right:4px;
	padding:30px;
	width:740px;
}

.accordion>ul>li>a {
	margin-right:4px;
	width:30px;
}

ul.accordion-ie>li>a>span { /* IE only */
	margin-left:5px;
	/* This value is  necessary for centering rotated texts in Internet Explorer. */
}

.accordion  {	
	width:908px;
	/* 	This value refers to the total width of visible components
		width = accordion>ul>li>div ( width + paddingRight + paddingLeft + marginRight + borderRightWidth + borderLeftWidth )  
			+ accordion>ul>li>a ( number of accordions x ( width + marginRright ) )  
		width = ( 740px + 30px + 30px + 4px + 1px + 1px ) + ( 3 x (  30px + 4px ) )
		width = 908px
	*/
}

.accordion, .accordion>ul>li>a  {	
	height:402px;
	/* 	This value refers to the total height of visible area
		height = accordion>ul>li>div ( height + paddingTop + paddingBottom + borderTopWidth + borderBottomWidth ) 
		width = ( 340px + 30px + 30px + 1px +1px )
		width = 402px
	*/
}

.accordion>ul>li {
	margin-right:-806px; 
	/* 	This value refers to the negative of total width of content <div>
		margin-right = accordion>ul>li>div (width + padding-right + padding-left + marginRight + borderRightWidth + borderLeftWidth )
		margin-right = 740px + 30px + 30px + 4px + 1px +1px 
		margin-right = 806px
	*/
	
	width:841px;
	/* 	width = .accordion>ul>li>div (width + padding-right + padding-left + marginRight + borderRightWidth + borderLeftWidth ) 
				+ .accordion>ul>li>a ( width + margin-right )
		width = ( 740px + 30px + 30px + 4px + 1px +1px  ) + ( 30px + 4px )
		width = 841px
	*/
	
	/* Transition Effect */
    transition: margin-right 0.3s ease 0.2s;
    -moz-transition: margin-right 0.3s ease 0.2s;
    -webkit-transition: margin-right 0.3s ease 0.2s;
    -o-transition: margin-right 0.3s ease 0.2s;
}

/*******  Do not change folllowing properties  **********/
.accordion  {overflow:hidden;}
.accordion>ul {list-style:none;padding:0;margin:0;width:9999em;}
.accordion>ul>li {float:left;overflow:hidden;}
.accordion>ul>li>a {float:left;position:relative;z-index:1;-moz-outline-style:none;outline:none;}
.accordion>ul>li>a>span{ /* Text Rotation for all browsers */
	-moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
	-ms-writing-mode:lr-bt;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	bottom:20px;display:block;position:absolute;width:100%;white-space:nowrap;
}
ul.accordion-ie>li>a>span {cursor:pointer;width:auto;} /* IE only */
.accordion>ul>li>div {float:left;overflow-y:auto;overflow-x:hidden;}
.accordion>ul>li:hover {margin-right:0px;}
ul.accordion-ie>li:hover {margin-right:0px;} /* IE only */</style>
</head>
<body>

<div class="accordion">
	
	<ul>
				<li>	
					<a href="##"><span>bşlık 1</span></a>
					<div>
						bşlık 1 in alanı
					</div>
				</li>
				<li>
					<a href="##"><span>bşlık 2</span></a>
					<div>
						bşlık 2 nin alanı
					</div>
				</li>
				<li>
					<a href="##"><span>bşlık 3</span></a>
					<div>
						bşlık 3 ün alanı
					</div>
				</li>
			</ul>
		</div>

CSS Akordiyon menü 3

Önizlemeyi gör

<title>CSS3 Horizontal Accordion</title>
<style type="text/css">/*  
CSS3 Horizontal Accordion Slider Theme 3
Version: 1.0
Author: Webarti
Author URL: http://www.webarti.com/
*/

/*********** Theme Styles ***********/
.accordion  {font-family: Arial, Helvetica, sans-serif;}

.accordion>ul>li>a {
	-moz-box-shadow:inset 1px 0px 0px 0px #de6868;
	-webkit-box-shadow:inset 1px 0px 0px 0px #de6868;
	box-shadow:inset 1px 0px 0px 0px #de6868;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b80b36', endColorstr='#78001a');
	background:-webkit-gradient( linear, right top, left top, color-stop(0.05, #b80b36), color-stop(1, #78001a) );
	background:-moz-linear-gradient( right center, #b80b36 5%, #78001a 100% );
	background-color:#b80b36;
	border-style:solid;
	border-color:#851d1d;
	color:#131114;
	font-size:15px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:-1px -1px 0px #b12740;
}

.accordion>ul>li>a:hover{
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#78001a', endColorstr='#b80b36');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #78001a), color-stop(1, #b80b36) );
	background:-moz-linear-gradient( top center, #78001a 5%, #b80b36 100% );
	background-color:#9B0629;
}

.accordion>ul>li>div {
	background-color:#000000;
	color:#FFFFFF;
}

/******** Theme Structure *********/
.accordion>ul>li>div {
	height:304px;
	padding:10px;
	width:600px;
}

.accordion>ul>li>a {
	border-width:0 1px 0 0;
	width:40px;
}

ul.accordion-ie>li>a>span { /* IE only */
	margin-left:10px;
	/* This value is  necessary for centering rotated texts in Internet Explorer. */
}

.accordion  {	
	width:825px;
	/* 	This value refers to the total width of visible components
		width = accordion>ul>li>div ( width + paddingRight + paddingLeft )  
			+ accordion>ul>li>a ( number of accordions x ( width + borderRrightWidth ) )  
		width = ( 600px + 10px + 10px ) + ( 5 x ( 40px +1px ) )
		width = 825px
	*/
}

.accordion, .accordion>ul>li>a  {	
	height:324px;
	/* 	This value refers to the total height of visible area
		height = accordion>ul>li>div ( height + paddingTop + paddingBottom  ) 
		width = ( 304px + 10px + 10px )
		width = 324px
	*/
}

.accordion>ul>li {
	margin-right:-620px; 
	/* 	This value refers to the negative of total width of content <div>
		margin-right = accordion>ul>li>div (width + padding-right + padding-left)
		margin-right = 600px + 10px + 10px 
		margin-right = 620px
	*/
	
	width:661px;
	/* 	width = .accordion>ul>li>div ( width + padding-right + padding-left ) 
				+ .accordion>ul>li>a ( width + border-right )
		width = ( 600px + 10px + 10px ) + ( 40px + 1px )
		width = 661px
	*/
	
	/* Transition Effect */
	transition: margin-right 0.3s ease 0.2s;
	-moz-transition: margin-right 0.3s ease 0.2s;
	-webkit-transition: margin-right 0.3s ease 0.2s;
	-o-transition: margin-right 0.3s ease 0.2s;
}

/*******  Do not change folllowing properties  **********/
.accordion  {overflow:hidden;}
.accordion>ul {list-style:none;padding:0;margin:0;width:9999em;}
.accordion>ul>li {float:left;overflow:hidden;}
.accordion>ul>li>a {float:left;position:relative;z-index:1;-moz-outline-style:none;outline:none;}
.accordion>ul>li>a>span{ /* Text Rotation for all browsers */
	-moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
	-ms-writing-mode:lr-bt;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	bottom:20px;display:block;position:absolute;width:100%;white-space:nowrap;
}
ul.accordion-ie >li>a>span {cursor:pointer;width:auto;} /* IE only */
.accordion>ul>li>div {float:left;overflow:auto;}
.accordion>ul>li:hover {margin-right:0px;}
ul.accordion-ie>li:hover {margin-right:0px;} /* IE only */</style>
</head>
<body>

<div class="accordion">
	
	<ul>
				<li>	
					<a href="##"><span>başlık 1</span></a>
					<div>
						başlık 1 in alanı
					</div>
				</li>
				<li>
					<a href="##"><span>başlık 2</span></a>
					<div>
						başlık 2 nin alanı
					</div>
				</li>
				<li>
					<a href="##"><span>başlık 3</span></a>
					<div>
						başlık 3 ün alanı
					</div>
				</li>
				<li>
					<a href="##"><span>başlık 4</span></a>
					<div>
						başlık 4 ün alanı
					</div>
				</li>
				<li>
					<a href="##"><span>başlık 5</span></a>
					<div>
						başlık 5 in alanı
					</div>
				</li>
			</ul>
		</div>

CSS Menü 1

Önizlemeyi gör

#menu {list-style-type:none; padding:0; margin:0 0 0 3px;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#cdc; margin:3px 3px 0 0; border:1px solid #000; width:123px; height:25px;}
#menu li.sub {background:#aba;}

/* for IE5.5 and IE6 only */

#menu li a {display:block; color:#000; height:25px; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:123px; text-decoration:none; text-align:center;}
#menu li a table {position:absolute; left:0; top:-1px; border-collapse:collapse; width:0; height:0;}

#menu :hover {color:#fff; background:#898; position:relative;}
#menu :hover > a {color:#fff; background:#898;}

#menu ul, 
#menu :hover ul ul,
#menu :hover ul :hover ul ul,
#menu :hover ul :hover ul ul.left {visibility:hidden; width:0; height:0; overflow:hidden;}

#menu :hover ul {visibility:visible; overflow:visible; position:absolute; height:auto; width:128px; left:-1px;top:26px; background:url(transparent.gif);} /* the background image is for IE7 */

#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {visibility:visible; overflow:visible; height:auto; width:128px; padding:9px 3px; left:100px; top:0;}

#menu :hover ul :hover ul.left,
#menu :hover ul :hover ul :hover ul.left {visibility:visible; overflow:visible; height:auto; width:128px; padding:9px 3px; left:-106px; top:0;}
</style>

if (isMSIE5_5 || isMSIE6) 
	{
	document.getElementById(topLevel).innerHTML = document.getElementById(topLevel).innerHTML.replace (/<ul/gi,"<table><tr><td><ul").replace (/</ul>/gi,"</ul></td></tr></table></a>");
	for (i=0;i<document.getElementsByTagName("li").length; i++) 
		{
		if (document.getElementsByTagName("li").item(i).className == "sub")
			{
			document.getElementsByTagName("li").item(i).innerHTML = document.getElementsByTagName("li").item(i).innerHTML.replace(/</a>/i,"");
			}
		}
	}
}</script>

</head>

<div class="topline"></div>
<div class="pad1"></div>
<ul id="menu">
	<li><a href="#nogo1">Home</a></li>
	<li class="sub"><a href="#nogo2">Products</a>
		<ul>
			<li class="sub"><a href="#nogo3">Cameras</a>
					<ul class="left">
						<li><a href="#nogo4">Nikon</a></li>
						<li><a href="#nogo5">Minolta</a></li>
						<li><a href="#nogo6">Pentax</a></li>
					</ul>
			</li>
			<li class="sub"><a href="#nogo7">Lenses </a>
					<ul>
						<li><a href="#nogo8">Wide Angle</a></li>
						<li><a href="#nogo9">Standard</a></li>
						<li><a href="#nogo10">Telephoto</a></li>
						<li class="sub"><a href="#nogo11">Zoom</a>
							<ul>
								<li><a href="#nogo12">35mm to 125mm</a></li>
								<li><a href="#nogo13">50mm to 250mm</a></li>
								<li><a href="#nogo14">125mm to 500mm</a></li>
							</ul>
						</li>
						<li><a href="#nogo">Mirror</a></li>
						<li class="sub"><a href="#nogo15">Non-standard</a>
							<ul class="left">
								<li><a href="#nogo16">Bayonet mount</a></li>
								<li><a href="#nogo17">Screw mount</a></li>
							</ul>
						</li>
					</ul>
			</li>
			<li><a href="#nogo18">Flash Guns</a></li>
			<li><a href="#nogo19">Tripods</a></li>
			<li><a href="#nogo20">Filters</a></li>
		</ul>
	</li>
	<li class="sub"><a href="#nogo21">Services</a>
		<ul>
			<li><a href="#nogo22">Printing</a></li>
			<li><a href="#nogo23">Photo Framing</a></li>
			<li><a href="#nogo24">Retouching</a></li>
			<li><a href="#nogo25">Archiving</a></li>
		</ul>
	</li>
	<li class="sub"><a href="#nogo26">Shop</a>
		<ul>
			<li><a href="#nogo27">Online</a></li>
			<li><a href="#nogo28">Catalogue</a></li>
			<li><a href="#nogo29">Mail Order</a></li>
		</ul>
	</li>
	<li class="sub"><a href="#nogo30">Contacts</a>
		<ul>
			<li><a href="#nogo31">Support</a></li>
			<li class="sub"><a href="#nogo32">Sales</a>
				<ul class="left">
					<li><a href="#nogo33">USA</a></li>
					<li><a href="#nogo34">Canadian</a></li>
					<li><a href="#nogo35">South American</a></li>
					<li class="sub"><a href="#nogo36">European</a>
						<ul class="left">
							<li><a href="#nogo37">British</a></li>
							<li><a href="#nogo38">French</a></li>
							<li><a href="#nogo39">German</a></li>
							<li><a href="#nogo40">Spanish</a></li>
							<li><a href="#nogo41">Italian</a></li>
						</ul>
					</li>
					<li><a href="#nogo42">Canadian</a></li>
					<li><a href="#nogo43">Asian</a></li>
				</ul>
			</li>
			<li><a href="#nogo44">Buying</a></li>

<li><a href="#nogo45">Photographers</a></li>
			<li><a href="#nogo46">Stockist</a></li>
			<li><a href="#nogo47">General</a></li>
		</ul>
	</li>
</ul>
<div class="pad2"></div>
</div>

CSS Menü 2

Önizlemeyi gör

#hoverpage ul#menu li div p {font-size:12px; line-height:16px; margin:5px 0 15px 0;}
#hoverpage ul#menu li div h2 {line-height:1em; color:#000; font-size:1.5em; font-weight:normal; margin-top:0;}
#hoverpage ul#menu li div h3 {line-height:1em; color:#666; font-size:1.2em; font-weight:normal; margin-top:0;}
#hoverpage ul#menu li div h3.clear {clear:left;}

#hoverpage {width:650px; height:400px; border:1px solid #fc0; background:#fff; position:relative; z-index:200; overflow:hidden; text-align:left;}

#hoverpage ul#menu {background:transparent; padding:0; margin:0;list-style:none;}

#hoverpage ul#menu li.page {display:inline;} /* needed for IE to function correctly */

#hoverpage ul#menu li.page a.menuitem {text-decoration:none;}

#hoverpage ul#menu li.page i {position:absolute; display:block; height:25px; line-height:25px; padding-right:5px; right:510px; background:#fff; cursor:default; z-index:500; text-align:right; text-decoration:none; color:#666; font-style:normal; cursor:pointer; width:120px; border:1px solid #fc0;}

#hoverpage ul#menu li.p1 i {top:30px;}
#hoverpage ul#menu li.p2 i {top:55px;}
#hoverpage ul#menu li.p3 i {top:80px;}
#hoverpage ul#menu li.p4 i {top:105px;}
#hoverpage ul#menu li.p5 i {top:130px;}

#hoverpage ul#menu li.page div {display:block; width:600px; height:400px; padding:25px; font-weight:normal; color:#444; background:#fff;}

#hoverpage ul#menu li div img {border:1px solid #ddd; float:right; margin:0 10px 5px 0;}
#hoverpage ul#menu li div p.big {line-height:1em; color:#333; font-size:1.5em;}
#hoverpage ul#menu li div a, #hoverpage ul#menu li div a:visited {color:#00c; text-decoration:underline;}
#hoverpage ul#menu li div em {display:block; width:200px; height:230px; float:left;}

#hoverpage ul#menu li.page div a:hover {text-decoration:none;}
#hoverpage ul#menu li.page a.menuitem:hover {white-space:normal;} /* for IE6 */

#hoverpage ul#menu li.click div {position:absolute; left:0; top:0;}
#hoverpage ul#menu li.click a i,
#hoverpage ul#menu li.click a:visited i
{color:#000; font-weight:bold;}

#hoverpage ul#menu div ul li {line-height:20px; color:#256; list-style-type:disc;}
#hoverpage ul#menu div ul li a,
#hoverpage ul#menu div ul li a:visited
{line-height:20px; color:#c00;}

#hoverpage ul#menu div dl dd {line-height:20px; font-size:1.1em; color:#448;}
#hoverpage ul#menu div dl dt {line-height:30px; color:#333;}
</style>  <script type="text/javascript">clickMenu = function(menu) {
	var getEls = document.getElementById(menu).getElementsByTagName("LI");
	var getAgn = getEls;

for (var i=0; i<getEls.length; i++) {
			getEls[i].onclick=function() {
				for (var x=0; x<getAgn.length; x++) {
				getAgn[x].className=getAgn[x].className.replace("click", "");
				}
				this.className+=" click";
				}
			}
		}</script>
<div id="hoverpage">
<ul id="menu">
    <li class="page p1 click"><a class="menuitem" href="#nogo"> <i>Tek parca 1</i></a>
    <div>
    <h2>Tek parca 1</h2>
    basmak03.tr.gg</div>
    </li>
    <li class="page p2"><a class="menuitem" href="#nogo"><i>Tek parca 2</i></a>
    <div>
    <h2>Tek parca 2</h2>
    basmak03.tr.gg</div>
    </li>
    <li class="page p3"><a class="menuitem" href="#nogo"><i>Tek parca 3</i></a>
    <div>
    <h2>Tek parca 3</h2>
    basmak03.tr.gg</div>
    </li>
    <li class="page p4"><a class="menuitem" href="#nogo"><i>Partlı sistem</i></a>
    <div>
    <h2>Partlı sistem</h2>
    </div>
    </li>
    <li class="page p5"><a class="menuitem" href="#nogo"><i>2.part</i></a>
    <div>
    <h2>2.part</h2>
    </div>
    </li>
</ul>
</div>

CSS Menü 3

Önizlemeyi gör

#menu {list-style-type:none; width:644px; padding:0; margin:0 auto;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#088; margin:1px 1px 0 0;position:relative;}
#menu li.sub {background:#f80;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:160px; text-decoration:none; text-align:center; cursor:pointer; font-weight:bold;}
#menu li:hover, #menu li a:hover {background:#c00;}
#menu ul {position:absolute;left:-9999px;width:128px;}
#menu li.click {background:#c00;}
#menu li.click ul{left:0; top:24px; background:url(transparent.gif);} /* the background image is for IE7 */

</style>

for (var i=0; i<getEls.length; i++) {
			getEls[i].onclick=function() {
				for (var x=0; x<getAgn.length; x++) {
				getAgn[x].className=getAgn[x].className.replace("unclick", "");
				getAgn[x].className=getAgn[x].className.replace("click", "unclick");
				}
			if ((this.className.indexOf('unclick'))!=-1) {
				this.className=this.className.replace("unclick", "");;
				}
				else {
				this.className+=" click";
				}
			}
		}
	}</script>

</head>

<center>
<div id="outer">
<ul id="menu">
<li class="sub">Products
		<ul>
			<li><a href="#nogo1">Wall Clocks</a></li>
			<li><a href="#nogo2">Watches</a></li>
			<li><a href="#nogo3">Pocket Watches</a></li>
			<li><a href="#nogo4">Chronometers</a></li>
			<li><a href="#nogo5">Astronomical</a></li>
			<li><a href="#nogo5">Pendulum</a></li>
		</ul>
</li>
<li class="sub">Services
		<ul>
			<li><a href="#nogo6">Repair</a></li>
			<li><a href="#nogo7">Servicing</a></li>
			<li><a href="#nogo8">Battery Replacement</a></li>
			<li><a href="#nogo9">Cleaning</a></li>
		</ul>
</li>
<li class="sub">Shop 
		<ul>
			<li><a href="#nogo10">Online</a></li>
			<li><a href="#nogo11">Catalogue</a></li>
			<li><a href="#nogo12">Mail Order</a></li>
		</ul>
</li>
<li class="sub">Contacts
		<ul>
			<li><a href="#nogo13">Support</a></li>
			<li><a href="#nogo14">Sales</a></li>
			<li><a href="#nogo15">Buying</a></li>
			<li><a href="#nogo16">Clock Makers</a></li>
			<li><a href="#nogo17">Stockist</a></li>
			<li><a href="#nogo18">General</a></li>
		</ul>
</li>
</ul>
</div>

<p>basmak03.tr.gg</p>

</div></center>

CSS Menü 4

Önizlemeyi gör

#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}

#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}

#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#b75;}

/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; top:-1px;}

/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#b75;}

/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}
</style>

</script>

</head>

<body><center>
<h1>basmak03.tr.gg</h1>

<ul id="nav">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us »</a>
	<ul>
		<li><a href="#nogo">Who we are</a></li>
		<li><a href="#nogo">What we do</a></li>
		<li><a href="#nogo">Where to find us</a></li>
	</ul>
</li>
<li><a href="#nogo">Products »</a>
	<ul>
	<li><a href="#nogo">Tripods »</a>
		<ul>
			<li><a href="#nogo">Monopods</a></li>
			<li><a href="#nogo">Tripods</a></li>
			<li><a href="#nogo">Adjutable head</a></li>
			<li><a href="#nogo">Fixed</a></li>
			<li><a href="#nogo">Flash mount</a></li>
			<li><a href="#nogo">Floating head</a></li>

</ul>
	</li>
	<li><a href="#nogo">Films »</a>
		<ul>
			<li><a href="#nogo">35mm</a></li>
			<li><a href="#nogo">Color Print</a></li>
			<li><a href="#nogo">Black and White</a></li>
			<li><a href="#nogo">Roll</a></li>
			<li><a href="#nogo">Color Slide</a></li>
		</ul>
	</li>
	<li><a href="#nogo">Cameras »</a>
			<ul>
			<li><a href="#nogo">Compact »</a>
				<ul>
				<li><a href="#nogo">Canon</a></li>
				<li><a href="#nogo">Nikon</a></li>
				<li><a href="#nogo">Minolta</a></li>
				<li><a href="#nogo">Pentax</a></li>
				</ul>
			</li>
			<li><a href="#nogo">Digital »</a>
					<ul>
					<li><a href="#nogo">Canon</a></li>
					<li><a href="#nogo">Nikon »</a>
							<ul>
							<li><a href="#nogo">Lenses »</a>
								<ul>
									<li><a href="#nogo">Standard</a></li>
									<li><a href="#nogo">Telephoto</a></li>
									<li><a href="#nogo">Wide Angle</a></li>
									<li><a href="#nogo">Fish Eye</a></li>
									<li><a href="#nogo">Mirror</a></li>
									<li><a href="#nogo">Macro</a></li>
								</ul>
							</li>
							<li><a href="#nogo">Speedlight</a></li>
							<li><a href="#nogo">Coolpix »</a>
									<ul>
									<li><a href="#nogo">Coolpix S10</a></li>
									<li><a href="#nogo">Coolpix L2</a></li>
									<li><a href="#nogo">Coolpix S500</a></li>
									<li><a href="#nogo">Coolpix P5000</a></li>
									<li><a href="#nogo">Coolpix 4600</a></li>
									<li><a href="#nogo">Coolpix S6 Silver</a></li>
									</ul>
							</li>
							<li><a href="#nogo">D200</a></li>
							<li><a href="#nogo">D80</a></li>
							</ul>
					</li>
					<li><a href="#nogo">Minolta</a></li>
					<li><a href="#nogo">Pentax</a></li>
					</ul>
			</li>
			<li><a href="#nogo">SLR »</a>
				<ul>
				<li><a href="#nogo">Canon</a></li>
				<li><a href="#nogo">Nikon</a></li>
				<li><a href="#nogo">Minolta</a></li>
				<li><a href="#nogo">Pentax</a></li>
				<li><a href="#nogo">Panasonic</a></li>
				</ul>
			</li>
			</ul>
		</li>
	<li><a href="#nogo">Flash</a></li>
	<li><a href="#nogo">Video</a></li>
	</ul>
	</li>
<li><a href="#nogo">FAQs »</a>
	<ul>
		<li><a href="#nogo">Cameras</a></li>
		<li><a href="#nogo">Film types</a></li>
		<li><a href="#nogo">Digital Photography</a></li>
	</ul>
</li>
<li><a href="#nogo">Privacy »</a>
	<ul>
		<li><a href="#nogo">Privacy Policy</a></li>
		<li><a href="#nogo">Privacy Statement</a></li>
	</ul>
</li>
<li><a href="#nogo">Contact us</a></li>
</ul>
<p>basmak03.tr.gg</p></center>

CSS Menü 5

Önizlemeyi gör

#nav li li {background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li {float:left;}

#nav li a {display:block; color:#888; margin:0 25px 0 10px; height:20px; line-height:20px; text-decoration:none; white-space:nowrap;}

#nav li:hover {position:relative; z-index:300;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav, * html nav ul {width:1px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#7b5;}

/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover ul,
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; top:-1px;}

/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#7b5;}

/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}
</style>

</script>

</head>

<body><center>
<h1>basmak03.tr.gg</h1>

<ul id="nav">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us »</a>
	<ul>
		<li><a href="#nogo">Who we are</a></li>
		<li><a href="#nogo">What we do</a></li>
		<li><a href="#nogo">Where to find us</a></li>
	</ul>
</li>
<li><a href="#nogo">Products »</a>
	<ul>
	<li><a href="#nogo">Tripods »</a>
		<ul>
			<li><a href="#nogo">Monopods</a></li>
			<li><a href="#nogo">Tripods</a></li>
			<li><a href="#nogo">Adjutable head</a></li>
			<li><a href="#nogo">Fixed</a></li>
			<li><a href="#nogo">Flash mount</a></li>
			<li><a href="#nogo">Floating head</a></li>

</ul>
	</li>
	<li><a href="#nogo">Films »</a>
		<ul>
			<li><a href="#nogo">35mm</a></li>
			<li><a href="#nogo">Color Print</a></li>
			<li><a href="#nogo">Black and White</a></li>
			<li><a href="#nogo">Roll</a></li>
			<li><a href="#nogo">Color Slide</a></li>
		</ul>
	</li>
	<li><a href="#nogo">Cameras »</a>
			<ul>
			<li><a href="#nogo">Compact »</a>
				<ul>
				<li><a href="#nogo">Canon</a></li>
				<li><a href="#nogo">Nikon</a></li>
				<li><a href="#nogo">Minolta</a></li>
				<li><a href="#nogo">Pentax</a></li>
				</ul>
			</li>
			<li><a href="#nogo">Digital »</a>
					<ul>
					<li><a href="#nogo">Canon</a></li>
					<li><a href="#nogo">Nikon »</a>
							<ul>
							<li><a href="#nogo">Lenses »</a>
								<ul>
									<li><a href="#nogo">Standard</a></li>
									<li><a href="#nogo">Telephoto</a></li>
									<li><a href="#nogo">Wide Angle</a></li>
									<li><a href="#nogo">Fish Eye</a></li>
									<li><a href="#nogo">Mirror</a></li>
									<li><a href="#nogo">Macro</a></li>
								</ul>
							</li>
							<li><a href="#nogo">Speedlight</a></li>
							<li><a href="#nogo">Coolpix »</a>
									<ul>
									<li><a href="#nogo">Coolpix S10</a></li>
									<li><a href="#nogo">Coolpix L2</a></li>
									<li><a href="#nogo">Coolpix S500</a></li>
									<li><a href="#nogo">Coolpix P5000</a></li>
									<li><a href="#nogo">Coolpix 4600</a></li>
									<li><a href="#nogo">Coolpix S6 Silver</a></li>
									</ul>
							</li>
							<li><a href="#nogo">D200</a></li>
							<li><a href="#nogo">D80</a></li>
							</ul>
					</li>
					<li><a href="#nogo">Minolta</a></li>
					<li><a href="#nogo">Pentax</a></li>
					</ul>
			</li>
			<li><a href="#nogo">SLR »</a>
				<ul>
				<li><a href="#nogo">Canon</a></li>
				<li><a href="#nogo">Nikon</a></li>
				<li><a href="#nogo">Minolta</a></li>
				<li><a href="#nogo">Pentax</a></li>
				<li><a href="#nogo">Panasonic</a></li>
				</ul>
			</li>
			</ul>
		</li>
	<li><a href="#nogo">Flash</a></li>
	<li><a href="#nogo">Video</a></li>
	</ul>
	</li>
<li><a href="#nogo">FAQs »</a>
	<ul>
		<li><a href="#nogo">Cameras</a></li>
		<li><a href="#nogo">Film types</a></li>
		<li><a href="#nogo">Digital Photography</a></li>
	</ul>
</li>
<li><a href="#nogo">Privacy »</a>
	<ul>
		<li><a href="#nogo">Privacy Policy</a></li>
		<li><a href="#nogo">Privacy Statement</a></li>
	</ul>
</li>
<li><a href="#nogo">Contact us</a></li>
</ul>
<img src="http://www.stunicholls.com/menu/skeleton/leaf.jpg" alt="skeleton leaf" title="" />

<p>basmak03.tr.gg</p></center>

CSS Menü 6

Önizlemeyi gör

#nav li li {background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li {float:left;}

#nav li a {display:block; color:#888; margin:0 25px 0 10px; height:20px; line-height:20px; text-decoration:none; white-space:nowrap;}

#nav li:hover {position:relative; z-index:300;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav, * html #nav ul {width:1px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover > ul {right:-5px; left:auto; margin-right:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#b57;}

/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover ul,
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{right:-5px; left:auto; margin-right:100%; top:-1px;}

/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#b57;}

/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}

</style>

</script>

</head>

<body><center>
<h1>basmak03.tr.gg</h1>

<ul id="nav">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us »</a>
	<ul>
		<li><a href="#nogo">Who we are</a></li>
		<li><a href="#nogo">What we do</a></li>
		<li><a href="#nogo">Where to find us</a></li>
	</ul>
</li>
<li><a href="#nogo">Products »</a>
	<ul>
	<li><a href="#nogo">Tripods »</a>
		<ul>
			<li><a href="#nogo">Monopods</a></li>
			<li><a href="#nogo">Tripods</a></li>
			<li><a href="#nogo">Adjutable head</a></li>
			<li><a href="#nogo">Fixed</a></li>
			<li><a href="#nogo">Flash mount</a></li>
			<li><a href="#nogo">Floating head</a></li>

</ul>
	</li>
	<li><a href="#nogo">Films »</a>
		<ul>
			<li><a href="#nogo">35mm</a></li>
			<li><a href="#nogo">Color Print</a></li>
			<li><a href="#nogo">Black and White</a></li>
			<li><a href="#nogo">Roll</a></li>
			<li><a href="#nogo">Color Slide</a></li>
		</ul>
	</li>
	<li><a href="#nogo">Cameras »</a>
			<ul>
			<li><a href="#nogo">Compact »</a>
				<ul>
				<li><a href="#nogo">Canon</a></li>
				<li><a href="#nogo">Nikon</a></li>
				<li><a href="#nogo">Minolta</a></li>
				<li><a href="#nogo">Pentax</a></li>
				</ul>
			</li>
			<li><a href="#nogo">Digital »</a>
					<ul>
					<li><a href="#nogo">Canon</a></li>
					<li><a href="#nogo">Nikon »</a>
							<ul>
							<li><a href="#nogo">Lenses »</a>
								<ul>
									<li><a href="#nogo">Standard</a></li>
									<li><a href="#nogo">Telephoto</a></li>
									<li><a href="#nogo">Wide Angle</a></li>
									<li><a href="#nogo">Fish Eye</a></li>
									<li><a href="#nogo">Mirror</a></li>
									<li><a href="#nogo">Macro</a></li>
								</ul>
							</li>
							<li><a href="#nogo">Speedlight</a></li>
							<li><a href="#nogo">Coolpix »</a>
									<ul>
									<li><a href="#nogo">Coolpix S10</a></li>
									<li><a href="#nogo">Coolpix L2</a></li>
									<li><a href="#nogo">Coolpix S500</a></li>
									<li><a href="#nogo">Coolpix P5000</a></li>
									<li><a href="#nogo">Coolpix 4600</a></li>
									<li><a href="#nogo">Coolpix S6 Silver</a></li>
									</ul>
							</li>
							<li><a href="#nogo">D200</a></li>
							<li><a href="#nogo">D80</a></li>
							</ul>
					</li>
					<li><a href="#nogo">Minolta</a></li>
					<li><a href="#nogo">Pentax</a></li>
					</ul>
			</li>
			<li><a href="#nogo">SLR »</a>
				<ul>
				<li><a href="#nogo">Canon</a></li>
				<li><a href="#nogo">Nikon</a></li>
				<li><a href="#nogo">Minolta</a></li>
				<li><a href="#nogo">Pentax</a></li>
				<li><a href="#nogo">Panasonic</a></li>
				</ul>
			</li>
			</ul>
		</li>
	<li><a href="#nogo">Flash</a></li>
	<li><a href="#nogo">Video</a></li>
	</ul>
	</li>
<li><a href="#nogo">FAQs »</a>
	<ul>
		<li><a href="#nogo">Cameras</a></li>
		<li><a href="#nogo">Film types</a></li>
		<li><a href="#nogo">Digital Photography</a></li>
	</ul>
</li>
<li><a href="#nogo">Privacy »</a>
	<ul>
		<li><a href="#nogo">Privacy Policy</a></li>
		<li><a href="#nogo">Privacy Statement</a></li>
	</ul>
</li>
<li><a href="#nogo">Contact us</a></li>
</ul>
<img src="http://www.stunicholls.com/menu/skeleton/leaf.jpg" alt="skeleton leaf" title="" />

<p>basmak03.tr.gg</p></center>

CSS Menü 7

Önizlemeyi gör

#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}

#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}

#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; bottom:21px; top:auto;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#57b;}

/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; bottom:-7px; top:auto;}

/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#57b;}

/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}

</style>

</script>

</head>

<body><center>
<h1>basmak03.tr.gg</h1>
<img src="http://www.stunicholls.com/menu/skeleton/leaf.jpg" alt="skeleton leaf" title="" />

<ul id="nav">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us »</a>
	<ul>
		<li><a href="#nogo">Who we are</a></li>
		<li><a href="#nogo">What we do</a></li>
		<li><a href="#nogo">Where to find us</a></li>
	</ul>
</li>
<li><a href="#nogo">Products »</a>
	<ul>
	<li><a href="#nogo">Tripods »</a>
		<ul>
			<li><a href="#nogo">Monopods</a></li>
			<li><a href="#nogo">Tripods</a></li>
			<li><a href="#nogo">Adjutable head</a></li>
			<li><a href="#nogo">Fixed</a></li>
			<li><a href="#nogo">Flash mount</a></li>
			<li><a href="#nogo">Floating head</a></li>

</ul>
	</li>
	<li><a href="#nogo">Films »</a>
		<ul>
			<li><a href="#nogo">35mm</a></li>
			<li><a href="#nogo">Color Print</a></li>
			<li><a href="#nogo">Black and White</a></li>
			<li><a href="#nogo">Roll</a></li>
			<li><a href="#nogo">Color Slide</a></li>
		</ul>
	</li>
	<li><a href="#nogo">Cameras »</a>
			<ul>
			<li><a href="#nogo">Compact »</a>
				<ul>
				<li><a href="#nogo">Canon</a></li>
				<li><a href="#nogo">Nikon</a></li>
				<li><a href="#nogo">Minolta</a></li>
				<li><a href="#nogo">Pentax</a></li>
				</ul>
			</li>
			<li><a href="#nogo">Digital »</a>
					<ul>
					<li><a href="#nogo">Canon</a></li>
					<li><a href="#nogo">Nikon »</a>
							<ul>
							<li><a href="#nogo">Lenses »</a>
								<ul>
									<li><a href="#nogo">Standard</a></li>
									<li><a href="#nogo">Telephoto</a></li>
									<li><a href="#nogo">Wide Angle</a></li>
									<li><a href="#nogo">Fish Eye</a></li>
									<li><a href="#nogo">Mirror</a></li>
									<li><a href="#nogo">Macro</a></li>
								</ul>
							</li>
							<li><a href="#nogo">Speedlight</a></li>
							<li><a href="#nogo">Coolpix »</a>
									<ul>
									<li><a href="#nogo">Coolpix S10</a></li>
									<li><a href="#nogo">Coolpix L2</a></li>
									<li><a href="#nogo">Coolpix S500</a></li>
									<li><a href="#nogo">Coolpix P5000</a></li>
									<li><a href="#nogo">Coolpix 4600</a></li>
									<li><a href="#nogo">Coolpix S6 Silver</a></li>
									</ul>
							</li>
							<li><a href="#nogo">D200</a></li>
							<li><a href="#nogo">D80</a></li>
							</ul>
					</li>
					<li><a href="#nogo">Minolta</a></li>
					<li><a href="#nogo">Pentax</a></li>
					</ul>
			</li>
			<li><a href="#nogo">SLR »</a>
				<ul>
				<li><a href="#nogo">Canon</a></li>
				<li><a href="#nogo">Nikon</a></li>
				<li><a href="#nogo">Minolta</a></li>
				<li><a href="#nogo">Pentax</a></li>
				<li><a href="#nogo">Panasonic</a></li>
				</ul>
			</li>
			</ul>
		</li>
	<li><a href="#nogo">Flash</a></li>
	<li><a href="#nogo">Video</a></li>
	</ul>
	</li>
<li><a href="#nogo">FAQs »</a>
	<ul>
		<li><a href="#nogo">Cameras</a></li>
		<li><a href="#nogo">Film types</a></li>
		<li><a href="#nogo">Digital Photography</a></li>
	</ul>
</li>
<li><a href="#nogo">Privacy »</a>
	<ul>
		<li><a href="#nogo">Privacy Policy</a></li>
		<li><a href="#nogo">Privacy Statement</a></li>
	</ul>
</li>
<li><a href="#nogo">Contact us</a></li>
</ul>

<p>basmak03.tr.gg</p></center>

CSS Menü 8

Önizlemeyi gör

#menu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}

#menu li.sub {background:#d30;}

#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none;  cursor:pointer; font-weight:bold; text-indent:5px;}

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

#menu li:hover {color:#ff0; z-index:500;}

#menu li:hover ul {display:block; height:150px;}
#menu li:hover ul li:hover ul, 
#menu li:hover ul li:hover ul li:hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px; height:auto;}

#menu li:hover ul li.fly {background: #657 url(frog_arrow.gif) no-repeat top right;}
#menu li:hover ul li:hover {background:#98a;}

#menu li:hover ul li:hover ul li {background:#c60;}
#menu li:hover ul li:hover ul li.hover ul li {background:#780; z-index:500;}

#menu li:hover ul li:hover ul li.fly {background: #c60 url(frog_arrow.gif) no-repeat top right;}
#menu li:hover ul li:hover ul li:hover {z-index:500; background:#fa4;}
#menu li:hover ul li:hover ul li:hover a {color:#000;}

#menu li:hover ul li:hover ul li:hover ul li:hover {background:#aa0;}
#menu li:hover ul li:hover ul li.hover ul li:hover a {color:#fff;}

#nav img {display:block; float:right;}
#nav p {margin:0px; padding:17px 0 0 0; color:#000; font-size:12px; font-family:arial, sans-serif; text-align:justify;}
</style>

</head>

<body>
<center>
<div id="nav">
<h1>basmak03.tr.gg</h1>
<ul id="menu">
<li class="sub">Types
		<ul>
			<li><a href="#nogo">European</a></li>
			<li><a href="#nogo">Indian</a></li>
			<li><a href="#nogo">North Africa</a></li>
			<li class="fly"><a href="#nogo">American</a>
				<ul>
					<li><a href="#nogo">South American</a></li>
					<li class="fly"><a href="#nogo">North American</a>
						<ul>
							<li><a href="#nogo">Grey tree frog</a></li>
							<li><a href="#nogo">Green tree frog</a></li>
							<li><a href="#nogo">Spring peeper</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#nogo">Japanese</a></li>
			<li><a href="#nogo">Chinese</a></li>
		</ul>
</li>
<li class="sub">Classifications
		<ul>
			<li class="fly"><a href="#nogo">Pelodryadinae</a>
				<ul>
					<li><a href="#nogo">Cyclorana</a></li>
					<li><a href="#nogo">Litoria</a></li>
					<li><a href="#nogo">Nyctimystes</a></li>
				</ul>
			</li>
			<li class="fly"><a href="#nogo7">Phyllomedusinae</a>
				<ul>
					<li><a href="#nogo">Agalychnis</a></li>
					<li><a href="#nogo">Cruziohyla</a></li>
					<li><a href="#nogo">Hylomantis</a></li>
					<li><a href="#nogo">Pachymedusa</a></li>
					<li><a href="#nogo">Phasmahyla</a></li>
					<li><a href="#nogo">Phrynomedusa</a></li>
					<li><a href="#nogo">Phyllomedusa</a></li>
				</ul>
			</li>
			<li class="fly"><a href="#nogo">Hemiphractinae</a>
				<ul>
					<li><a href="#nogo">Cryptobatrachus</a></li>
					<li><a href="#nogo">Flectonotus</a></li>
					<li><a href="#nogo">Gastrotheca</a></li>
					<li><a href="#nogo">Hemiphractus</a></li>
					<li><a href="#nogo">Stefania</a></li>
				</ul>
			</li>
			<li class="fly"><a href="#nogo">Hylinae</a>
				<ul>
					<li><a href="#nogo">Acris</a></li>
					<li><a href="#nogo">Anotheca</a></li>
					<li><a href="#nogo">Bokermannohyla</a></li>
					<li><a href="#nogo">Corythomantis</a></li>
					<li><a href="#nogo">Ecnomiohyla</a></li>
					<li><a href="#nogo">Hyloscirtus</a></li>
					<li><a href="#nogo">Megastomatohyla</a></li>
					<li><a href="#nogo">Osteocephalus</a></li>
					<li><a href="#nogo">Pseudacris</a></li>
					<li><a href="#nogo">Sphaenorhynchus</a></li>
					<li><a href="#nogo">Trachycephalus</a></li>
				</ul>			
			</li>
			<li class="fly"><a href="#nogo9">Rhacophorinae</a>
				<ul>
					<li><a href="#nogo">Boophis</a></li>
					<li><a href="#nogo">Callixalus</a></li>
					<li><a href="#nogo">Chiromantis</a></li>
					<li><a href="#nogo">Cryptothylax</a></li>
					<li><a href="#nogo">Mantidactylus</a></li>
					<li><a href="#nogo">Rhacophorus</a></li>
				</ul>
			</li>
			<li class="fly"><a href="#nogo">Buergeriinae</a>
				<ul>
					<li><a href="#nogo">Buergeria</a></li>
				</ul>
			</li>
		</ul>
</li>
<li class="sub">References
		<ul>
			<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
			<li><a href="#nogo11">Encyclopedia</a></li>
		</ul>
</li>
<li class="sub">Links
		<ul>
			<li><a href="#nogo">Complete treefrog</a></li>
			<li><a href="#nogo">Old World treefrogs</a></li>
			<li><a href="#nogo">Amphibian Species</a></li>
		</ul>
</li>
</ul>
</div>
<p class="clear">basmak03.tr.gg</p>

</center>

Toplam 98913 ziyaretçi (229175 klik) kişi burdaydı!