menu w css nie rozszerza się topbar

pytanie zadane 4 marca 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)

witam mam problem z moim menu(pisanym w lessie)

kod:

*
{
	margin:0;
	padding:0;
}
.navbar
{
	position:relative;
	min-height:50px;
	margin-bottom:20px;
	background-color:gray;
}
.nav
{
	margin-bottom:0;
	padding-left:0;
	list-style:none;
}
.nav>li
{
	position:relative;
}
.nav>li>a
{
	position:relative;
	display:block;
	padding:15px;
	color:#fff;
	text-decoration:none;
}
.nav>li>a:hover
{
	background-color:olive
}
@media (min-width:768px)
{
	.navbar-nav,.navbar-nav>li
	{
		float:left;
	}
	.navbar-nav>li>a
	{
	padding-top:15px;
	padding-bottom:15px
	}
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    
    
    
</head>
<body>
    <div class="navbar">
       <ul class="nav navbar-nav">
           <li class="active"><a href="#">Siema</a></li>
           <li><a href="#">Siema</a></li>
           <li><a href="#">Siema</a></li>
           <li><a href="#">Siema</a></li>
       </ul>
        
    </div>
</body>
</html>

efekt:

problem w tym że jak np nadam margin-top elementowi .navbar-nav, co prawda nadaje się górny margines ale szary pasek się nie rozszerza (element .navbar)

@media (min-width:768px)
{
	.navbar-nav
	{
		padding-top: 20px;
	}
	.navbar-nav,.navbar-nav>li
	{
		float:left;
	}
	.navbar-nav>li>a
	{
	padding-top:15px;
	padding-bottom:15px
	}
}

efekt:

1 odpowiedź

odpowiedź 4 marca 2016 przez Janusz92 Bywalec (2,150 p.)

Musiałbyś do diva .navbar dodać również float left, bo bez tego lista <ul> wypływa poza tego diva i nie rozciąga go.

http://codepen.io/anon/pen/wGKdwr