Dropdown bubble for a menu item

Question

I am a tyro with OOCSS and think I bit off more than I can chew in creating a dropdown bubble for a menu item.

I removed as much element specific code as I could, but still think I don't quite have it down.

I know my class names are all messed up, but I'm really just messing around right now.

For example: should the dropdownContain have the positioning, or more like set the margin that gives the position .drop .dropdownContain {margin-left: -100px} that way the dropdownContain can be re-used later?

Any suggestions?

CSS:

li {
    list-style-type: none;
}

ol, ul {
    list-style-type: none;
    font: 13px Verdana, 'Lucida Grande';
    cursor: pointer;
}
ol>li, ul>li {
    margin: .2em 0
}
.navDropDown .drop {
    position: relative;
}
.triangle {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
}
.dropOut .triangle {
    top: -8px;
    left: 50%;
    margin-left: -8px;
}
.dropdownContain {
    position: absolute;
    z-index: 2;
    left: 50%;
    margin-left: -100px;
    top: -400px;
 }
.dropOut {
    width: 200px;
    background: white;
    float: left;
    position: relative;
    margin-top: 0px;
    opacity: 0;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
    transition: all .1s ease-out;
}
.dropOut .dropDown {
    float: left;
    padding: 10px 5px;
}
.dropList {
    width: 155px;
    padding: 5px 0 5px 15px;
    margin: 0px 10px;
    color: #777;
    border-radius: 4px;
    transition: background .1s ease-out;
}
.dropDown .dropList:not(:first-child):hover {
    background: #f6f6f6;
    width: 155px;
}
.drop:hover .dropdownContain {
    top: 18px;
}
.drop:hover .dropOut {
    opacity: 1;
    margin-top: 8px;
}

HTML:

<div class="header">
    <div class="set">
        <ul class="navDropDown">
            <li class="drop">
                <img src="http://pogoplug.com/images_5_0/head-ico-settings.png" />
                <div class="dropdownContain">
                    <div class="dropOut">
                        <div class="triangle"></div>
                        <ul class="dropDown">                                
                        <li class="dropList"><strong>E-Mail</strong>
                        </li>
                        <li class="dropList">Settings</li>
                        <li class="dropList">Account</li>
                        <li class="dropList">Download Software</li>
                        <li class="dropList">Help</li>
                        <li class="dropList">Sign Out</li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</div>

http://jsfiddle.net/mHvYQ/5/

Answer 1

To be honest I don't quite understand what you are asking in your question, so I'll just do a general review:

You said your class names are temporary (you should only be posting "finished" code here), however currently they are very confusing because they are all very generic or don't actually say what they are for.

Apart from that you have far too many class names and possibly too many unnecessary DIVs. Use class names only in exceptional cases. For example, having all list items have the same class name is useless. Also use other HTML elements other than div and lists. header, 'nav' and h# would help here a lot.

The triangle DIV is unnessary. Use the CSS pseudo element :before instead.

And have the title element ("E-Mail") should not be identified by be the first element of the list, but should either have a class, or possible moved out of the list all together and marked up with a heading element (h3 or so).

The HTML could look something like this:

<header>
    <nav>
        <ul>
            <li class="dropdown">
                <img src="http://pogoplug.com/images_5_0/head-ico-settings.png" />
                <div class="dropdown-menu">
                    <h3>E-Mail</h3>
                    <ul>       
                        <li>Settings</li>
                        <li>Account</li>
                        <li>Download Software</li>
                        <li>Help</li>
                        <li>Sign Out</li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</header>