Öncelikle Merhaba Arkadaşlar Bir Müşterim İçin html site tasarlıyorum ama bir türlü yatay açılır alt menü yapamadım aşağıda indexim ve css kodlarım var acaba biryerdemi yanlış yapıyorum
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/NewsGoth_400.font.js" type="text/javascript"></script>
<script src="js/NewsGoth_700.font.js" type="text/javascript"></script>
<script src="js/NewsGoth_Lt_BT_italic_400.font.js" type="text/javascript"></script>
<script src="js/Vegur_400.font.js" type="text/javascript"></script>
<script src="js/FF-cash.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
</head>
<body id="page3">
<div class="extra">
<!--==============================header=================================-->
<header>
<div class="row-top">
<div class="main">
<div class="wrapper">
<h1><a href="index.html">Elektronet</a></h1>
<form id="search-form" method="post" enctype="multipart/form-data">
<fieldset>
<div class="search-field">
<input name="search" type="text" value="Search..." onBlur="if(this.value=='') this.value='Search...'" onFocus="if(this.value =='Search...' ) this.value=''" />
<a class="search-button" href="#" onClick="document.getElementById('search-form').submit()"></a>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="menu-row">
<div class="menu-bg">
<div class="main">
<nav class="indent-left">
<ul class="menu wrapper">
<li class="active"><a href="index.html">Anasayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="hizmetlerimiz.html">Hizmetlerimiz</a></li>
<li><a href="urunler.html">Ürünler</a>
<ul>
<li><a href="#">Bankacılık</a></li>
<li><a href="#">Bankacılık</a></li>
</ul>
</li>
<li><a href="bilgibankasi.html">Bilgi Bankası</a></li>
<li><a href="referanslar.html">Referanslar</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="row-bot">
<div class="center-shadow">
</div>
</div>
</header>
<!--==============================content================================-->
<section id="content"><div class="ic">More Website Templates @ SprintBilgi.com. December10, 2011!</div>
<div class="content-bg">
<div class="main">
<div class="container_12">
<div class="wrapper img-indent-bot">
<article class="grid_12">
<h3>Ürünler</h3>
<div class="wrapper p3">
<article class="grid_4 alpha">
<div class="wrapper">
<figure class="img-indent3"><img src="images/page3-img1.png" alt="" /></figure>
<div class="extra-wrap">
<h4 class="p1">Ekspres Gişe Sistemleri</h4>
<p class="prev-indent-bot">Ekspress Gişe Sistemleri Elektronet tarafından, müşteriyi bekletmeden ve sıra numarası alarak gişe veya vezneye yönlendirmek yerine, bu ünite ile müşterinin hemen hemen tüm isteklerine yanıt verilmesi, kartlı veya kartsız olarak birçok işlemin E-gişe tarafından yapılabilmesi amacı ile geliştirilmiştir.</p>
<a class="link-1" href="#">Devam..</a>
</div>
</div>
</article>
<article class="grid_4">
<div class="wrapper">
<figure class="img-indent2"><img src="images/page3-img2.png" alt="" /></figure>
<div class="extra-wrap">
<h4 class="p1">Sıra Sistemleri</h4>
<p class="prev-indent-bot">Elektronetin tasarlamış olduğu Sıra Sistemleri; Müşteri numarası veya kartına bağlı olarak müşteri sınıflandırması yapılmasını ve banka işlem menüsüne göre seçim yapılarak sıra numarası almasını sağlar.</p>
<a class="link-1" href="#">Devam..</a>
</div>
</div>
</article>
<article class="grid_4 omega">
<div class="indent-left3">
<div class="wrapper">
<figure class="img-indent3"><img src="images/page3-img3.png" alt="" /></figure>
<div class="extra-wrap">
<h4 class="p1"><strong>VTM (Video Teller Machine)</strong></h4>
<p class="prev-indent-bot">Elektronet, VTMyi (Video Teller Machine) Bankacılıkta bir dönüm noktası olarak finans sektörüne sunmaktadır. Elektronet, Görsel interaktif bankacılık teknolojisi ile çağrı merkezlerini birleştirerek şubesiz bankacılığı yeni bir boyuta taşımıştır.</p>
<a class="link-1" href="#">Devam..</a>
</div>
</div>
</div>
</article>
</div>
<div class="wrapper">
<article class="grid_4 alpha">
<div class="wrapper">
<figure class="img-indent3"><img src="images/page3-img4.png" alt="" /></figure>
<div class="extra-wrap">
<h4 class="p1">CVM (Card Vending Machine)</h4>
<p class="prev-indent-bot">Müşterilerin kullanım amacına yönelik, limitleri tamamen kendilerinin kararına bağlı olarak düzenlenmiş, disposal(tek kullanımlık) debit kartları self servis bir kiosk ünitesinden tercihleri doğrultusunda temin etmelerini sağlayan kiosklardır.</p>
<a class="link-1" href="#">Devam..</a>
</div>
</div>
</article>
<article class="grid_4">
<div class="wrapper">
<figure class="img-indent2"><img src="images/page3-img5.png" alt="" /></figure>
<div class="extra-wrap">
<h4 class="p1">KİOSK</h4>
<p class="prev-indent-bot">Elektronetin üretmiş olduğu Kioskların çok çeşitli kullanım amaçları vardır. </p>
<a class="link-1" href="#">Devam..</a>
</div>
</div>
</article>
<article class="grid_4 omega">
<div class="indent-left3">
<div class="wrapper">
<figure class="img-indent3"><img src="images/page3-img6.png" alt="" /></figure>
<div class="extra-wrap">
<h4 class="p1">Digital Signame</h4>
<p>Günümüzde teknolojik gelişmelerin yaşamımıza kattığı tartışmasız değerler gözler önündedir. </p>
<p><a class="link-1" href="#">Devam..</a></p>
</div>
</div>
</div>
</article>
</div>
</article>
</div>
<div class="wrapper">
<article class="grid_8">
<h3>Additional Services</h3>
<div class="wrapper">
<figure class="img-indent"><img class="img-border" src="images/page3-img7.jpg" alt="" /></figure>
<div class="extra-wrap">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.</p>
<ul class="list-1">
<li><a href="#">At vero eos et accusamus et iusto</a></li>
<li><a href="#">Dignissimos ducimus qui blanditiis prae</a></li>
</ul>
</div>
</div>
</article>
<article class="grid_4">
<div class="indent-left3">
<h3>How It Works</h3>
<div class="wrapper indent-bot">
<h4 class="img-indent2">Step 1</h4>
<div class="extra-wrap">
Sed ut perspiciatis unde omnis iste voluptatem quia voluptas sit asper natus error sit voluptatem accusan tium doloremque.
</div>
</div>
<div class="wrapper">
<h4 class="img-indent2">Step 2</h4>
<div class="extra-wrap">
Laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="block"></div>
</div>
</section>
</div>
<!--==============================footer=================================-->
<footer>
<div class="padding">
<div class="main">
<div class="container_12">
<div class="wrapper">
<h4 class="indent-bot">Link to Us:</h4>
<ul class="list-services border-bot img-indent-bot">
<li>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><a href="#">Facebook</a></td>
<td align="center"><a class="item-1" href="#">Twitter</a></td>
<td align="center"><a class="item-2" href="#">Picassa</a></td>
<td align="center"><a class="item-3" href="#">You Tube</a></td>
</tr>
</table>
</li>
</ul>
<p class="p1">Elektronet.com © 2011 </p>
<p class="p1">Website Template by <a class="link" target="_blank" href="http://www.sprintbilgi.com/" rel="nofollow">sprintbilgi.com</a></p>
</article>
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
Buda CSS Kodlarım
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {display:inline}
/* Global properties ======================================================== */
html {width:100%}
body {font-family:Arial, Helvetica, sans-serif; font-size:100%; color:#333; min-width:960px; background:#f1f1f1}
.ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.main {
width:960px;
padding:0;
margin:0 auto;
font-size:0.8125em;
line-height:1.3846em;
}
a {color:#39b9d6; outline:none}
a:hover {text-decoration:none}
.wrapper {width:100%; overflow:hidden; position:relative}
.extra-wrap {overflow:hidden}
p {margin-bottom:18px}
.p1 {margin-bottom:8px}
.p2 {margin-bottom:15px}
.p3 {margin-bottom:30px}
.p4 {margin-bottom:40px}
.p5 {margin-bottom:50px}
.reg {text-transform:capitalize}
.fleft {float:left}
.fright {float:right}
.alignright {text-align:right}
.aligncenter {text-align:center}
.color-1 {color:#fff}
.color-2 {color:#333}
.color-3 {color:#39b9d6}
.img-border {border:1px solid #fff}
/*********************************boxes**********************************/
.indent {padding:20px}
.indent-top {padding-top:24px}
.indent-left {padding-left:2px}
.indent-left2 {padding-left:40px}
.indent-left3 {padding-left:20px}
.indent-left4 {padding-left:10px}
.indent-right {padding-right:50px}
.indent-bot {margin-bottom:20px}
.indent-bot2 {margin-bottom:28px}
.prev-indent-bot {margin-bottom:10px}
.img-indent-bot {margin-bottom:25px}
.margin-bot {margin-bottom:35px}
.img-indent {float:left; margin:0 20px 0px 0}
.img-indent2 {float:left; margin:0 15px 0px 0}
.img-indent3 {float:left; margin:0 6px 0px 0}
.buttons a:hover {cursor:pointer}
.menu li a,
.list-1 li a,
.list-2 li a,
.link,
.button,
h1 a {text-decoration:none}
/*********************************header*************************************/
header {
width:100%;
position:relative;
z-index:0;
}
.row-top {
width:100%;
height:130px;
background:url(../images/row-top-tail.jpg) center top repeat-x;
overflow:hidden;
}
h1 {
padding:43px 0 0 7px;
position:relative;
float:left;
}
h1 a {
display:block;
width:300px;
height:160px;
text-indent:-9999em;
background:url(../images/logo.png) 0 0 no-repeat;
}
/***** search form *****/
#search-form {
padding:45px 10px 0 0;
float:right;
}
#search-form fieldset {
position:relative;
width:100%;
display:block;
overflow:hidden;
}
#search-form .search-field {
float:right;
width:300px;
height:34px;
background:url(../images/search-bg.jpg) 0 0 no-repeat;
}
#search-form input {
width:245px;
font-size:14px;
line-height:1.25em;
padding:9px 15px 9px;
font-family:Arial, Helvetica, sans-serif;
color:#646458;
background:none;
border:none;
margin:0;
outline:none;
}
#search-form .search-button {
display:block;
width:20px;
height:21px;
text-indent:-5000px;
background:url(../images/search-icon.png) left top no-repeat;
position:absolute;
right:7px;
top:7px;
}
/***** menu *****/
.menu-row {
width:100%;
background:url(../images/menu-row-tail.gif) center top repeat-x #178fbe;
}
.menu-bg {
width:100%;
background:url(../images/menu-bg.jpg) center top no-repeat;
}
.menu {
padding:0 0 0 0;
background:url(../images/menu-spacer.gif) left top no-repeat;
}
.menu li {
float:left;
position:relative;
background:url(../images/menu-spacer.gif) right top no-repeat;
padding-right:2px;
}
.menu li a {
display:block;
font-size:18px;
line-height:3em;
width:130px;
padding:8px 0 8px;
text-align:center;
color:#fff;
text-transform:capitalize;
letter-spacing:-1px;
}
ul#menu li {
float:left;
position:relative;
width:150px;
}
ul#menu, ul#menu ul {
list-style:none;
margin:0;
padding:10;
}
ul#menu li ul {
display:none;
position:absolute;
top: 19px;
left: 0;
}
ul#menu li:hover ul {
display:block;
padding:10px;
}
.menu li.active a,
.menu > li > a:hover {color:#000}
.row-bot {
width:100%;
min-height:20px;
background:url(../images/row-bot-tail2.gif) center top repeat-x;
}
#page1 .row-bot {background-image:url(../images/row-bot-tail.gif)}
.center-shadow {
width:100%;
height:100%;
min-height:20px;
background:url(../images/center-shadow2.jpg) center top no-repeat;
}
#page1 .center-shadow {background:url(../images/center-shadow.png) center top no-repeat}
/********************
* FEATURE CAROUSEL *
********************/
.carousel-container {
position:relative;
width:960px;
margin:0 auto;
}
#carousel {
height:449px;
width:960px;
position:relative;
}
.carousel-image {
border:0;
display:block;
}
.carousel-feature {
position:absolute;
top:-1000px;
left:-1000px;
cursor:pointer;
}
/*********************************content*************************************/
#content {
width:100%;
border-top:1px solid #fff;
background:url(../images/content-tail.gif) center top repeat-x #f1f1f1;
padding:0;
position:relative;
z-index:1;
}
#page1 #content {border-top:none; background:none; padding:43px 0 60px}
.content-bg {
width:100%;
padding:24px 0 49px;
background:url(../images/content-bg.jpg) center top no-repeat;
}
h3 {
font-size:26px;
line-height:2em;
color:#333;
margin-bottom:3px;
}
h4 {
font-size:17px;
line-height:1.2em;
color:#39b9d6;
text-transform:capitalize;
}
h4 em {
display:block;
color:#333;
text-transform:none;
}
h4 strong {
display:block;
margin-top:-3px;
}
h6 {color:#000}
.text-1 {
display:block;
font-size:18px;
line-height:24px;
color:#999;
}
.text-2 {
display:block;
color:#929292;
}
.title {
display:block;
font-size:18px;
line-height:24px;
color:#39b9d6;
}
.border-bot {
width:100%;
padding-bottom:20px;
background:url(../images/pic-1.gif) 0 bottom repeat-x;
}
.box {
width:278px;
background:url(../images/box-tail.gif) 0 0 repeat-x #1896c1;
}
.box .padding {padding:15px 10px 15px 20px}
.box a {
display:inline-block;
padding-right:18px;
font-size:18px;
line-height:1.222em;
color:#fff;
background:url(../images/marker-3.gif) right 8px no-repeat;
text-transform:capitalize;
text-decoration:none;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.box a:hover {padding-right:25px}
.list-1 li {
line-height:18px;
padding:6px 0 6px 24px;
background:url(../images/marker-2.png) 0 8px no-repeat;
}
.list-1 li a {
display:inline-block;
color:#333;
}
.list-1 li a:hover {text-decoration:underline}
.link:hover {text-decoration:underline}
.link-1 {
display:inline-block;
padding-right:15px;
background:url(../images/marker-1.gif) right 8px no-repeat;
}
dl span {float:left; width:88px}
/***** contact form *****/
#contact-form {width:580px}
#contact-form label {
display:block;
height:44px;
}
#contact-form input {
width:548px;
font-size:15px;
line-height:1.2em;
color:#a0a0a0;
padding:8px 15px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #fff;
background:url(../images/input-tail.gif) 0 0 repeat-x #e6e6e6;
outline:none;
}
#contact-form textarea {
height:158px;
overflow:auto;
width:548px;
font-size:15px;
line-height:1.2em;
color:#a0a0a0;
padding:7px 15px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #fff;
background:url(../images/text-area-tail.gif) 0 0 repeat-x #e5e5e5;
outline:none;
}
.buttons {padding-top:17px; text-align:right}
.buttons a {margin-left:30px}
#contact-form2 {
display:block;
width:580px;
}
#contact-form2 label {
display:block;
height:30px;
overflow:hidden;
}
#contact-form2 input {
float:left;
width:485px;
font-size:12px;
line-height:1.25em;
color:#333;
padding:3px 10px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:none;
background:#fff;
outline:none;
}
#contact-form2 textarea {
float:left;
height:240px;
width:485px;
font-size:12px;
line-height:1.25em;
color:#333;
padding:3px 10px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:none;
background:#fff;
overflow:auto;
outline:none;
}
.text-form {
float:left;
display:block;
font-size:13px;
line-height:24px;
width:74px;
color:#333;
font-family:Arial, Helvetica, sans-serif;
}
.buttons2 {padding:10px 10px 0 0; text-align:right}
.buttons2 a {margin-left:35px}
/****************************footer************************/
footer {
width:100%;
height:395px;
color:#999;
background:url(../images/footer-tail.gif) center top repeat;
position:relative;
z-index:9;
overflow:hidden;
}
footer .padding {padding:35px 0 0}
footer h4 {color:#fff; margin-bottom:18px}
.list-services li {
font-size:18px;
line-height:35px;
text-transform:capitalize;
padding-bottom:9px;
}
.list-services a {
display:inline-block;
text-decoration:none;
color:#999;
padding-left:54px;
background:url(../images/social-icons.png) 0 0px no-repeat;
}
.list-services a.item-1 {background-position:0 -44px}
.list-services a.item-2 {background-position:0 -88px}
.list-services a.item-3 {background-position:0 -132px}
/*********extra***********/
.block {height:395px}
.extra {
min-height:100%;
height:auto !important;
height:100%;
margin: 0 auto -395px;
position:relative;
overflow:hidden;
}
html, body {height:100%}