I'm trying to make a navbar with a dropdown menu on the right but when I press the menu it doesn't show up. After commenting out all the css styles, the button works.

.info {
  margin-top: 15%;
  display: table;
  height: 100%;
  width: 100%;
}

#navbar {
  background: red;
  position: fixed;
  top: 0px;
  width: 100%;
}

.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  font-size: 12px;
}

h1 {
  color: rgb(255, 255, 255);
  border: 3px solid #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  font-size: 40px;
  font-weight: normal;
  padding: 30px;
  margin: 15px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.4);
}


/* Menu */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(87, 41, 41);
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 20px 25px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: #04AA6D;
}

.conc {
  float: right;
}

html,
body {
  height: 100%;
}

body {
  background: url(../img/main_learn.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
}

input[type=range] {
  margin: 10px;
  width: 50px;
}

<div id="navbar">
  <ul>
    <li><a href="index.php?idp=glowna">Strona główna</a></li>
    <li><a href="index.php?idp=aktualnosci">Aktualności</a></li>
    <li><a href="index.php?idp=instrumenty">Instrumenty</a></li>
    <li><a href="index.php?idp=musicale">Musicale</a></li>
    <li><a href="index.php?idp=nauka">Nauka</a></li>
    <li><a href="index.php?idp=chart">Charty</a></li>
    <li><a href="index.php?idp=filmy">Filmy</a></li>
    <li><a href="index.php?idp=chaos">Chaos</a></li>
    <li >
      <div >
        <a  href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

        <div  aria-labelledby="dropdownMenuLink">
          <a  href="#">Action</a>
          <a  href="#">Another action</a>
          <a  href="#">Something else here</a>
        </div>
      </div>
      <!-- <a href="index.php?idp=kontakt"><b>Kontakt</b></a> -->
    </li>
  </ul>
</div>

I have tried commenting out single styles overflow: hidden etc. Dropdown button is an example from bootstrap documentation. Popper.js is added.

CodePudding user response：

To create a navbar with a dropdown menu on the right:

The CSS The HTML

body {
          min-height: 100vh;
        }
        .navbar {
          position: fixed;
          width: 100%;
          top: 0;
          left: 0;
        }
        .container {
          float:left;
          clear: left;
        }

<div id="wrapper">  
      <nav >
        <div >
          <a  href="#" cursorshover="true">Title</a>
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
          <div  id="navbarColor03">
            <ul >
              <li >
                <a  href="#" cursorshover="true">Home
                  <span >(current)</span>
                </a>
              </li>
              <li >
                <a  href="{% url 'play' %}" cursorshover="true">Play</a>
              </li>
              <li >
                <a  href="{% url 'chat' %}" cursorshover="true">Chat</a>
              </li>
              <li >
                <a  href="{% url 'about' %}" cursorshover="true">About</a>
              </li>
              <li >
                <a  data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" cursorshover="true">Account</a>
              <div  data-bs-popper="static">
                <a  href="{% url 'profile' %}" cursorshover="true">My Profile</a>
                <a  href="{% url 'settings' %}" cursorshover="true">Settings</a>
                <a  href="{% url 'scores' %}" cursorshover="true">Scores</a>
                <div ></div>
                <a  href="{% url 'logout_user' %}" cursorshover="true" >Log Out</a>
              </div>
            </ul>
            <form >
              <input  type="text" placeholder="Search">
              <button  type="submit" cursorshover="true">Search</button>
            </form>
          </div>
        </div>
      </nav>

CodePudding user response：

I solved the problem just add style

.dropdown {
position: top;

}

and remove

/* overflow: hidden; */

from ul styling