How to show menu items in a pop-up in bootstrap modal dialog box according to the psd?

Question

I'm using Bootstrap v3.3.5 in my website.

Now I've HTML code of modal dialog box as follows :

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

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 Edit Event, Invite Members, Delete Event . 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.

PFA the psd image for reference of what I need to do.

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

I want the exactly same functionality working.

Thanks.

Answer 1

try this HTML which uses bootstrap :

<div class="dropdown">
    <p class="dropdown-toggle"  data-toggle="dropdown">
    <a class="glyphicon glyphicon-option-horizontal"></a></p>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>