メニューを開くすべてのリストアイテムへのボタンを作成するにはどうすればよいですか？

Androidの「Playマーケット」のようなモバイルレスポンシブウェブページを作成しています。内部にボタンがあるdivのリストがあります。各ボタンは、一意のリンクを持つdivを開きます。

すべてのdivを異なる位置に配置せずに、このようなものを効率的な方法で作成するにはどうすればよいですか？

これは私のJSfiddleです：http：//jsfiddle.net/e0byofe2/

position: relative;メニューのプロパティを使用してみました-div内の要素が混乱しました。

これを使用しposition: absolute;てみましたが、グローバルな方法で各divにメニューを配置できません。

HTML：

<div class="main">

    <div id="header-wrap">
        <div id="header" class="clear">
            <img src="arrow.jpg" />
            <img src="search.jpg" style="float: right;" />
        </div>
    </div>

    <div class="content">
        <div id="apps-header">Apps</div>
        <div class="line"></div>
        <div class="apps">


            <div class="app">
                <img src="app_icon1.jpg" class="app_icon" />
                <div class="app_info">
                    <div class="app_name">text text text</div>
                    <div class="app_comp">text </div>
                    <div class="stars">
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="hstar.png" />
                    </div>  
                    <div class="free">FREE</div>
                </div>
                <div style="float: left;">
                    <img src="3dots.png" class="dots"/>
                </div>
            </div>

            <div class="app">
                <img src="app_icon1.jpg" class="app_icon" />
                <div class="app_info">
                    <div class="app_name">text text text</div>
                    <div class="app_comp">text </div>
                    <div class="stars">
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="hstar.png" />
                    </div>  
                    <div class="free">FREE</div>
                </div>
                <div style="float: left;">
                    <img src="3dots.png" class="dots"/>
                </div>
            </div>

            <div class="app">
                <img src="app_icon1.jpg" class="app_icon" />
                <div class="app_info">
                    <div class="app_name">text text text</div>
                    <div class="app_comp">text </div>
                    <div class="stars">
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="hstar.png" />
                    </div>  
                    <div class="free">FREE</div>
                </div>
                <div style="float: left;">
                    <img src="3dots.png" class="dots"/>
                    <div style="width: 202px; height: 106px; border: 1px solid grey; position: relative; ">

                    </div>
                </div>
            </div>

            <div class="app">
                <img src="app_icon1.jpg" class="app_icon" />
                <div class="app_info">
                    <div class="app_name">text text text</div>
                    <div class="app_comp">text </div>
                    <div class="stars">
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="hstar.png" />
                    </div>  
                    <div class="free">FREE</div>
                </div>
                <div style="float: left;">
                    <img src="3dots.png" class="dots"/>
                </div>
            </div>







        </div>


    </div>






</div>

CSS：body {マージン：0; 高さ：100％; }

.main{
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

#header-wrap {
    width: 100%;
    position: fixed;
    background-color: #689f38;
    height: 62px;
}

#header {
    width: 100%;
    position: absolute;
    bottom: 0;
    box-shadow: 0px 0px 19px rgb(10, 29, 90);
    -webkit-box-shadow: 0px 0px 19px rgb(10, 29, 90);
    -moz-box-shadow: 0px 0px 19px rgb(10, 29, 90);
}


.content{
    padding-top: 80px;
    width: 100%;
    /*height: 100%;*/
    background-color: #eeeeee;
}

#apps-header{
    margin-left: 10px;
    font-family: arial;
    background-image: url('triangle.png');
    background-position: bottom;
    width: 86px;
    background-repeat: no-repeat;
    background-size: 10px;
}

.line{
    width: 100%;
    height: 2px;
    background-color: #458b09;
    margin-top: 10px;
}

.apps{
    width: 100%;
    /*border: 1px solid black;*/
    padding-top: 10px;
    height: 100%;
}

.app{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0px 0px 6px rgb(145, 145, 145);
    -webkit-box-shadow: 0px 0px 6px rgb(145, 145, 145);
    -moz-box-shadow: 0px 0px 6px rgb(145, 145, 145);
    background-color: #fafafa;
    padding: 10px 8px;
    margin: 5px 8px;
    display: inline-table; /******/
}

.app_icon{
    width: 83px;
    height: 83px;
    float: left;
}

.app_info{
    /*border: 1px solid red;*/
    float: left;
    width: 210px;
    height: 81px;
    padding-left: 20px;
}

.app_name{
    font-family: arial;
    font-size: 18px;

}

.app_comp{
    font-family: arial;
    font-size: 16px;    
    color: #595959;
}

.stars img{
    float: left;
    width: 14px; 
    height: 14px;
}

.free{
    color: #69a03a;
    font-family: arial;
    position: relative;
    bottom: -25px;
    left: 105px;
    font-size: 14px;
}

.3dots{
    height: 25px;
}

私があなたに与えることができる最も良い例は、Androidで「Playマーケット」を開いてランダムなアプリを検索すると、たくさんのアプリdivの結果が得られることです。右上隅にある3つのドットをクリックすると、特定のアプリのdivに2つのアイテムが含まれるリストが開きます。

次のようになります。

他のアプリを選択して隅にある3つのドットを押すと、2つのオプションが付いた同じリストが表示されますが、アプリのdivが表示されます。