CSS Menüler [Güncel]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  <script type="text/javascript" src="http://img26.xooimage.com/files/3/7/e/ddaccordion-d2e107.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Ziyaret Ediniz Lt00660065006e003a Hyperend.Tr.Gg
***********************************************/

</script>   <script type="text/javascript">


ddaccordion.init({
   headerclass: "silverheader", //Shared CSS class name of headers group
   contentclass: "submenu", //Shared CSS class name of contents group
   revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
   mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
   collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
   defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
   onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
   animatedefault: false, //Should contents open by default be animated into view?
   persiststate: true, //persist state of opened contents within browser session?
   toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
   togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
   animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
   oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
      //do nothing
   },
   onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
      //do nothing
   }
})


</script>   <style type="text/css">  .applemenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/ border: 1px solid #9A9A9A; }  .applemenu div.silverheader a{ background: black url(http://img.webme.com/pic/h/hyperend/ustt.png) repeat-x center left; font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif; color: white; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto; padding: 5px 0; padding-left: 8px; text-decoration: none; }   .applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{ color: white; }   .applemenu div.selected a, .applemenu div.silverheader a:hover{ background-image: url(http://img.webme.com/pic/h/hyperend/ustt.png); color: white; }  .applemenu div.submenu{ /*DIV that contains each sub menu*/ background: white; padding: 5px; height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/ }    </style>

<div align="center"> <div class="applemenu"> <div class="silverheader"><a href="http://www.hyperend.tr.gg" _fcksavedurl="http://www.hyperend.tr.gg">Dynamic Drive</a></div> <div class="submenu">Contenido Aqui here</div> <div class="silverheader"><a href="http://www.hyperend.tr.gg" _fcksavedurl="http://www.hyperend.tr.gg">CSS Examples</a></div> <div class="submenu">Contenido Aqui here</div> <div class="silverheader"><a href="http://www.hyperend.tr.gg" _fcksavedurl="http://www.hyperend.tr.gg">JavaScript Kit</a></div> <div class="submenu">Contenido Aqui here</div> <div class="silverheader"><a href="http://www.hyperend.tr.gg" _fcksavedurl="http://www.hyperend.tr.gg">CSS Drive</a></div> <div class="submenu">Contenido Aqui here<br /> <img src="http://i27.tinypic.com/sy7295.gif" _fcksavedurl="http://i27.tinypic.com/sy7295.gif" alt="" /></div> <div class="silverheader"><a href="http://www.hyperend.tr.gg" _fcksavedurl="http://www.hyperend.tr.gg">JavaScript Kit</a></div> <div class="submenu">Contenido Aqui here</div> </div> </div>

<link rel="stylesheet" type="text/css" href="http://img6.xooimage.com/files/3/1/6/sdmenu-ad4ec2.css" />     <script type="text/javascript" src="http://img44.xooimage.com/files/2/b/9/sdmenu-daba96.js">
        /***********************************************
        * Slashdot Menu script- By DimX
        * Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
        * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
        ***********************************************/
    </script>     <script type="text/javascript">
    // <=!=[=C=D=A=T=A=[
    var myMenu;
    window.onload = function() {
        myMenu = new SDMenu("my_menu");
        myMenu.init();
    };
    // ]=]=>
    </script>
<script type="text/javascript">
    // <=!=[=C=D=A=T=A=[
    var myMenu;
    window.onload = function() {
        myMenu = new SDMenu("my_menu");
        myMenu.init();
    };
    // ]=]=>
    </script>

<div id="my_menu" class="sdmenu">
      <div>
        <span>Online Tools</span>
        <a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
        <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
        <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
        <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
        <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
        <a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
      </div>
      <div>
        <span>Support Us</span>
        <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
        <a href="http://www.dynamicdrive.com/link.htm">Link to Us</a>
        <a href="http://www.dynamicdrive.com/resources/">Web Resources</a>
      </div>
      <div class="collapsed">
        <span>Partners</span>
        <a href="http://www.javascriptkit.com">JavaScript Kit</a>
        <a href="http://www.cssdrive.com">CSS Drive</a>
        <a href="http://www.codingforums.com">CodingForums</a>
        <a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
      </div>
      <div>
        <span>Test Current</span>
        <a rel="nofollow" href="?foo=bar">Current or not</a>
        <a href="./">Current or not</a>
        <a href="index.html">Current or not</a>
        <a rel="nofollow" href="index.html?query">Current or not</a>
      </div>
    </div>

<ul class="menu"> <!-- Menu Begin  -->  <li>       <a href="http://www.hyperend.tr.gg" _fcksavedurl="http://www.hyperend.tr.gg"> <img src="http://img.webme.com/pic/h/hyperend/user.png" _fcksavedurl="http://img.webme.com/pic/h/hyperend/user.png" alt="user.png">     <span class="name">Ana Sayfa</span>     <span class="description">açıklama buaraya gelecektir.</span>     </a> </li>  <li>     <a href="http://www.hyperend.tr.gg/defter.htm" _fcksavedurl="http://www.hyperend.tr.gg/defter.htm"> <img src="http://img.webme.com/pic/h/hyperend/comment.png" _fcksavedurl="http://img.webme.com/pic/h/hyperend/comment.png" alt="comment.png">     <span class="name">Ziyaretci Def.</span>     <span class="description">açıklama buaraya gelecektir.</span>     </a> </li>  <li>     <a href="http://www.hyperend.tr.gg/about.htm" _fcksavedurl="http://www.hyperend.tr.gg/about.htm"> <img src="http://img.webme.com/pic/h/hyperend/print.png" _fcksavedurl="http://img.webme.com/pic/h/hyperend/print.png" alt="print.png">     <span class="name">Hakkımızda</span>     <span class="description">açıklama buaraya gelecektir.</span>     </a> </li>  <li>     <a href="http://www.hyperend.tr.gg/destek.htm" _fcksavedurl="http://www.hyperend.tr.gg/destek.htm"> <img src="http://img.webme.com/pic/h/hyperend/edit.png" _fcksavedurl="http://img.webme.com/pic/h/hyperend/edit.png" alt="edit.png">     <span class="name">Destek OL!</span>     <span class="description">açıklama buaraya gelecektir.</span>     </a> </li>   </ul> <!-- Menu End -->

.menu , .menu ul {     width:202px;     margin:auto;     padding:5px;     list-style-type: none;     overflow:hidden;     border:1px solid #eee; } .menu li {     float:left;     position:relative; } .menu li img {     float:left;     margin: 5px 0 0 5px;     border:none; } .menu li a .name {     float:left;     width:166px;     margin:0 0 0 5px;     font-weight:bold;     font-size:0.7em;     cursor:pointer; } .menu li a:active, .menu li a:focus {      outline:0; } .menu li a .description{     float:left;     width:161px;     margin:-5px 0 0 5px;     font-weight:normal;     font-size:0.7em;     cursor:pointer; } .menu li a:link, .menu li a:visited {     height:35px;     font-size:1em;     color:#000;     text-decoration:none;     line-height:20px;     border:1px solid #fff;     display:block;     font-weight:bold; } .menu li a:hover  {     background:#eee; }