Geek asks and answers

Creating a parent container extends to the width of an absolutely positioned child and vice versa

I am working with some markup for a drop down menu.

The markup is as follows:

<div class="select">
    <a href="#" class="anchor menu-active">
        <label>val1</label><span class="arrow"><label></label></span>
    </a>

    <div class="container menu-visible">
        <ul>
            <li>
                <a value="val1" class="item-selected">val1</a>
            </li>
            <li>
                <a value="val2333333333">val2333333333</a>
            </li>
        </ul>
    </div>
</div>

The first arepresents a menu item, and the containerdiv represents a list of submenu items.

  • The width of the submenu items is variable since they are generated dynamically.
  • The text in the anchor is shown in bold, so in some cases the width of the anchor may be larger than the list of submenus.

: container, anchor . , , . , , anchor container.

CSS, , , anchor , container :

.container{
    position: absolute;
}

.anchor{
    font-weight: bold;
}

li{
    background: blue;
}

ul{
    display: inline-block;
}

.select{
    background: red;
    display: inline-block;
}

: http://jsfiddle.net/MxdQS/

CSS, , javascript, :

, , : enter image description here

: 2 1 , , ?

- , ?

+3
1

DEMO

CSS

.container{
    position: absolute;
    width:150px;
}

.anchor{
    font-weight: bold;
}
ul{
    margin:0;
    padding:0;
}

li{
    background: blue;
    list-style:none;
    margin:0;
    padding:0l
}



.select{
    background: red;
    display: inline-block;
    width:150px;
}

UPDATE

DEMO

+1

More articles:


All Articles