Styling HTML to mimic Facebook like dropdown menu

Question

I need some advice and some help. I am not so much of a css guy, but I want to learn.

I am trying adjust some css for my drop down menu.

I have the following issues:

The dropdown button should be as big as the image, leaving only the area of the dropdown triangle.
The dropdown triangle should be aligned vertically in the middle and centered horizontally.
The dropdown options should be aligned with the right border and open inwards towards the left, instead of the opposite.

Can someone help me with adjusting this? I want to learn the techniques, but trial on error is such a long way.

My code is as folowing:

<html>
<head>
<head>
<body>
    <style>
        body {
            background-color: white;
            font: normal 11px Tahoma,Verdana,Arial,Sans-Serif;
            color: #222;
            height: 380px;
        }

        .dropdown {
            display: block;
            display: inline-block;
            margin: 0px 3px;
            position: relative;
        }

        /* ===[ For demonstration ]=== */

        .dropdown { margin-top: 25px }

        /* ===[ End demonstration ]=== */

        .dropdown .dropdown_button {
            cursor: pointer;
            width: auto;
            display: inline-block;
            padding: 0px 0px;
            border: 1px solid silver;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            border-radius: 2px;
            font-weight: bold;
            color: #717780;
            line-height: 16px;
            text-decoration: none !important;
            background: white;
        }

        .dropdown input[type="checkbox"]:checked +  .dropdown_button {
            border: 1px solid #3B5998;
            color: white;
            background: silver;
            -moz-border-radius-topleft: 2px;
            -moz-border-radius-topright: 2px;
            -moz-border-radius-bottomright: 0px;
            -moz-border-radius-bottomleft: 0px;
            -webkit-border-radius: 2px 2px 0px 0px;
            border-radius: 2px 2px 0px 0px;
            border-bottom-color: silver;
        }

        .dropdown input[type="checkbox"] + .dropdown_button .arrow {
            display: inline-block;
            width: 1px;
            height: 1px;
            border-top: 5px solid silver;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
        }

        .dropdown input[type="checkbox"]:checked + .dropdown_button .arrow { border-color: white transparent transparent transparent }

        .dropdown .dropdown_content {
            position: absolute;
            border: 1px solid #777;
            padding: 0px;
            background: white;
            margin: 0;
            display: none;
        }

        .dropdown .dropdown_content li {
            list-style: none;
            margin-left: 0px;
            line-height: 16px;
            border-top: 1px solid #FFF;
            border-bottom: 1px solid #FFF;
            margin-top: 2px;
            margin-bottom: 2px;
        }

        .dropdown .dropdown_content li:hover {
            background: silver;
        }

        .dropdown .dropdown_content li a {
            display: block;
            padding: 2px 7px;
            padding-right: 15px;
            color: black;
            text-decoration: none !important;
            white-space: nowrap;
        }

        .dropdown .dropdown_content li:hover a {
            color: white;
            text-decoration: none !important;
        }
        .dropdown input[type="checkbox"]:checked ~ .dropdown_content { display: block }
        .dropdown input[type="checkbox"] { display: none }
    </style>    

    Here there will be a lot of text and a lot of other menu buttons. So hope the angle of the dropdown will open to the left instead of the right.
    <div class="dropdown" id="dropdown">
        <input type="checkbox" id="drop1" />
        <label for="drop1" class="dropdown_button"><img src="http://ichef.bbci.co.uk/wwfeatures/43_43/images/live/p0/17/tx/p017txf6.jpg" height="43" width="43" /><span class="arrow"></span></label>
        <ul class="dropdown_content">
            <li><a href="#">Privacy settings</a></li>                       
            <li><a href="#">Account settings</a></li>
            <li><a href="#">Logout</a></li>                                
        </ul>

    </div>
</body>
</html>

Now I managed to fix the border around the image by correcting the padding padding: 0px 0px; but then I feel like working in blind...can someone help pointing me where to fix my adjustments?

Answer 1

Give your span an id of 'arrowSpan' and apply this style in your css:

#arrowSpan{
    display:block;
    margin-left:17px;
    margin-top:2px;
    margin-bottom:5px;
}

Also add position:absolute; and right:0 to your .dropdown .dropdown_content styles.

Here's a fiddle: http://jsfiddle.net/zsp7t/1/

As for collapsing the dropdown when clicking outside, it is possible. There's a bunch of examples online using jQuery, here's a couple that can help you get started:

You also mentioned that you wanted to learn more, so check these sites out to help you increase your skills:

Styling HTML to mimic Facebook like dropdown menu

Question

1 answers

solution1
1 ACCPTED 2013-07-24 14:17:54

Styling HTML to mimic Facebook like dropdown menu

Question

1 answers

solution1 1 ACCPTED 2013-07-24 14:17:54

solution1
1 ACCPTED 2013-07-24 14:17:54