サブメニューに使えそうなドロップダウン | Bootstrapでホームページを作る

の色を変えられるのが割と良い感じです。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<div class="btn-group">
  <button type="button" class="btn btn-danger">くだもの</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">りんご</a></li>
    <li><a href="#">みかん</a></li>
    <li><a href="#">スイカは野菜</a></li>
    <li class="divider"></li>
    <li><a href="#">メロンも野菜？</a></li>
  </ul>
</div>
 
<div class="btn-group">
  <button type="button" class="btn btn-info btn-sm ">くだもの</button>
  <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">りんご</a></li>
    <li><a href="#">みかん</a></li>
    <li><a href="#">スイカは野菜</a></li>
    <li class="divider"></li>
    <li><a href="#">メロンも野菜？</a></li>
  </ul>
</div>