Falling flat in implementing submenu

1

Hello,
I have tried enough and spent a lot of time to figure out what should i do and i fell miserably flat. First thing, I wanted to see Movies Menu in the same line as Brand. Secondly, what I really wanted to see is When i hover over Movies, it should display the list of movies submenu namely, Telugu, Hindi, and English. Currently, they are not displaying the way I wanted. Kindly Help in correcting me.


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Simplified Movies</title>
    <link rel="stylesheet" href="SimplifiedMovies.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  </head>
  <style>
    .navbar{
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 100;
      color: white;
      font-size: 20px;
      padding: 0 20px 0 0;
      background: rgb(144, 3, 252);
      /* max-width: 1440px; */
      height: 100px;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,.3)
    }
    .inline-middle{
      display: inline-block;
      vertical-align: middle;
    }
    .nav-menu-item {
    position: relative;
}
* {
    box-sizing: border-box;
    letter-spacing: .3px;
}
  </style>


  <body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">

      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <div class="inline-middle nav-menu-item nav-menu-submenu-open">
              	<a class="tab-header-anchor" href="/movies">
              		<div class="tab-header inline-middle">MOVIES</div>
              	</a>
              		<div class="nav-submenu ">
              			<a href="/movie-videos/telugu-movies">
              				<div class="nav-menu-item nav-menu-submenu-open nav-submenu-item ">Telugu</div>
              			</a>
              			<a href="/movie-videos/English-movies">
              				<div class="nav-menu-item nav-menu-submenu-open nav-submenu-item ">English</div>
              			</a>
              			<a href="/movie-videos/hindi-movies">
              				<div class="nav-menu-item nav-menu-submenu-open nav-submenu-item ">Hindi</div>
              			</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
      </div>
    </nav>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

Suman
Suman1251×122 31.8 KB

2

Although it’s not the cause of your issue you have some open elements in your code. Run your HTML code through the W3C validator.

Using a Google search I found an article on how to make the bootstrap navbar work on hover

1 Like
3

Thank you So much, that really helped me to find out my mistake.