title: Menu and Submenu in Angularjs
body: <p>I'm new at AngularJS and I want to design menu and submenus as shown in following Image -</p>
  
  <p><a href="https://i.stack.imgur.com/9Y9oy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Y9oy.png" alt="Required Menu"></a></p>
  
  <p>I have already created menus in AngularJS as showing in following image-
  Same code also added in <a href="http://jsfiddle.net/ashokyede20/pLnvsnLa/46/" rel="nofollow noreferrer">http://jsfiddle.net/ashokyede20/pLnvsnLa/46/</a>
  <a href="https://i.stack.imgur.com/ajLTv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ajLTv.png" alt="enter image description here"></a></p>
  
  <p>The following is HTML page for this menu--</p>
  
  <pre><code> &lt;div id="wrapper1" class="container" ng-app="menuApp"&gt;
     &lt;div id="nav1" ng-controller="menuController"&gt;
     &lt;div&gt;&lt;span&gt; Dynamic Menu&lt;/span&gt; &lt;/div&gt;
           &lt;ul&gt;
              &lt;li ng-repeat="menu in menus" class="has-children" ng-click="changeClass(menu)" lastOrFirst="{{menu.lastOrFirst}}" &gt;
                &lt;a href="{{menu.action}}"&gt;{{menu.title}} &lt;span &gt;&lt;/span&gt;&lt;/a&gt;
                &lt;ul ng-if="menu.menus"&gt;
                &lt;div&gt;
                  &lt;li ng-repeat="submenu in menu.menus" class="has-children"&gt;
                    &lt;a href="{{submenu.action}}"&gt;{{submenu.title}}&lt;/a&gt;
                        &lt;ul ng-if="submenu.menus" ng-class="submenu.class"&gt;
                          &lt;li ng-repeat="subsubmenu in submenu.menus"&gt;
                            &lt;a href="{{subsubmenu.action}}"&gt;{{subsubmenu.title}}&lt;/a&gt;
                          &lt;/li&gt;
                        &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;/div&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS--</p>
  
  <pre><code>#wrapper1
      {
          width: auto;
          margin: 10px;
          text-align: left;
      }
      #nav1 div {color:Red; margin:10px;}
      #nav1 ul{list-style-type:none; padding:0; margin:0; }
      #nav1 ul li {display:inline-block; background-color:#E0E0E0; min-width:150px;}
      #nav1 ul li 
      {
          background-image:linear-gradient(to bottom, #ffffff, #eaeaea);
          background-repeat: repeat-x;
          border-bottom: 1px solid #d1d1d1;
          border-top: 1px solid #eaeaea;
          border-left: 1px solid #eaeaea;
          border-right: 1px solid #eaeaea;
              }
      #nav1 ul li:hover{background-color:#FFF; }
      #nav1 ul li:hover{ background-image:linear-gradient(to bottom, #eaeaea, #ffffff);
          background-repeat: repeat-x;
          border-bottom: 1px solid #eaeaea;
          border-top: 1px solid #d1d1d1;
          border-left: 1px solid #eaeaea;
          border-right: 1px solid #eaeaea;
          }
      #nav1 ul li:hover &gt; a
       {
           border-bottom-color:#FFF;
           outline:0;
           text-decoration:none;
           border-top:solid 2px #1971c4;
           padding-top:12px;
           color:#1971c4;
           }
       #nav1 ul ul li:hover &gt; a
       {
           border-top: 1px solid #eaeaea;
           }
       #nav1 ul li.has-children &gt; a:after {
          content: "";
          background: url("http://www.cmegroup.com/etc/designs/cmegroup/cmegroupClientLibs/images/cme-header-sprite.png") no-repeat;
          width: 8px;
          height: 8px;
          display: inline-block;
          margin-left:5px;
      }
      #nav1 ul li a,visited{display:block; padding:15px; color:#888; text-decoration:none;}
      #nav1 ul li:hover &gt; ul{display:block;}
      #nav1 ul li a:hover{color:#444;}
      #nav1 &gt; ul li:hover a{color:#444;}
  
      #nav1 ul ul li{display:block;}
      #nav1 ul ul{position:absolute; background-color:#FFF; min-width:225px;}
      #nav1 ul ul li:hover{background-color:#F9F9F9;}
      #nav1 ul li:hover ul li a,visited{color:#888;}
      #nav1 ul ul li:hover ul{display:block;}
      #nav1 ul ul ul {margin: -47px 0 0 224px; background-color:#F9F9F9;}
      #nav1 ul ul ul li a:hover{color:#444;}
      #nav1 {vertical-align:middle; text-align:center;}
  </code></pre>
  
  <p>and Controller
  ----------------------------------JS----------------
  menuApp.controller("menuController", function ($scope, $http) {</p>
  
  <pre><code>$scope.menus = [
  {
  
      title: "Menu #1",
      action: "#"
  },
  {
  
      title: "Menu #2",
      action: "#",
      menus: [
        {
            title: "SubMenu #1",
            action: "#"
        },
        {
            title: "SubMenu #2",
            action: "#"
        },
        {
            title: "SubMenu #3",
            action: "#"
        },
        {
            title: "SubMenu #4",
            action: "#"
        }
      ]
  },
  {
      title: "Menu #3",
      action: "#",
      menus: [
      {
          title: "SubMenu #1",
          action: "#",
          menus: [
              {
                  title: "Sub-SubMenu #1",
                  action: "#"
              },
              {
                  title: "Sub-SubMenu #2",
                  action: "#"
              }
          ]
      }
    ]
  },{
    title: "Menu #4",
    action: "#",
    menus: [
      {
          title: "SubMenu #1",
          action: "#",
          menus: [
              {
                  title: "Sub-SubMenu #1",
                  action: "#"
              },
              {
                  title: "Sub-SubMenu #2",
                  action: "#"
              }
          ]}]},{
    title: "Menu #5",
    action: "#",
    menus: [
    {
        title: "SubMenu #1",
        action: "#"
    },
    {
        title: "SubMenu #2",
        action: "#"
    }
  ]}];});
  </code></pre>
  
  <hr>
  
  <p>But I'm facing problem to show submenu area as highlighted in first image. I dont know how to get submenu's top left and top right.</p>
  
  <p>Can anyone please help me out?</p>
  
  <p>Thanks a lot in advance...</p>