0

ここflipkart.comにあるような水平ドロップダウンメニューを作ろうとしています.ホバー時にフローティングサイドバーメニューがあります.

これは私の試みです[レスポンシブデザインを使用]:-

JSFIDDLE リンク - http://jsfiddle.net/QSFPK/

<div class="row-fluid">
<div class="span12">
<div class="span3">
<ul class="nav nav-tabs nav-stacked">
    <hr style="margin: -1px;">
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
        <ul class="dropdown-menu rightMenu">
            <li><a id="logout" href="#">Sign Out</a></li>
        </ul>
    </li>
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
        <ul class="dropdown-menu rightMenu">
            <li><a id="logout" href="#">Sign Out</a></li>
        </ul>
    </li>
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
        <ul class="dropdown-menu rightMenu">
            <li><a id="logout" href="#">Sign Out</a></li>
        </ul>
    </li>
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
        <ul class="dropdown-menu rightMenu">
            <li><a id="logout" href="#">Sign Out</a></li>
        </ul>
    </li>
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
        <ul class="dropdown-menu rightMenu">
            <li><a id="logout" href="#">Sign Out</a></li>
        </ul>
    </li>
    <div class="clearFix"></div>
</ul>
</div>
    <div class="span9">
        <h2>Hello World</h2>
        <h2>Hello World</h2>
        <h2>Hello World</h2>
        <h2>Hello World</h2>
        <h2>Hello World</h2>
    </div>
</div>
    </div>

そしてここに私のCSSがあります:-

.rightMenu {
    position:relative;
    float:right;
}
.right-caret {

    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid #000000;
    display: inline-block;
    height: 0;
    opacity: 1;
    vertical-align: top;
    width: 0;    
}
.right {
    float: right;
}

JSFIDDLE リンク - http://jsfiddle.net/QSFPK/ どんな助けも素晴らしいでしょう。

ありがとう

4

1 に答える 1