overflow:autoで指定された親要素の中の特定の子要素だけ親要素からはみ出して表示させたい

Question

こんにちは。cssのoverflow:autoで指定された親要素の中の特定の子要素だけ親要素からはみ出して表示させたいのですが、どのようにすれば良いか分からなく困っています。解決策をご存知の方、是非ご教授くださらないでしょうか。よろしくお願いします。

補足：bootstrapを使用しています。以下ソースコードです。

<ul class="dropdown-menu">の部分をテーブルからはみ出して表示させたいのですが, <div class="table-responsive">でoverflow-x:auto;が指定されているので思ったように出来ないのだと考えています。

[html]

<div class="table-responsive"> <table class="table table-striped table-bordered table-hover table-condensed">

<thead>

  <tr>

    <th class="text-center">

      <div class="btn-group">

        <button class="btn btn-link dropdown-toggle" data-toggle="dropdown" style="color:black;">

            ステータス <span class="caret"></span>

        </button>

        <ul class="dropdown-menu">

          <li><a>~</a><li>

          <li><a>~</a><li>

        </ul>

      </div>

    </th>...

[css]

.table-responsive {

min-height: .01%;

overflow-x: auto;

}

@media screen and (max-width: 767px) {

.table-responsive {

width: 100%;

margin-bottom: 15px;

overflow-y: visible;

-ms-overflow-style: -ms-autohiding-scrollbar;

border: 1px solid #ddd;

}

Answer 1

子要素をHTML側でクラス分けするのはどうでしょう？

はみ出して表示させる要素

<要素名 class=" （元からあるものは省略） ov-v">
略
</要素名>

.ov-v{
    overflow: visible;
}

はみ出さずに表示させる要素

<要素名 class=" （元からあるものは省略） ov-h">
略
</要素名>

.ov-v{
    overflow: hidden;
}

好き嫌いが別れる方法だとは思いますが、特定の要素だけということなら機能クラスは便利ですよ

Comments

[nilnull]

返信が遅れてしまい申し訳ありません。
ご教授通りやったらできました！
ご教授して下さり有り難うございました！

Answer 2

ソースコードを掲載出来ませんか？

Comments

[nilnull]

掲載しました。もし解決策をご存知でしたら、どうかご教授よろしくお願いします。

Answer 3

positiion:absolute;で絶対配置するんじゃダメですか？

Comments

[nilnull]

回答を下さりありがとうございます。試してみたのですが、上手く行きませんでした。。