javascript - Vertical dropdown menu on click -

hello im trying make exact replica of menu right here : http://bmw-spanos.gr/master_en/en/contact_info.asp

check picture below:

that's code, sorry before. problem dropdown (dotted image) want go down on click , leave big space on image

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <style type="text/css">     body { font-family:arial, helvetica, sans-serif; font-size:0.75em; color:#000;}       .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }     .dropdown dd { position:relative; }     .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}     .dropdown a:hover { color:#5d4617;}      .dropdown dt {background:#fff; display:block; padding-right:20px; width:221px;}     .dropdown dt span {cursor:pointer; display:block; padding:5px;}     .dropdown dd ul { background:#fff none repeat scroll 0 0;  color:blue; display:none;                       left:0px; padding:5px 0px;  top:2px; width:221px; list-style:none; padding-right:20px;  }     .dropdown span.value { display:none; }     .dropdown dd ul li { padding:5px; display:block; }     .dropdown dd ul li a:hover { color:blue;}      .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }     .flagvisibility { display:none;}   </style> <script type="text/javascript">     $(document).ready(function() {         $(".dropdown img.flag").addclass("flagvisibility");          $(".dropdown dt a").click(function() {             $(".dropdown dd ul").toggle();         });          $(".dropdown dd ul li a").click(function() {             var text = $(this).html();             $(".dropdown dt span").html(text);             $(".dropdown dd ul").hide();             $("#result").html("selected value is: " + getselectedvalue("sample"));         });          function getselectedvalue(id) {             return $("#" + id).find("dt span.value").html();         }          $(document).bind('click', function(e) {             var $clicked = $(e.target);             if (! $clicked.parents().hasclass("dropdown"))                 $(".dropdown dd ul").hide();         });           $("#flagswitcher").click(function() {             $(".dropdown img.flag").toggleclass("flagvisibility");         });     }); </script> 

<dl id="sample" class="dropdown">     <dt><a href="#"><span>Επικοινωνία</span></a></dt>     <dd>         <ul>             <li><a href="#">Ζητήστε Πληροφορίες<img class="flag" src="br.png" alt="" /><span class="value">br</span></a></li>             <li><a href="#"> Ραντεβού για service<img class="flag" src="fr.png" alt="" /><span class="value">fr</span></a></li>             <li><a href="#"> Ραντεβού για test drive<img class="flag" src="de.png" alt="" /><span class="value">de</span></a></li>             <li><a href="#"> guestbook<img class="flag" src="in.png" alt="" /><span class="value">in</span></a></li>         </ul>     </dd> </dl> 

a css solution:

depending on browsers want support, can use checkbox first element, , use :checked in css:

jsfiddle

html:

<ul id="topmenu">     <li><input type="checkbox" id="menu-checkbox"/><label for="menu-checkbox">menu</label>         <ul>             <li>items</li>             <li>items</li>             <li>items</li>         </ul>     </li> </ul> 

css:

#topmenu ul{     display:none; } #menu-checkbox:checked + ul {     display:block; } 

you use css style checkbox. works on ie9+.