How to show menu items in a pop-up in bootstrap modal dialog box according to the psd?
<p>I'm using <strong>Bootstrap v3.3.5</strong> in my website.</p>

<p>Now I've HTML code of modal dialog box as follows :</p>

<pre><code>&lt;div style="display: block; padding-right: 13px;" id="myModal-event" class="modal fade in" role="dialog"&gt;
  &lt;div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;"&gt;
    &lt;div class="modal-content" style="border:0;"&gt; 
      &lt;div role="document" class="modal-dialog event-planner"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;h4 id="myModalLabel" class="modal-title"&gt;Event Details&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-sm-6 col-md-6 col-sm-12"&gt;
                &lt;div class="event-title"&gt;
                NewDemoEvent5
                &lt;input name="hid_event_id" id="hid_event_id" value="501" type="hidden"&gt;
                &lt;/div&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/time.png" alt=""&gt; 12:00 pm&lt;/li&gt;
                  &lt;li&gt;&lt;img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/calender.png" alt=""&gt; Thursday, January 7&lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0)" onclick="viewLocationOnMap();"&gt; &lt;img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/location.png" alt=""&gt;&lt;/a&gt;
                    &lt;a href="javascript:void(0)" onclick="viewLocationOnMap();"&gt;Home Nightclub, Sydney, New South Wales, Australia&lt;/a&gt;
                  &lt;/li&gt;
                    &lt;li&gt;&lt;img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/group_event.png" alt=""&gt;Group: Boxing Day&lt;/li&gt;
                    &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6 col-md-6 col-sm-12"&gt;
                &lt;div class="form-group" align="right"&gt;
                  &lt;select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;"&gt;
                    &lt;option value="0"&gt;I am..&lt;/option&gt;
                    &lt;option value="1" selected="selected"&gt;Going&lt;/option&gt;
                    &lt;option value="2"&gt;Maybe&lt;/option&gt;
                    &lt;option value="3"&gt;Not Going&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;hr&gt;
            &lt;div class="row"&gt;
              &lt;div class="event-menu"&gt;
                &lt;ul class="nav nav-tabs" id="myTab"&gt;
                  &lt;li class=""&gt;&lt;a aria-expanded="false" href="#description" data-toggle="tab"&gt;Description&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#feeds" data-toggle="tab"&gt;Feeds&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#going" data-toggle="tab"&gt;Going&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#maybe" data-toggle="tab"&gt;Maybe&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="active"&gt;&lt;a aria-expanded="true" href="#notgoing" data-toggle="tab"&gt;Not Going&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;hr&gt;   
            &lt;div class="tab-content"&gt;
              &lt;div class="tab-pane" id="description"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
                  DemoEvent5 is added successfully.
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;        
              &lt;div class="tab-pane" id="feeds"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
                  Work In Progress
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tab-pane" id="going"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
                    &lt;div class="col-md-2 col-sm-2 col-xs-12 no-padding"&gt;
                      &lt;div class="block"&gt; &lt;img src="http://app.campusknot.com/file/pic/user/1585_100_square.jpg" class="img-event" alt=""&gt;
                        &lt;span class="author"&gt;Sushil Kadam&lt;/span&gt;
                        &lt;span class="degree"&gt;&lt;/span&gt; 
                      &lt;/div&gt;
                    &lt;/div&gt;               
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;    
              &lt;div class="tab-pane" id="maybe"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;    
              &lt;div class="tab-pane active" id="notgoing"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;    
            &lt;/div&gt;    
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button data-dismiss="modal" class="btn btn-default" type="button"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>On this modal dialog I want to show three black colored bold dots and upon clicking on those dots a vertical pop-up menu should open up consisting of menus <strong>Edit Event, Invite Members, Delete Event</strong>. Each of the menu items should be separated by a horizontal line. When user clicks somewhere else apart from the opened-up menu the menu pop-up should get close. </p>

<p>PFA the psd image for reference of what I need to do.<a href="https://i.stack.imgur.com/uNTn7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uNTn7.png" alt="enter image description here"></a></p>

<p>Three bold black-colored dots are actually got hidden behind the pop-up menu.</p>

<p>I want the exactly same functionality working.</p>

<p>Thanks.</p>