Gecisli Menu

<style type="text/css"> <!-- 
.clearboth{clear:both;}
#csstabs li{ padding:2px;}
#csstabs{ position:relative; width:230px; height:290px; }
#csstabs ul{margin-left:0px!important;}
#csstabs h3{ padding:5px; height:15px; line-height:15px;text-align:center; cursor:hand; display:block; font-size:11px;font-family:arial; margin:0;border:1px solid #ccc;border-radius:5px;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;transition: all 0.5s linear;}
.tabcontent{padding: 10px 0px 0px 20px; width:200px; position:absolute; left:0;top:30px;height:250px;display:block;margin:0;}
#tab1 .tabcontent{background:#fff;z-index:2;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;transition: all 0.5s linear;}
#tab1 h3{z-index:3;width:70px;position:absolute;margin-left:15px;top:0;cursor:hand;background:#eee;}
#tab2 .tabcontent{background:#fff;z-index:1; opacity:0;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;transition: all 0.5s linear;}
#tab2 h3{width:90px;position:absolute;margin-left:110px;top:0;cursor:hand;}
#csstabs:hover h3, #tabs:focus h3, #tabs:active h3{background:none;z-index:0;}
#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent{z-index:0;opacity:0;-webkit-transition : opacity .75s ease-in;}
#tab1:hover h3,#tab1:focus h3,#tab1:active h3{z-index:4;background:#ccc;}
#tab1:hover .tabcontent,#tab1:focus .tabcontent,#tab1:active .tabcontent{background:#eee;z-index:3; opacity:1; -webkit-transition : opacity 2s ease-in;}
#tab2:hover h3,#tab2:focus h3,#tab2:active h3{z-index:4;background:#ccc;}
#tab2:hover .tabcontent,#tab2:focus .tabcontent,#tab2:active .tabcontent{background:#eee;z-index:3; opacity:1; -webkit-transition : opacity 2s ease-in;}
#sidebar {background-color:#fff!important;overflow:hidden;}
#sidebar ul li.menu {background-image: url(https://theme.webme.com/designs/clean/arrows/gray.png);background-repeat:no-repeat;padding-left:30px;list-style-type:none;height:30px;line-height:20px;-webkit-transition: all 1s linear;-moz-transition: all 1s linear;-o-transition: all 1s linear;transition: all 1s linear;}
#sidebar ul li.menu:hover {background-image: url(https://theme.webme.com/designs/clean/arrows/blue-light.png);}
li.menu a{font-size:14px;color:#454545;font-family:arial;font-weight: normal;-webkit-transition: all 1s linear;-moz-transition: all 1s linear;-o-transition: all 1s linear;transition: all 1s linear;}
li.menu a:hover{color:black;}
--> </style>

<div class="widget">
<div class="boxen">
<h2>Clean-Deneme :</h2>
<div id="csstabs">
<div id="tab1">
<h3>Başlık 1</h3>
<ul class="tabcontent">
    <ul class="main-menu">
        <li class="menu"><a href="#">Clean-Deneme</a></li>
        <li class="menu"><a href="#">Clean-Deneme</a></li>
        <li class="menu"><a href="#">Clean-Deneme</a></li>
        <li class="menu"><a href="#">Clean-Deneme</a></li>
        <li class="menu"><a href="#">Clean-Deneme</a></li>
        <li class="menu"><a href="#">Clean-Deneme</a></li>
        <li class="menu"><a href="#">Clean-Deneme</a></li>
    </ul>
</ul>
</div>
<!--end #tab1//-->
<div id="tab2">
<h3>Başlık 2</h3>
<ul class="tabcontent">
    <ul class="main-menu">
        <li class="menu"><a href="#">Clean-Deneme</a></li>
        <li class="menu"><a href="#">Clean-Deneme</a></li>
        <li class="menu"><a href="#">Clean-Deneme</a></li>
        <li class="menu"><a href="#">Clean-Deneme</a></li>
    </ul>
    <img src="https://www.anothersomething.org/wp-content/uploads-anothersomething/2012/05/partners1-208x115.jpg" alt="" /> </ul>
    </div>
    <!--end #tab2//-->  <br class="clearboth" />
    <!--stops things going funny in IE7//--></div>
    <!--end #csstabs//--></div>
    </div>