CSS - menu items overlapping - javascript

I have a menu with two menu items and when the user clicks on each item, a sub-menu is displayed.
The issues is both menues displayed at the same spot - under the first item. I have been tweaking it for a while but cannot figure out a way to fix the issue.
Also I need to make sure as one menu item clicked, the sub-menu for the other item disappears. Can anyone point me in the right direction?
$(document).ready(function(){
$('.menu-item').on('click', function() {
$(this).children(".dropdown-content").toggle();
});
});
#nav {
width: 100%;
height: 3em;
color: #fff;
line-height: 3em;
}
#nav .nav-wrapper {
height: 100%;
position: relative;
top: 0;
}
.right {float: right !important;}
#nav-mobile {
list-style-type: none;
margin-top: 0;
}
#nav-mobile li {
display: inline;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li a {
text-decoration: none;
/*position: relative;*/
}
#nav-mobile li img {
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65);
min-width: 120px;
}
#nav-mobile li .dropdown-content li {
display: block;
margin:0;
width: 100%;
}
#nav-mobile li .dropdown-content li a {
display: block;
margin:0;
padding: 0.25em 1.75em 0.25em 1.2em;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #E0E0E0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png">
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png">
<a class="hide-on-med-and-down white-text" href='#'> <span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>

For the positioning, set display: inline-block on #nav-mobile li and give it a width. In this example, I set its min-width to 5em but do what makes sense in your design.
To close the other one there’s a few options but just doing $(this).siblings().children(".dropdown-content").hide(); may be enough.
$(document).ready(function(){
$('.menu-item').on('click', function() {
$(this).children(".dropdown-content").toggle();
$(this).siblings().children(".dropdown-content").hide();
});
});
#nav {
width: 100%;
height: 3em;
color: #fff;
line-height: 3em;
}
#nav .nav-wrapper {
height: 100%;
position: relative;
top: 0;
}
.right {float: right !important;}
#nav-mobile {
list-style-type: none;
margin-top: 0;
}
#nav-mobile li {
display: inline-block;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
min-width: 5em;
}
#nav-mobile li a {
text-decoration: none;
/*position: relative;*/
}
#nav-mobile li img {
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65);
min-width: 120px;
}
#nav-mobile li .dropdown-content li {
display: block;
margin:0;
width: 100%;
}
#nav-mobile li .dropdown-content li a {
display: block;
margin:0;
padding: 0.25em 1.75em 0.25em 1.2em;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #E0E0E0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png">
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png">
<a class="hide-on-med-and-down white-text" href='#'> <span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>

Add position: relative to #nav-mobile li and left: -50px or your desired value to dropdown.
$(document).ready(function() {
$('.menu-item').on('click', function() {
$(".dropdown-content").hide();
$(this).children(".dropdown-content").toggle();
});
});
#nav {
width: 100%;
height: 3em;
color: #fff;
line-height: 3em;
}
#nav .nav-wrapper {
height: 100%;
position: relative;
top: 0;
}
.right {
float: right!important;
}
#nav-mobile {
list-style-type: none;
margin-top: 0;
}
#nav-mobile li {
display: inline;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
position: relative;
}
#nav-mobile li a {
text-decoration: none;
/*position: relative;*/
}
#nav-mobile li img {
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65);
min-width: 120px;
left: -50px;
}
#nav-mobile li .dropdown-content li {
display: block;
margin: 0;
width: 100%;
}
#nav-mobile li .dropdown-content li a {
display: block;
margin: 0;
padding: 0.25em 1.75em 0.25em 1.2em;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #E0E0E0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png" />
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png" />
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>

Related

Trying to position searchbar in nav

