<div id="app">
  <ul class="menu">
    <li v-for="item in items" :class="{selected:item.id == selected}"  :aria-current="item.id == selected" :aria-expended="item.id == selected || 'false'" class="menu__item"><button @click.prevent="updateMenu(item.id)">{{item.name}}</button>
       <ul v-show="item.submenu !== null"class="menu__submenu">
        <li v-for="submenu in item.submenu" class="menu__item menu__item--submenu"><a :href="submenu.link">{{submenu.name}}</a>
      </ul>
    </li>
  </ul>
</div>
.menu{
  $root:&;
  max-width:80%;
  display:flex;
  justify-content:space-between;
  margin:0 auto;
  list-style:none;
  font-family:Arial;
  border-bottom:1px solid #000000;
  padding:20px 0;
  
  &__item{
    position:relative;
    &.selected{
      font-weight:bold;
      #{$root}__submenu{
        visibility:visible;
        opacity:1;
      }
    }
    
    button{
      background:none;
      border:none;
      font-size:20px;
    }
  }
  
  &__submenu{
    visibility:hidden;
    opacity:0;
    position:absolute;
    left:0;
    top:100%;
    background:#FFFFFF;
    padding:10px 10px 10px 20px;
    
    #{$root}__item{
    list-style:none;
      font-weight:normal;
      
    }
  }
}
View Compiled
new Vue({
    el: '#app',
  methods:{
    updateMenu(id){
      if(id === this.selected){
        this.selected=null
      }else{
        this.selected=id
      }
    }
  },
    data: {
        items: [{
                id: "1",
                name: "Projet",
                link: "#",
                submenu: [{
                        id: "projet",
                        name: "Projet",
                        link: "#"
                    },
                    {
                        id: "projet",
                        name: "Projet",
                        link: "#"
                    },
                    {
                        id: "projet",
                        name: "Projet",
                        link: "#"
                    },
                    {
                        id: "projet",
                        name: "Projet",
                        link: "#"
                    },
                    {
                        id: "projet",
                        name: "Projet",
                        link: "#"
                    }
                ]
            },
            {
                id: "2",
                name: "Projet",
                link: "#",
                submenu: [{
                        id: "projet",
                        name: "Projet",
                        link: "#"
                    },
                    {
                        id: "projet",
                        name: "Projet",
                        link: "#"
                    },
                    {
                        id: "projet",
                        name: "Projet",
                        link: "#"
                    },
                    {
                        id: "projet",
                        name: "Projet",
                        link: "#"
                    },
                    {
                        id: "projet",
                        name: "Projet",
                        link: "#"
                    }
                ]
            },
            {
                id: "3",
                name: "Projet",
                link: "#"
            },
            {
                id: "4",
                name: "Projet",
                link: "#",
                submenu: [{
                    id: "projet",
                    name: "Projet",
                    link: "#"
                }]
            },
            {
                id: "5",
                name: "Projet",
                link: "#",
                submenu: [{
                    id: "projet",
                    name: "Projet",
                    link: "#"
                }]
            }
        ],
        selected: undefined,
    }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js