Lista Multiselect utilizando html, javascript, css

Descripción general: Se debe crear una lista de multi selección de dos niveles, utilizando javascript, css, html y es opcional utilizar alguna librería como jquery. A continuación, se muestran todas las características y están acompañadas de imágenes. Características de la lista: Ver [login to view URL] 1. Es una lista que aparece cuando se da clic en un botón. 2. La lista está contenida dentro de un div con la forma que se muestra en la imagen, hay que respetar la forma, la sobra y los colores. 3. La lista se ubica automáticamente de acuerdo a la posición del botón, para que coincidan los márgenes derechos del botón y del Div que contiene la lista, tal como se ve en la imagen. 4. La lista desaparece si se de clic fuera de la lista o se da clic sobre la X que aparece en la esquina superior derecha. 5. La lista es multi nivel, eso significa que hay opciones de primer nivel y de segundo nivel. 6. Si el primer nivel tiene sub-opciones aparecerá un Icono con un signo + 7. Si no tiene sub-opciones no tendrá ningún icono. 8. Por default las opciones de primer nivel no mostrarán las subopciones sino hasta que se dé clic en el icono + Ver [login to view URL] 1. Cuando el puntero del mouse pase sobre una opción el color del fondo cambiará a celeste claro, cuando el mouse deje de estar sobre esa opción el color del fondo volverá a ser blanco. Ver [login to view URL] 1. Cuando se dé clic sobre el Icono + se abrirá la opción que contiene sub-opciones 2. Y el Icono con el símbolo + se cambiará por un icono con el símbolo – 3. Si se da clic sobre el Icono con símbolo – se contraerá la opción. 4. Las letras de las opciones del 1er nivel están en color negro, las de segundo nivel en color gris. Ver [login to view URL] 1. La lista es multi-select, puede elegirse varias opciones a la vez. 2. Se pueden elegir tanto opciones del nivel 1 como opciones del nivel 2. 3. Cuando se clic sobre una opción la lista No desaparece para que el usuario pueda elegir más opciones y en la opción seleccionada aparece un icono de check del lado izquierdo de la opción seleccionada. 4. Cada vez que se da clic sobre una opción se va a ver reflejada en el botón. 5. Si se selecciona varias opciones, estas se mostrarán en el botón, separadas por una coma. 6. Puede ser que si se seleccionan muchas opciones no se puedan ver todas en el botón, pero igual debe actualizarse el botón. Ver Imagen 5 7. Si tiene más de 11 opciones se activa un scroll 8. Si se selecciona la opción [Seleccionar todas] la lista desaparece y el botón se actualiza con la palabra Todas 9. Si se han seleccionado varias opciones y se vuelve a dar clic sobre el botón la lista mostrará cuales opciones habían sido seleccionadas previamente. Ver [login to view URL] 1. La lista tiene la posibilidad de realizar búsquedas. 2. Si se escribe una parte del nombre de una opción, desaparecerán todas las opciones que no coincidan con el criterio de búsqueda y en caso de ser necesario el tamaño del div se actualizará y el scroll desaparecerá. 3. Si habiendo realizado una búsqueda se da clic sobre la opción [Seleccionar Todas] se seleccionará todas las opciones que sean visibles en la lista y la lista desapareceré.