Нужна помощь с CSS и HTML (выпадающий список).

В общем, никак не могу понять, как сделать две вещи.

Список выпадает из пустого тега div.
К списку применила transition с 50px до 250px.
К родительскому элементу списка ul применила before и сделала с его помощью чёлку (справа). Так вот, вопросы:
1. Как сделать так, чтобы при перемещении списка с ним двигалась и чёлка? Чтобы не было так, как на втором фото.
2. На 1-ом фото видно, что в свёрнутом виде списка текст вылазит за пределы границы. Как сделать так, чтобы он не вылазил, а тоже был свёрнут?