The two remaining functions are now surprisingly easy to write. First, we need to make a function that sets a heading for the menu. This is the setter function that can be used from outside the class, in the case where a heading wasn't sent to the class's constructor:
        
public function set heading(value:Sprite):void {
            _heading = value;
            draw();
        }

Next, we just need to write the addItem() function. This function will accept a Sprite object as a parameter:
        
public function addItem(item:Sprite):void {
            item.y = _currentY;
            _panel.addChild(item);
            _currentY += item.height;
            draw();
        }

Notice, after setting the passed in Sprite's y position to the _currentY, the Sprite (known as item in the function body) is simply added to the display list of the panel. The _currentY variable then has its value adjusted by incrementing it (adding to its existing value) with item's height. This gets it ready for the next item to be added, should the function be called again. Finally, draw() is called. Remember, draw() will remove everything from the display list and add it all back again, including redrawing the mask to match the size of the panel!

Here is the completed DropMenu class:
package {
    import flash.display.*;
    import flash.events.*;
    import com.greensock.*;
    
    public class DropMenu extends Sprite {
        private var _heading:Sprite;
        private var _panel:Sprite;
        private var _mask:Shape;
        
        private var _currentY:Number;
    
        public function DropMenu(heading:Sprite = null) {
            _currentY = 0;
            _panel = new Sprite();
            _mask = new Shape();
            _heading = heading;
            if(_heading != null) {
                draw();
            }
        }
        public function draw():void {
            if(_heading != null) {
                //first remove any existing elements, if any:
                while(this.numChildren > 0) {
                    this.removeChildAt(0);
                }
                addChild(_heading);
                _panel.x = _heading.x;
                _panel.y = _heading.y + _heading.height - _panel.height;
                addChild(_panel);
                
                _mask.graphics.clear();
                _mask.graphics.beginFill(0xFF0000);
                _mask.graphics.drawRect(0, 0, _panel.width, _panel.height);
                _mask.graphics.endFill();
                _mask.x = _heading.x;
                _mask.y = _heading.y + _heading.height;
                addChild(_mask);
                _panel.mask = _mask;
                //add event listeners:
                _heading.addEventListener(MouseEvent.ROLL_OVER, over);
                this.addEventListener(MouseEvent.ROLL_OUT, out);
            } else {
                throw new Error("Cannot draw DropDown menu. Please set heading first");
            }
        }
        private function over(event:MouseEvent):void {
            TweenLite.to(_panel, 0.5, {y:_mask.y});
        }
        private function out(event:MouseEvent):void {
            TweenLite.to(_panel, 0.5, {y:_mask.y - _panel.height});
        }
        public function set heading(value:Sprite):void {
            _heading = value;
            draw();
        }
        public function addItem(item:Sprite):void {
            item.y = _currentY;
            _panel.addChild(item);
            _currentY += item.height;
            draw();
        }
    }
}

Taking the DropMenu class out for a test drive
Cool! Now we can turn our attention again to the fla file and test all this out. Delete the code from frame 1 of the fla file, and paste in this instead:
var btn:MenuButton = new MenuButton();
btn.label = "My new menu is cool!";
btn.fontColor = 0xFFFFFF; //white
btn.width = 250;
btn.height = 40;
btn.fontSize = 18;
btn.backgroundColor = 0xFF0000; // red

var menu:DropMenu = new DropMenu();
menu.x = menu.y = 50;
addChild(menu);
menu.heading = btn;

var btn2:MenuButton = new MenuButton();
btn2.label = "This is the first item!";
btn2.fontColor = 0xFFFFFF; //white
btn2.width = 250;
btn2.height = 40;
btn2.fontSize = 18;
btn2.backgroundColor = 0x00FF00; //green

menu.addItem(btn2);

var btn3:MenuButton = new MenuButton();
btn3.label = "This is the second item!";
btn3.fontName = "Times New Roman";
btn3.fontColor = 0xFFFFFF; //white
btn3.width = 250;
btn3.height = 40;
btn3.fontSize = 20;
btn3.backgroundColor = 0x0000FF; //blue

menu.addItem(btn3);

var btn4:MenuButton = new MenuButton();
btn4.label = "This is the third item!";
btn4.fontColor = 0xFFFFFF; //white
btn4.width = 250;
btn4.height = 40;
btn4.fontSize = 18;
btn4.backgroundColor = 0x999999; //gray

menu.addItem(btn4);

This is a long block of code, I know, but if you read it over, it ought to be pretty obvious to you everything it's doing. We are simply using all those setter functions we made in the MenuButton class, and now you can see how easily we can play around with different settings and change fonts, colors, or whatever we want! We can also do silly stuff like make some of the buttons shorter or less wide than others. Whatever we do, the DropMenu class seems to handle it just fine! By the way, we also have the option of sending all of the settings to the constructor instead, like so:
var btn:MenuButton = new MenuButton("My new menu is cool", "Arial", 18, 0xFFFFFF, false, 0xFF0000, 250, 40);

var menu:DropMenu = new DropMenu(btn);
menu.x = menu.y = 50;
addChild(menu);

var btn2:MenuButton = new MenuButton("This is the first item!", "Arial", 18, 0xFFFFFF, false, 0x00FF00, 250, 40);
var btn3:MenuButton = new MenuButton("This is the second item!", "Times New Roman", 20, 0xFFFFFF, false, 0x0000FF, 250, 40);
var btn4:MenuButton = new MenuButton("This is the third item!", "Arial", 18, 0xFFFFFF, false, 0x999999, 250, 40);

menu.addItem(btn2);
menu.addItem(btn3);
menu.addItem(btn4);

The above code block does exactly the same thing as the former. I myself prefer setting properties individually, because then I don't have to memorize their order. But it's nice that we have the option. You can also add click handlers to the buttons as well, even after they have been added to the menu. Unlike the old Actionscript 2.0 days, there isn't all of that nesting going on anymore. The buttons have been added to the display list of the menu, but they aren't nested, and can still be programmed without all those complicated paths and dot syntax we used to have to do. For example, add these lines to the end of the code:
btn4.addEventListener(MouseEvent.CLICK, btn4Click);
function btn4Click(event:MouseEvent):void {
    btn4.label = "You clicked me!!";
    btn4.backgroundColor = 0x000000; //black
}

(Because of the way I numbered the buttons, btn4 is actually the third item on the dropdown, but you get the idea). I am also having a bit of fun with the properties in the above. You can see that when the third item is clicked, rather than just tracing a message (like I am always so inclined to do), I just change the label of the button, and turn it's background color to black, just for good measure! Here's a working demo:

(Click the third dropdown item and watch it change its message and background color!)

Well, now the DropMenu class is finished. But, like all the TV infomercial pitchmen are inclined to say, "But wait, there's MORE!" For one thing, I need to cover embedded fonts like I mentioned earlier, and how they affect the menu buttons. Then I am going to demonstrate how the DropMenu class isn't limited to just using instances of the MenuButton class! All that and more on the next page!