Adding sub contextMenus in Google Chrome extension

Basically a combination of answers above worked for me. This is my example (there are 2 ways to create menus - declare in var or directly use in chrome.contextMenus.create) :

var contextMenuItem = {
    "id": "addRecipe",
    "title": "Add Recipe",
    "contexts": ["selection"]
};

chrome.contextMenus.create(contextMenuItem);

chrome.contextMenus.create({
    title: "Add new recipe name",
    parentId: "addRecipe",
    id: "name",
    contexts:["selection"]
});

chrome.contextMenus.create({
    title: "Add shopping list",
    parentId: "addRecipe",
    id: "list",
    contexts:["selection"]
});

chrome.contextMenus.create({
    title: "Add ingredients",
    parentId: "addRecipe",
    id: "ingredients",
    contexts:["selection"]
});

chrome.contextMenus.create({
    title: "Add cooking steps",
    parentId: "addRecipe",
    id: "steps",
    contexts:["selection"]
});

I figured it out. I needed to specify an id in the parent menu and then reference the parent ID in the other menus as follows:

chrome.contextMenus.create({
  title: "The name of the parent menu",
  id: "parent",
  contexts:["selection"]
});

chrome.contextMenus.create({
  title: "The first action to click",
  parentId: "parent",
  contexts:["selection"],
  onclick: theFirstFunction
});

chrome.contextMenus.create({
  title: "The second action to click",
  parentId: "parent",
  contexts:["selection"],
  onclick: theSecondFunction
});