I made a nav bar, and I'm trying to add a search bar to it, but I can't seem to position it.
I'd like to have the search bar show on the right side of the nav bar without overlapping any of the other elements. I tried relative and absolute position but nothing so far.
Any help is very much appreciated, thank you! :)
Here's the codepen - version= https://codepen.io/Teamkhaleesi/pen/gOoNJJy
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
html,
body {
margin: 0;
padding: 0;
height: auto;
font-family: 'Poppins';
box-sizing: border-box;
background-color: rgb(236, 241, 236);
}
body {
margin-bottom: 0;
padding: 0;
}
.search-bar {
float: right;
width: 200px;
height: 40px;
}
.search-bar .search-icon {
position: absolute;
right: 0px;
/*adjust this*/
top: 0px;
/*adjust this*/
background-color: red;
}
nav {
width: 100%;
height: 140px;
background-color: #333;
color: #fff;
text-align: center;
}
nav p {
font-family: 'poppins';
color: white;
font-size: 40px;
line-height: 40px;
padding-top: 2%;
text-align: center;
}
nav ul {
margin: 0px auto;
display: inline-block;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: 'poppins';
text-transform: uppercase;
color: white;
font-size: 20px;
text-decoration: none;
padding: 0px 30px;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
position: absolute;
padding: 10px;
background-color: rgb(215, 209, 209);
border-radius: 1%;
z-index: 1;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
}
nav ul li ul li a {
padding: 8px 10px;
color: black;
}
nav ul li ul li a:hover {
background-color: rgb(120, 118, 118);
transition: ease-in-out 0.2s;
}
<nav>
<p>Book PRESS</p>
<ul>
<li>Home</li>
<li>Books <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Young Adult</li>
<li>Adult</li>
<li>Non-Fiction</li>
</ul>
</li>
<li>Authors <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Our Authors</li>
<li>Book Tours</li>
<li>Events</li>
</ul>
</li>
<li>About Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Our Team</li>
</ul>
<li>News</li>
</li>
<li>Contact Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Submissions</li>
<li>Permissions</li>
<li>Translation</li>
<li>Press</li>
<li>Hiring</li>
<li>Contact</li>
</ul>
<li class="search-bar">
<form class="form"> <input type="text" name="Search" placeholder="Search"> <button type="submit"> </button> </form>
</li>
</li>
</nav>
I've tested your code and it already seems to be positioning the search bar to the right (I don't have enough reputation to comment so I have to reply here sorry)

Drop down menus hover, but sub menus don't

