Witam serdecznie mam taki w którym chce stworzyć menu przy uzyciu bootstrapa ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>
<style>
.nav3
{height:60px;overflow-y:hidden;overflow-x: auto;}
.controls {width:580px;margin-left: auto;margin-right: auto;text-align: center;position: relative;
}
.dropdown-menu{}
</style>
</head>
<body>
<div class="container-fluid">
<div class="nav3">
<div class="controls btn-group">
<button class="filter btn btn-primary">
All</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
jeden <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">1-</a></li>
<li><a href="#">2-</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
dwa <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">1-</a></li>
<li><a href="#">2-</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">trzy<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">1-</a></li>
<li><a href="#">2-</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">cztery<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">1-</a></li>
<li><a href="#">2-</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">piec<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">1-</a></li>
<li><a href="#">2-</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">sześć<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">1-</a></li>
<li><a href="#">2-</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">siedem<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">1-</a></li>
<li><a href="#">2-</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">last<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">1-</a></li>
<li><a href="#">2-</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="js/simpleCart.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.2"></script>
<script>
</body>
</html>
... i problem polega na tym że menu chcę zrobić tak że przy pewnej rozdzielczości gdy menu nie mieści sie na ekranie pojawi sie poziomy suwak, dzieki któremu mozna by to menu przesuwać w lewo bądz w prawo ... i wszystko działa spoko tylko za nic nie moge ustawić elementu rozwijanego menu "li" tak żeby było ono na pierwszym planie a nie zakrywało się innymi elementami ... bawiłem się z-index, postion absolute i czym sie tylko dało dla dropdown-menu i innych elementów ale nic to nie dało ... wysokość 60 px dla nav3 dalem tylko dlatego żeby było widac ten element rozwijany ...ma ktoś może jakis pomysł na to ? z góry dziękuje za pomoc. pozdrawiam.
