Elaborar barra com dropdown

[skilledpt]

Boa noite, depois de várias tentativas falhadas a elaborar uma barra com dropdown, peço que alguém me ajude.

Queria fazer algo deste género:

E quando se clica-se no +:

Obs: Exemplo feito no photoshop.

Como está agora:

Agradeçia uma ajuda,
Cumps

 

Conteudo da caixa do dropwdown:

<link rel="shortcut icon" href="https://ssl.gstatic.com/docs/spreadsheets/forms/favicon_jfk2.png" type="image/x-icon" /><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=10; chrome=1;" /><meta name="fragment" content="!" /><base target="_blank" /><link rel="stylesheet" type="text/css" href="" /> <link href="/static/forms/client/css/2463467140-formview_embedded_ltr.css" type="text/css" rel="stylesheet" /><style type="text/css">
</style><center>
<div class="main">
 
 <div class="titulo">
 
 <h2>
  <center>Pedido música no teamspeak
 </h2>
 
 </div>
 <center>
 <div class="ac_box">
  <center>
 <div class="ac_box">
  <center>
 <div class="ac_box">
  <center>
 <div class="ac_box">
  <center>
 <div class="ac_box">
 <script type="text/javascript">
      /**
 * @license
 *! H5F
 * https://github.com/ryanseddon/H5F/
 * Copyright (c) Ryan Seddon | Licensed MIT
 */
	(function(e,t){"function"==typeof define&&define.amd?define(t):e.H5F=t()})(this,function(){var e,t,a,i,n,r,s,l,u,o,c,d,v,f,p,m,h,g,b,y,w,C,N,A,E,$,k=document,x=k.createElement("input"),q=/^[a-zA-Z0-9.!#$%&'*+-\/=?\^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,M=/[a-z][\-\.+a-z]*:\/\//i,L=/^(input|select|textarea)$/i;return r=function(e,t){var a=!e.nodeType||!1,i={validClass:"valid",invalidClass:"error",requiredClass:"required",placeholderClass:"placeholder"};if("object"==typeof t)for(var r in i)t[r]===void 0&&(t[r]=i[r]);if(n=t||i,a)for(var l=0,u=e.length;u>l;l++)s(e[l]);else s(e)},s=function(a){var i,n=a.elements,r=n.length,s=!!a.attributes.novalidate;if(b(a,"invalid",u,!0),b(a,"blur",u,!0),b(a,"input",u,!0),b(a,"keyup",u,!0),b(a,"focus",u,!0),b(a,"change",u,!0),b(a,"click",o,!0),b(a,"submit",function(i){e=!0,t||s||a.checkValidity()||w(i)},!1),!v())for(a.checkValidity=function(){return c(a)};r--;)i=!!n[r].attributes.required,"fieldset"!==n[r].nodeName.toLowerCase()&&l(n[r])},l=function(e){var t=e,a=g(t),n={type:t.getAttribute("type"),pattern:t.getAttribute("pattern"),placeholder:t.getAttribute("placeholder")},r=/^(email|url)$/i,s=/^(input|keyup)$/i,l=r.test(n.type)?n.type:n.pattern?n.pattern:!1,u=f(t,l),o=m(t,"step"),v=m(t,"min"),h=m(t,"max"),b=!(""===t.validationMessage||void 0===t.validationMessage);t.checkValidity=function(){return c.call(this,t)},t.setCustomValidity=function(e){d.call(t,e)},t.validity={valueMissing:a,patternMismatch:u,rangeUnderflow:v,rangeOverflow:h,stepMismatch:o,customError:b,valid:!(a||u||o||v||h||b)},n.placeholder&&!s.test(i)&&p(t)},u=function(e){var t=C(e)||e,a=/^(input|keyup|focusin|focus|change)$/i,r=/^(submit|image|button|reset)$/i,s=/^(checkbox|radio)$/i,o=!0;!L.test(t.nodeName)||r.test(t.type)||r.test(t.nodeName)||(i=e.type,v()||l(t),t.validity.valid&&(""!==t.value||s.test(t.type))||t.value!==t.getAttribute("placeholder")&&t.validity.valid?(A(t,[n.invalidClass,n.requiredClass]),N(t,n.validClass)):a.test(i)?t.validity.valueMissing&&A(t,[n.requiredClass,n.invalidClass,n.validClass]):t.validity.valueMissing?(A(t,[n.invalidClass,n.validClass]),N(t,n.requiredClass)):t.validity.valid||(A(t,[n.validClass,n.requiredClass]),N(t,n.invalidClass)),"input"===i&&o&&(y(t.form,"keyup",u,!0),o=!1))},c=function(t){var a,i,n,r,s=!1;if("form"===t.nodeName.toLowerCase()){a=t.elements;for(var l=0,o=a.length;o>l;l++)i=a[l],n=!!i.attributes.required,r=!!i.attributes.pattern,"fieldset"!==i.nodeName.toLowerCase()&&(n||r&&n)&&(u(i),i.validity.valid||s||(e&&i.focus(),s=!0));return!s}return u(t),t.validity.valid},d=function(e){var t=this;t.validationMessage=e},o=function(e){var a=C(e);a.attributes.formnovalidate&&"submit"===a.type&&(t=!0)},v=function(){return E(x,"validity")&&E(x,"checkValidity")},f=function(e,t){if("email"===t)return!q.test(e.value);if("url"===t)return!M.test(e.value);if(t){var i=e.getAttribute("placeholder"),n=e.value;return a=RegExp("^(?:"+t+")$"),n===i?!1:""===n?!1:!a.test(e.value)}return!1},p=function(e){var t={placeholder:e.getAttribute("placeholder")},a=/^(focus|focusin|submit)$/i,r=/^(input|textarea)$/i,s=/^password$/i,l=!!("placeholder"in x);l||!r.test(e.nodeName)||s.test(e.type)||(""!==e.value||a.test(i)?e.value===t.placeholder&&a.test(i)&&(e.value="",A(e,n.placeholderClass)):(e.value=t.placeholder,b(e.form,"submit",function(){i="submit",p(e)},!0),N(e,n.placeholderClass)))},m=function(e,t){var a=parseInt(e.getAttribute("min"),10)||0,i=parseInt(e.getAttribute("max"),10)||!1,n=parseInt(e.getAttribute("step"),10)||1,r=parseInt(e.value,10),s=(r-a)%n;return g(e)||isNaN(r)?"number"===e.getAttribute("type")?!0:!1:"step"===t?e.getAttribute("step")?0!==s:!1:"min"===t?e.getAttribute("min")?a>r:!1:"max"===t?e.getAttribute("max")?r>i:!1:void 0},h=function(e){var t=!!e.attributes.required;return t?g(e):!1},g=function(e){var t=e.getAttribute("placeholder"),a=/^(checkbox|radio)$/i,i=!!e.attributes.required;return!(!i||""!==e.value&&e.value!==t&&(!a.test(e.type)||$(e)))},b=function(e,t,a,i){E(window,"addEventListener")?e.addEventListener(t,a,i):E(window,"attachEvent")&&window.event!==void 0&&("blur"===t?t="focusout":"focus"===t&&(t="focusin"),e.attachEvent("on"+t,a))},y=function(e,t,a,i){E(window,"removeEventListener")?e.removeEventListener(t,a,i):E(window,"detachEvent")&&window.event!==void 0&&e.detachEvent("on"+t,a)},w=function(e){e=e||window.event,e.stopPropagation&&e.preventDefault?(e.stopPropagation(),e.preventDefault()):(e.cancelBubble=!0,e.returnValue=!1)},C=function(e){return e=e||window.event,e.target||e.srcElement},N=function(e,t){var a;e.className?(a=RegExp("(^|\\s)"+t+"(\\s|$)"),a.test(e.className)||(e.className+=" "+t)):e.className=t},A=function(e,t){var a,i,n="object"==typeof t?t.length:1,r=n;if(e.className)if(e.className===t)e.className="";else for(;n--;)a=RegExp("(^|\\s)"+(r>1?t[n]:t)+"(\\s|$)"),i=e.className.match(a),i&&3===i.length&&(e.className=e.className.replace(a,i[1]&&i[2]?" ":""))},E=function(e,t){var a=typeof e[t],i=RegExp("^function|object$","i");return!!(i.test(a)&&e[t]||"unknown"===a)},$=function(e){for(var t=document.getElementsByName(e.name),a=0;t.length>a;a++)if(t[a].checked)return!0;return!1},{setup:r}});
</script> 
  <center><hr class="ss-email-break" style="display:none;" />
 
 </div>
 
 </div>
                                          
  <center><div class="ss-form">
 
 <form action="https://docs.google.com/forms/d/1URUK_tEYRHw3XJzzL_Gm1kUl0jI-KvfROxfeiGdVdDc/formResponse?embedded=true" method="POST" id="ss-form" target="_self" onsubmit="">
 
 <div class="warn">
    <b>Nota:</b>&nbsp;&nbsp;Lista de Pedidos&nbsp;&nbsp;<span style="font-size: 19px;">→&nbsp;</span> <a href="https://docs.google.com/spreadsheet/ccc?key=0Am-liZKirZ05dDEya3c1cDI4Y2lPWlAwTnZXaHcwWXc#gid=1">Clique aqui</span></div>
  </a>
<div class=" list"="" style="padding-left: 0">
 <p>
 </p><br /> 
 <ol class="ss-form-question errorbox-good" listitem"="" role=">
 
 <div role=">
 
 <div dir="ltr" class="ss-item ss-item-required ss-text">
 
 <div class="ss-form-entry">
 <label class="ss-q-item-label" for="entry_1093977644"> </label> 
 <div class="ss-q-title">
<strong><strong> Nome/Link da Música:<strong><label for="itemView.getDomIdToLabel()" aria-label="(Campo obrigatório)"></label><span class="ss-required-asterisk"></span><br /><br /></strong></strong></strong><strong> </strong> 
 </div><strong><label class="ss-q-item-label" for="entry_1093977644"></label><strong></strong><strong></strong> </strong> 
 <div class="ss-q-help ss-secondary-text" dir="ltr">
 
</div><strong><label class="ss-q-item-label" for="entry_1093977644"></label><strong></strong><strong></strong><strong></strong><strong></strong><input type="text" name="entry.1093977644" value="" class="ss-q-short" id="entry_1093977644" dir="auto" aria-label="Nome/Link da Música:  " aria-required="true" required="" title="" /> </strong> 
 <div class="error-message">
 
 </div><strong><strong><strong><br /></strong></strong> </strong> 
 </div><strong> </strong> 
 </div><strong> </strong> 
 </ol>
 </div><strong><strong></strong><strong></strong> </strong> 
 <div class="ss-form-question errorbox-good" role="listitem">
 
 <div dir="ltr" class="ss-item ss-item-required ss-text">
 
 <div class="ss-form-entry">
 <label class="ss-q-item-label" for="entry_1152973043"> </label> 
 <div class="ss-q-title">
 <strong> O teu nick:<label for="itemView.getDomIdToLabel()" aria-label="(Campo obrigatório)"></label><span class="ss-required-asterisk"><br /><br /></span> </strong> 
 </div><strong><label class="ss-q-item-label" for="entry_1152973043"></label> </strong> 
 <div class="ss-q-help ss-secondary-text" dir="ltr">
 
 </div><strong><label class="ss-q-item-label" for="entry_1152973043"></label><input type="text" name="entry.1152973043" value="" class="ss-q-short" id="entry_1152973043" dir="auto" aria-label="O teu nick:  " aria-required="true" required="" title="" /> </strong> 
 <div class="error-message">
 
 </div><strong><br /> </strong> 
 </div><strong> </strong> 
 </div><strong> </strong> 
 </div><strong><strong></strong><strong></strong><strong></strong> </strong> 
 
 
 </div><strong><input b="" 8511406244098280032"]<input="" type="hidden" name="pageHistory" value="0" /> <input type="hidden" name="fbzx" value="8511406244098280032" /> </strong> 
 <div class="ss-item ss-navigate">
 <tt><span style="color: blue;" aria-hidden="true" class="ss-required-asterisk"></span><tt></tt></tt> <a target="_blank" href="http://www.endereço.com.br"> </a> 
 <center>
 
 <center>
 
 </center>
 
 <center>
 
 </center>
 <br>
 <table id="navigation-table">
 
 <tbody>
 
 <tr>
 
 <td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr">
<input type="submit" name="submit" value="Enviar" id="ss-submit" /> </center>
 </td>
 
 </tr>
 
 </tbody>
 
 </table><a target="_blank" href="http://www.endereço.com.br"> </a> 
 </center>
 
 </div><strong><a target="_blank" href="http://www.endereço.com.br"> </a> <a target="_blank" href="http://www.endereço.com.br"> </a> </strong> 
 </div><strong> <a target="_blank" href="http://www.endereço.com.br"></a><tt></tt><tt></tt> </strong> 
 <div id="docs-aria-speakable" class="docs-a11y-ariascreenreader-speakable docs-offscreen" aria-live="assertive" role="region" aria-atomic="">
 
 </div><strong><a target="_blank" href="http://www.endereço.com.br"><tt><tt></tt></tt> </a> </strong> 
 </div><strong><a target="_blank" href="http://www.endereço.com.br"><tt><tt> <script type="text/javascript" src="/static/forms/client/js/3084181259-formviewer_prd__pt_pt.js"></script><script type="text/javascript">H5F.setup(document.getElementById('ss-form'));_initFormViewer(
        "[100,\x22#CCC\x22,[]\n]\n");</lil>
    </script></tt></tt></a> </strong> 
 </div><strong> </strong> 
</div><strong> </strong> <strong> </strong> <strong> </strong> <strong> </strong>
</div></form> 

Edited October 20, 2016 at 08:16 PM by skilledpt

[jota.fullstack]

Bom dia, podes sempre usar bootstrap e facilitar as coisas. 

[skilledpt]

não e possivel, o forum ta hospedado no forumeiros

[skilledpt]

Já consegi obrigado na mesma, deixo os codigos usados para o caso de alguem precisar.

 

<div id="spoiler" style="display:none"> 
Conteudo escondido
</div> 
<button title="Mostrar" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">+</button>

[jota.fullstack]

Pensei que fosse algo que não estava em produção.