Hi I've tried searching for this but just can't find the right coding. Can someone help?
This is my site currently in test mode : http://www.rockclick.co.uk/wiss/index.htm .
As you can see I have hoverable menus. But my sub menus under the "Galleries" hover menu don't hover I have to click on them in my PC browser (google chrome). On my iphone the submenus aren't even clickable. (I've added a script to fix the hover bug for IOS).
I'm very reluctant to re-write the whole thing again. Is there an easy fix to just make my sub menus hoverable??
I'm very much a novice at this stuff so any help would be greatly appreciated.
document.addEventListener('click', function(e) {
e = e || window.event;
console.log(e);
var target = e.target || e.srcElement;
console.log(target);
if (target.parentElement.className.indexOf('has-submenu') > -1) {
e.target.classList.toggle('open');
}
}, false);
<!----------------ios-hover-fix----------->
(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document); // sticky hover fix in iOS
<style>
#menu {background: #F9F3DB; color: #6D6C6B; height: 35px; border-bottom: 0px solid #6D6C6B}
#menu ul,
#menu li {margin: 0 0; padding: 0 0; list-style: none}
#menu ul {height: 35px}
#menu li {float: left; display: inline; position: relative; font: bold 12px Arial; text-shadow: 0 0px 0 #6D6C6B; border-right: 0px solid #444;
border-left: 0px solid #111; text-transform: uppercase}
#menu li:first-child {border-left: none}
#menu a {display: block; line-height: 35px; padding: 0 14px; text-decoration: none; color: #6D6C6B;}
#menu li:hover > a,
#menu li a:hover {background: #F9F3DB}
#menu input { display: none; margin: 0 0; padding: 0 0; width: 80px; height: 35px; opacity: 0; cursor: pointer}
#menu label {font: bold 30px Arial; display: none; width: 35px; height: 36px; line-height: 36px; text-align: center}
#menu label span {font-size: 12px; position: absolute; left: 35px}
#menu ul.menus {height: auto; width: auto; background: #F9F3DB; position: absolute; z-index: 99; display: none; border: 0;}
#menu ul.menus li {display: block; width: 100%; font: 12px Arial; text-transform: none;}
#menu li:hover ul.menus {display: block}
#menu a.home {background: #c00;}
#menu a.prett {padding: 0 27px 0 14px}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 5px 6px;
border-style: solid;
border-color: #6D6C6B transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px}
#menu a.prett.open::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: transparent transparent #6D6C6B transparent;
position: absolute;
top: 9px;
right: 9px}
#menu ul.menus a:hover {background: #F9F3DB;}
#menu ul.menus .submenu {display: none; position: absolute; left: 100px; background: #F9F3DB; top: 0; width: 150px;}
#menu ul.menus .submenu li {background: #F9F3DB;}
#menu ul.menus .has-submenu a.open ~ .submenu {display: block;}
</style>
<!------------NAVIGATION-BAR------>
<body>
<nav>
<ul id='menu'>
<li><a class='prett' href='#' title='Galleries'>Galleries</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Photos'>Photos</a>
<ul class='submenu'>
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul></li>
<li class='has-submenu'><a class='prett' title='Archives'>Media</a>
<ul class='submenu'>
<li>Press Reports</li>
<li>Archived Press</li>
</ul></li>
<li><a href="team photos.htm" target="iframe" title='Team Photos'>Team Photos</a></li>
<li><a href="videos.htm" target="iframe" title='Videos'>Videos</a></li>
</ul></li>
</nav>
</body>
Consider declaring an additional :hover state rule for nested submenu elements, this can be chained onto the existing submenu :hover state rule, e.g:
#menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {
display: block;
}
Code Snippet Demonstration:
document.addEventListener('click', function(e) {
e = e || window.event;
console.log(e);
var target = e.target || e.srcElement;
console.log(target);
if (target.parentElement.className.indexOf('has-submenu') > -1) {
e.target.classList.toggle('open');
}
}, false);
<!----------------ios-hover-fix----------->
(function(l) {
var i, s = {
touchend: function() {}
};
for (i in s) l.addEventListener(i, s)
})(document); // sticky hover fix in iOS
#menu {
background: #F9F3DB;
color: #6D6C6B;
height: 35px;
border-bottom: 0px solid #6D6C6B
}
#menu ul,
#menu li {
margin: 0 0;
padding: 0 0;
list-style: none
}
#menu ul {
height: 35px
}
#menu li {
float: left;
display: inline;
position: relative;
font: bold 12px Arial;
text-shadow: 0 0px 0 #6D6C6B;
border-right: 0px solid #444;
border-left: 0px solid #111;
text-transform: uppercase
}
#menu li:first-child {
border-left: none
}
#menu a {
display: block;
line-height: 35px;
padding: 0 14px;
text-decoration: none;
color: #6D6C6B;
}
#menu li:hover>a,
#menu li a:hover {
background: #F9F3DB
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer
}
#menu label {
font: bold 30px Arial;
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center
}
#menu label span {
font-size: 12px;
position: absolute;
left: 35px
}
#menu ul.menus {
height: auto;
width: auto;
background: #F9F3DB;
position: absolute;
z-index: 99;
display: none;
border: 0;
}
#menu ul.menus li {
display: block;
width: 100%;
font: 12px Arial;
text-transform: none;
}
#menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {
display: block
}
#menu a.home {
background: #c00;
}
#menu a.prett {
padding: 0 27px 0 14px
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 5px 6px;
border-style: solid;
border-color: #6D6C6B transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px
}
#menu a.prett.open::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: transparent transparent #6D6C6B transparent;
position: absolute;
top: 9px;
right: 9px
}
#menu ul.menus a:hover {
background: #F9F3DB;
}
#menu ul.menus .submenu {
display: none;
position: absolute;
left: 100px;
background: #F9F3DB;
top: 0;
width: 150px;
}
#menu ul.menus .submenu li {
background: #F9F3DB;
}
#menu ul.menus .has-submenu a.open~.submenu {
display: block;
}
<!------------NAVIGATION-BAR------>
<body>
<nav>
<ul id='menu'>
<li>Home</li>
<li>News</li>
<li><a class='prett' href='#' title='Info'>Information</a>
<ul class='menus'>
<li>About Us</li>
<li>Statistics</li>
<li>Downloads</li>
<li>Sponsorship</li>
<li>Race Calendar</li>
<li>Race Results</li>
</ul>
</li>
<li><a class='prett' href='#' title='Info'>Meet The Team</a>
<ul class='menus'>
<li>The Team</li>
<li>The Coaches</li>
<li>The Committee</li>
</ul>
</li>
<li><a class='prett' href='#' title='Galleries'>Galleries</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Photos'>Photos</a>
<ul class='submenu'>
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
</li>
<li class='has-submenu'><a class='prett' title='Archives'>Media</a>
<ul class='submenu'>
<li>Press Reports</li>
<li>Archived Press</li>
</ul>
</li>
<li><a href="team photos.htm" target="iframe" title='Team Photos'>Team Photos</a></li>
<li><a href="videos.htm" target="iframe" title='Videos'>Videos</a></li>
<li class='has-submenu'><a class='prett' title='Archives'>Archives</a>
<ul class='submenu'>
<li>1980's</li>
<li>1990's</li>
<li>2000's</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
</nav>
</body>
Add the following line to your CSS code. It should fix it.
.menus li a:hover ~ .submenu {display: block !important;}

