The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Falling flat in implementing submenu
spalisetty
post Sep 13 2020, 02:39 AM
Post #1


Novice
**

Group: Members
Posts: 22
Joined: 2-August 20
Member No.: 27,469
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.

CODE


<!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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 01:10 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC