Navbar selection option

Question

I am using a navbar-inverse using bootstrap, in a django project, that contain a 4 "li" buttons. The thing is, I want the firth one to have a 2 choices (select from one of them), here is the code of the "li" :

<ul class="nav navbar-nav">
                <li class="{% block home_active %}{% endblock %}"><a href="{% url 'music:home' %}"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp; Home</a></li>
                <li class="{% block cloud_active %}{% endblock %}"><a href="{% url 'music:cloud' %}"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>&nbsp; Cloud</a></li>
                <li class="{% block albums_active %}{% endblock %}"><a href="{% url 'music:index' %}"><span class="glyphicon glyphicon-cd" aria-hidden="true"></span>&nbsp; Albums</a></li>
                <li class="{% block songs_active %}{% endblock %}">
                    <a href="{% url 'music:songs' 'all' %}"><span class="glyphicon glyphicon-music" aria-hidden="true">
                    </span>&nbsp; Songs</a>
                </li>
            </ul>

two more options within the 4 one, like it will show you "Songs" with a flesh and when you click it, you will choose from 2 choices — , Oct 10 '17 at 19:50
This seems like the case for nested lists, check this out - https://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list — Utkarsh Sinha, Oct 10 '17 at 19:55
no it's not :/ , I don't want two boxes showing at first, I want just one "Song" and when you click it, the two options appear (like select option I guess), and then you click on one of the options. — , Oct 10 '17 at 20:02
If you are looking for a drop-down list, take a look at this - https://www.w3schools.com/howto/howto_js_dropdown.asp — Utkarsh Sinha, Oct 10 '17 at 20:09

score 0 · Accepted Answer · answered Oct 10 '17 at 20:08

It seems you want something like this. W3 has a live demo here.

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

That is exactly what I am looking for, Thank you so much – Oct 10 '17 at 20:10 — , Oct 10 '17 at 20:10

Navbar selection option

1 Answers1