How can change the position of logo in this Navigation bar?

Ok guys so i have this template with me. But i can't figure out how to shift the position of logo to left and the menu accordingly. I also want to change the background color to white.. I'm able to do the rest of the changes myself..
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol, ul {
list-style: none;
padding:0px;
margin:0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap > header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu > li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu > li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu > li.parent > a {
padding-left: 14px;
}
#main-menu > li > a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu { /* level 2 */
display: none;
left: 0px;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
}
ul.sub-menu ul.sub-menu { /* level 3+ */
margin-top: -1px;
padding-top: 0;
left: 149px;
top: 0px;
}
ul.sub-menu > li > a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu > li > a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu > li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu > li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu > li:last-child > a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu > li > a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover > ul.sub-menu {
display: block; /* show the submenu */
}
The CSS Responsive Style
#media all and (max-width: 700px) {
#navigation {
position: static;
margin-top: 20px;
}
#menu-toggle {
display: block;
}
#main-menu {
display: none;
float: none;
}
#main-menu li {
display: block;
margin: 0;
padding: 0;
}
#main-menu > li {
margin-top: -1px;
}
#main-menu > li:first-child {
margin-top: 0;
}
#main-menu > li > a {
background-color: #333;
border: 1px solid #444;
color: #bbb;
display: block;
font-size: 14px;
padding: 12px !important;
padding: 0;
}
#main-menu li > a:hover {
background-color: #444;
}
#main-menu > li.parent {
background: none !important;
padding: 0;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
border: 1px solid #444 !important;
color: #fff !important;
}
ul.sub-menu {
display: block;
margin-top: -1px;
margin-left: 20px;
position: static;
padding: 0;
width: inherit;
}
ul.sub-menu > li:first-child {
border-top: 1px solid #444 !important;
}
ul.sub-menu > li > a.parent {
background: #333 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="https://www.freshdesignweb.com"><img src="images/logo.png" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
</div>
At first you have to change for web view bellow css code for left position for nav. Also logo should be remove otherwise logo & menu overlap if you want to logo is left position.
#navigation {
position: absolute;
left: 40px;
bottom: 0px;
}
Also you want to change your menu bar background color then change to this css code
#wrap > header {
background-color: #fff;
}
Note: If you do that you should be change your menu font color like black otherwise your font menu font color & menu background color looking messy.

How to make the navigation bar fixed on top on scroll

