I understand very little of css and am having difficulty putting a dropdown menu in the navigation bar of a page.
I have several links in this navigation bar and needed to open a menu with a list of other options when clicking on an item.
HTML:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown active">
<a href="index.html">Inicio </a>
<ul class="dropdown-menu">
<li class="active">
<a href="index.html">Home</a>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
CSS:
.color-links a{
color: #000;
text-decoration: none;
}
.color-links a:hover{
color: #fff;
}
.itens-lista{
width: 24%;
margin-right: 11px;
}
.nav-tabs{
border-bottom: none;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
border: none;
background-color: #ee7e4b;
}
.nav>li>a:focus, .nav>li>a:hover{
background-color: #ee7e4b;
border: none;
}
.topo-fone{
text-align:right;
font-size:18px;
margin-top: 5px;
}
@media (max-width: 767px) {
.topo-fone{
text-align: center;
}
.itens-lista{
width: 50%;
margin-right: 0px;
}
}