добавление кнопки с выпадающим меню наряду с другими моими кнопками

Question

У меня есть несколько кнопок в панели навигации:

http://jsfiddle.net/wKHaT/8/

<div class="mynav"> 
<ul class="nav nav-pills"> 
<li class=""><a href="192.168.1.100/aaa">AAA</a></li> 
<li class=""><a href="192.168.1.100/aaa">BBB</a></li> 
<li class=""><a href="192.168.1.100/aaa">CCC</a></li> 
<li class=""><a href="192.168.1.100/aaa">DDD</a></li> 
<li class=""><a href="192.168.1.100/aaa">EEE</a></li> 
</ul> 
</div> 

<!-- Split button --> 
<div class="btn-group mynav"> 
    <button type="button" class="btn btn-danger">Action</button> 
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 

Количество моих кнопок слишком много, так что я должен использовать кнопки раскрывающихся. Здесь есть две проблемы:

1 - стиль моей кнопки выпадающего меню не похож на другие кнопки. любой способ его решить? (выпадающая кнопка не должна появляться с большими размерами)

2- Другая проблема в том, что я хочу, щелкнув по моей кнопке, она идет по ссылке. я могу сделать это onclick, но onclick не является дружеским способом.

Answer 1

Для # 1, отрегулируйте стиль на ваших таблеток, чтобы соответствовать кнопки:

.nav-pills li a {padding: 7px 15px; font-weight: bold;} 

или наоборот:

a.btn {padding: 4px 15px;} 
button.dropdown-toggle {padding: 4px 8px;} 

Для # 2, сделать кнопку якорь вместо:

<a href="#" class="btn btn-danger">Action</a> 

http://jsfiddle.net/isherwood/wKHaT/14

http://jsfiddle.net/isherwood/wKHaT/15

Answer 2

1. попробовать это для вашего стиля:

[http://jsfiddle.net/wKHaT/10/][1]

2. OnClick событие souldn't сделать отрицательный рейтинг для вашего seo