This is my fiddle i seen some topics on this website to make it happen, but i am making some mistakes in applying it. Can someone help me.
I wanna make the navigation bar fixed on top on scroll.
body {
width: 100%;
height: 100%;
margin:0px;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
}
.navbar li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
color: #f2f2f2;
}
.navbar li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #333}
.navbar .show {display:block;}
.xavierslogo {
width: 110px;
height: 109px;
margin-left: 20%;
}
.xavierstext {
width: ;
height: ;
margin-left: 0%;
}
.topbg {
background-color: #333;
}
<header class="topbg">
<img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo">
<img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext">
</header>
<ul class="navbar">
<li>Home</li>
<li>Text one</li>
<li>Text Two</li>
<li class="dropdown">
Dropdown ▼
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div class="main">
z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>
</div>
add the following code to this class
.navbar {
list-style-type: none;
overflow: hidden;
position:fixed;
}
body {
width: 100%;
height: 100%;
margin:0px;
}
.navbar {
list-style-type: none;
overflow: hidden;
position:fixed;
}
.navbar li {
float: left;
}
li a, .dropbtn {
display: inline-
block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
color: #f2f2f2;
}
.navbar li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #333}
.navbar .show {display:block;}
.xavierslogo {
width: 110px;
height: 109px;
margin-left: 20%;
}
.xavierstext {
width: 100;
height: 100;
margin-left: 0%;
}
.topbg {
background-color: #333;
}
<header class="topbg">
<img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo">
<img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext">
</header>
<div>
<ul class="navbar">
<li>Home</li>
<li>Text one</li>
<li>Text Two</li>
<li class="dropdown">
Dropdown ▼
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div class="main">
z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>
</div>

Sub-menu hover menu issue on css

I want to make a code where I hover my mouse through the menu items, and appears a submenu with a list ...
Here's my html nav code on CSS first and then the HTML code ...:
nav {
background-color: #FFF;
width: 960px;
margin: 0 auto;
}
div.ajuste {
clear: both;
}
nav ul {
width: 95%;
margin: 5px 5px 0 5px;
padding: 10px 10px 10px 6px;
height: 40px;
line-height: 100%;
background: #FFF;
/* position:relative;
z-index:999;
overflow: hidden;*/
float:left;
list-style-type: none;
}
nav li {
margin-bottom: 10px;
padding-right: 25px;
float: left;
/*position: relative;*/
/*list-style: none;*/
}
nav a {
color: #36E;
font-weight: bold;
text-decoration: none;
/*margin-right: 6%;*/
font-family: arial, sans-serif;
font-style: normal;
font-size: 15px;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
/*margin-bottom: 10px;*/
}
nav a:hover {
color: #0505B4;
}
nav a.active {
color: #1414D3;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio</li>
<li>Biografía</li>
<li class="submenu">Discografía</li>
<ul>
<li>Innerspeaker</li>
<li>Lorenism</li>
<li>Currents</li>
</ul>
</li>
</ul>
<div class="ajuste">
<nav>
My fail occurs when I hover it ... List submenu don't appears...
What's bad on my code?
The second UL, need to be inside the LI tag.
nav {
background-color: #FFF;
width: 960px;
margin: 0 auto;
}
div.ajuste {
clear: both;
}
nav ul {
width: 95%;
margin: 5px 5px 0 5px;
padding: 10px 10px 10px 6px;
height: 40px;
line-height: 100%;
background: #FFF;
/* position:relative;
z-index:999;
overflow: hidden;*/
float:left;
list-style-type: none;
}
nav li {
margin-bottom: 10px;
padding-right: 25px;
float: left;
/*position: relative;*/
/*list-style: none;*/
}
nav a {
color: #36E;
font-weight: bold;
text-decoration: none;
/*margin-right: 6%;*/
font-family: arial, sans-serif;
font-style: normal;
font-size: 15px;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
/*margin-bottom: 10px;*/
}
nav a:hover {
color: #0505B4;
}
nav a.active {
color: #1414D3;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio</li>
<li>Biografía</li>
<li class="submenu">
Discografía
<ul>
<li>Innerspeaker</li>
<li>Lorenism</li>
<li>Currents</li>
</ul>
</li>
</ul>
<nav>
You have an extra li tag. Get rid of it, and it should work
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio
</li>
<li>Biografía
</li>
<li class="submenu">Discografía
<ul>
<li>Innerspeaker
</li>
<li>Lorenism
</li>
<li>Currents
</li>
</ul>
</li>
</ul>
<div class="ajuste">
<nav>

Categories