Как отобразить несколько полей со списком в qml?

Question

Я хочу несколько выпадающих меню справа один за другим.

У меня есть два выпадающих меню.При щелчке он перекрывается другим.

В qml я создал 2 папки.dropdownmenu.qml -> для screen.qml, dropdowndownmenu1.qml -> для screen.qml и код выпадающего меню один и тот же, только разные элементы списка.Я использую загрузчик для загрузки qml в screen.qml.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick 2.12
import QtQuick.Controls 2.12


Rectangle {
    id:comboBox
    property variant items: ["ADULT", "CHILD"]

    anchors.centerIn: parent
    width: 141
    height: 30;
    z: 0
    smooth:true;


    Rectangle
    {
        id:chosenItem
        radius:4;
        width:100;
        height:30;
        color: "#454b4d"
        smooth:true;

        Image
        {
            id: name
            source: "/Images/Menu_Button"
            anchors.fill: parent
        }

        Text {
            id:chosenItemText
            anchors.centerIn: parent
            color: "black"
            renderType: Text.NativeRendering
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.family: "Courier"
            font.bold: true
            font.capitalization: Font.SmallCaps
            font.pointSize: 10
            text: "ADULT"
            smooth:true
        }

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                comboBox.state = comboBox.state==="dropDown"?"":"dropDown"
            }
        }
    }


    Rectangle
    {
        id:dropDown
        width:100;
        height:0;
        clip:true;
        border.color: "black"
        anchors.top:  chosenItem.bottom;
        anchors.margins: 2;


        ListView {
            id:listView
            height:1000;
            model: comboBox.items
            currentIndex: 0


            delegate: Item{
                id: dele
                width:comboBox.width;
                height: comboBox.height;

                Rectangle
                {
                    id:highlighter;
                    anchors.fill: parent;
                    color: "#F1C40F";
                    visible: listView.currentIndex===index
                }


                Text {
                    text: modelData
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.margins: 5;
                    color: "black"
                    elide: modelData.elideMode
                }
                MouseArea {
                    anchors.fill: parent;
                    hoverEnabled: true
                    onClicked: {

                        comboBox.state = ""
                        chosenItemText.text = modelData;
                        listView.currentIndex = index;
                    }
                }
            }


        }
    }

    states: State {
        name: "dropDown";
        PropertyChanges { target: dropDown; height:30*comboBox.items.length }
    }

    transitions: Transition {
        NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 }
    }
}

Я хочу, чтобы раскрывающийся список был виден правильно.Это не должно пересекаться.Как этого можно достичь?Для справки: прикрепление скриншота

Снимок для справки: раскрывающееся меню «взрослый» скрывается раскрывающимся «вкл.».Но я хочу, чтобы взрослое меню, которое вы нажимали, должно отображаться в верхней части меню, а не в его задней части.