Falling flat in implementing submenu |
Falling flat in implementing submenu |
spalisetty |
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> |
Lo-Fi Version | Time is now: 25th April 2024 - 07:05 AM |