I created a wordpress page. On the header menu when I click the page, it takes me to that page content. But when I hover it, nothing happens. I want the sub menus to appear on hover.
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover {
display: block;
}
.nav navbar-nav navbar-left:hover {
display: block;
}
<ul id="menu-header-menu-left" class="nav navbar-nav navbar-left"> Dental Services</li>
<li class="dropdown ">
<ul class="dropdown-menu total-11 sub-left">
<li>BLEACHING</li>
<li>BONE GRAFT</li>
<li>CHILDREN DENTISTRY</li>
<li>CLEANING</li>
</ul>
</li>
</ul>
The HTML code for submenu was wrong. You need to start submenu <ul> inside parent menu li.
Here is an example:
.dropdown-menu {
position: relative;
display: none;
}
#submenu:hover > ul {
display: block;
}
.nav navbar-nav navbar-left:hover {
display:block;
}
<ul id="menu-header-menu-left" class="nav navbar-nav navbar-left">
<li id="submenu">
Dental Services
<ul class="dropdown-menu total-11 sub-left">
<li>BLEACHING</li>
<li>BONE GRAFT</li>
<li>CHILDREN DENTISTRY</li>
<li>CLEANING</li>
</ul>
</li>
</ul>
css
.dropdown-menu {position: relative; display: none;} #submenu:hover ul {display: block;} .nav.navbar-nav.navbar-left:hover {display:block;}
Html
<ul id="menu-header-menu-left" class="nav navbar-nav navbar-left">
<ul class="dropdown-menu total-11 sub-left">
<li>BLEACHING</li>
<li>BONE GRAFT</li>
<li>CHILDREN DENTISTRY</li>
<li>CLEANING</li>
</ul>
Related
I'm a beginner in web developing, when I hover my mouse to the list of my menus the dropdown menu keeps on showing in every menu. What seems to be the problem?
I tried removing the so I can use "ul li ul li" directly in css but it doesn't work and also when I try ".site-header nav ul li:hover .sub-menu-about" there is no output but ".site-header nav ul:hover .sub-menu-about" I've got the same problem even when I use ".site-header ul:hover .sub-menu-about" still the same problem.
Here is my CSS code
.sub-menu-about{
display: none;
}
.site-header ul:hover .sub-menu-about {
display: block;
margin-top: 15px;
margin-left: -15px;
position: absolute;
}
.main-navigation ul:hover .sub-menu-about ul{
display: block;
margin: 10px;
}
and this is my html code
<div class="site-header__menu group">
<nav class="main-navigation">
<ul>
<li>Home</li>
<li>About</li>
<div class="sub-menu-about">
<ul>
<li><a href="#">History</li>
<li><a href="#">Vision</li>
<li><a href="#">Mission</li>
</ul>
</div>
<li>News</li>
<li>Events</li>
</ul>
</nav>
</div>
Once I hover on the about menu, a dropdown list of History, Mission, Vision will be shown. and when I hover on different menus there will be no dropdown menu will be shown
Error No. 1: The submenu should be located inside the <li> tag. Corrected
Error No. 2:
First, you hide the class .sub-menu-about through displays: none, and then you try to show not this class itself, but a list inside it. Corrected
Result
.sub-menu-about {
display: none;
}
.site-header ul:hover .sub-menu-about {
display: block;
margin-top: 15px;
margin-left: -15px;
position: absolute;
}
.main-navigation li:hover .sub-menu-about {
display: block;
margin: 10px;
}
<div class="site-header__menu group">
<nav class="main-navigation">
<ul>
<li>Home</li>
<li>About
<div class="sub-menu-about">
<ul>
<li><a href="#">History</li>
<li><a href="#">Vision</li>
<li><a href="#">Mission</li>
</ul>
</div>
</li>
<li>News</li>
<li>Events</li>
</ul>
</nav>
</div>
I'm trying to get a drop down menu for my navbar so that when I hover over the tabs it opens a drop down menu with more options. Here is a fiddle of my code. The very final product should look like this, for now I just want to fix the drop down on hover part of it.
Here is a snippet of code im using in css to try and achieve this:
.dropdown {
display: none
}
.navbar-list li:hover .dropdown {
display: relative;
color: white;
text-decoration: none;
}
You are trying wrong approach, please change your css part
.navbar-list li:hover .dropdown {
display: block;
color: white;
text-decoration: none;
}
<ul class="navbar-list">
<li class="navbar-tags">OUR DNA
<ul class="dropdown">
<li>Risk</li>
</ul>
</li>
update code
Your HTML structure is wrong, and you need to use display: block on hover, not display: relative
But re: the HTML, a ul can't be a direct child of a ul. You need to nest the dropdowns in an li. That is not only correct markup, but it allows the hover to persist when you hover over an li that has nested menus. Otherwise, you would need to use li:hover + .dropdown to show the next .dropdown menu, but your :hover will stop once your mouse moves off of the li.
Also, each ul.dropdown that is in a single nested nav element could probably just be li's of a single ul, but what you have isn't incorrect, so I didn't change that.
.dropdown {
display: none
}
.navbar-tags:hover > .dropdown {
display: block;
color: white;
text-decoration: none;
}
.navbar-list a {
color: black;
text-decoration: none;
}
.navbar-tags {
margin: 20px;
}
.navbar-tags, .dropdown {
padding: 0;
list-style-type: none;
}
<ul class="navbar-list">
<li class="navbar-tags">
OUR DNA
<ul class="dropdown">
<li>Risk</li>
</ul>
</li>
<li class="navbar-tags">PROGRAMS
<ul class="dropdown">
<li>Adventure Sport</li>
</ul>
<ul class="dropdown">
<li>Entertainment</li>
</ul>
<ul class="dropdown">
<li>Collegiate</li>
</ul>
<ul class="dropdown">
<li>Individual</li>
</ul>
<ul class="dropdown">
<li>Commercial</li>
</ul>
</li>
<li class="navbar-tags">RESEARCH
<ul class="dropdown">
<li>Corporate Survey</li>
</ul>
<ul class="dropdown">
<li>Individual Survey</li>
</ul>
</li>
<li class="navbar-tags">STORIES</li>
</ul>
1 ) Your HTML structure is wrong.
2) use display: block instead of display: relative.
Change your Code Like THis :
.dropdown {
display: none
}
.navbar-list li:hover > .dropdown {
display: block;
color: white;
text-decoration: none;
}
.navbar-list a {
color: black;
text-decoration: none;
}
.navbar-tags {
padding: 0;
list-style-type: none;
margin: 20px;
}
<ul class="navbar-list">
<li class="navbar-tags">OUR DNA
<ul class="dropdown">
<li>Risk</li>
</ul>
</li>
<li class="navbar-tags">PROGRAMS
<ul class="dropdown">
<li>Professional</li>
</ul>
<ul class="dropdown">
<li>Adventure Sport</li>
</ul>
<ul class="dropdown">
<li>Entertainment</li>
</ul>
<ul class="dropdown">
<li>Collegiate</li>
</ul>
<ul class="dropdown">
<li>Individual</li>
</ul>
<ul class="dropdown">
<li>Commercial</li>
</ul>
</li>
<li class="navbar-tags">RESEARCH
<ul class="dropdown">
<li>Corporate Survey</li>
</ul>
<ul class="dropdown">
<li>Individual Survey</li>
</ul>
</li>
<li class="navbar-tags">STORIES</li>
</ul>
I have a nav-bar and sub-nav bar like this:
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class=<?php if ($currentPage=='about')
echo ' "active" '; ?> "dropdown">ABOUT
<ul class="dropdown-menu" role="menu">
<li class="abt-firstcell">OUR STORY</li>
<li class="abt-secondcell">OUR TEAM</li>
</ul>
</li>
<li <?php if ($currentPage=='advertising')
echo ' class="active" '; ?> class="dropdown">ADVERTISING
<ul class="dropdown-menu" role="menu">
<li class="adv-firstcell">HOW IT WORKS</li>
<li class="adv-secondcell">OUR PARTNERS</li>
</ul>
</li>
</div>
CSS of it:
.abt-secondcell{
text-align:left;
}
.abt-firstcell{
width:500px;
padding-left:30px;
text-align:right;
border-right:2px solid black;
}
.adv-secondcell{
text-align:left;
}
.adv-firstcell{
width:500px;
padding-right:0;
padding-left:450px;
text-align:right;
border-right:2px solid black;
}
.nav { margin-bottom: 0; }
.nav > li.dropdown:hover { position: static; }
.nav > li.dropdown:hover .dropdown-menu, .nav > li.active:hover .dropdown-menu {
display:table;
width: 100%;
text-align: center;
left:0;
right:0;
background:#E1E0DE;
}
.dropdown-menu>li{
display: table-cell;
}
I followed this example to create the subnav bar on bootstrap 3 to work on hover. But now the problem is, when a page is ACTIVE, the subnav bar doesn't work as it is supposed to. I am quite sure this is a problem with the CSS but can't really figure out what's happening. On every page, I declare $currentPage to be something so that the header knows what page it is in.
The problem is, when I am in the About page, it's active and when I hover on the About tab, doesn't work properly like when it works when I hover on Advertising. Basically the ACTIVE tag messes it up. Can someone please tell me what's wrong?
You have 2 class attribute on the same element, change it to:
<li class="dropdown<?php if ($currentPage=='advertising') echo ' active'; ?>">
(And do the same for the other instances)
Hi I have a basic menu for which I would like to add a submenu, that appears only when a certain menu link is hovered. Everything I have tried does not hide the submenu when a link is not hovered. Here is my code:
CSS
.navmenu{
float:right;
font-size: 13px;
font-weight:400;
text-transform: uppercase;
}
.navmenu li{
position: relative;
display: inline-block;
float: left;
}
.navmenu li a{
text-decoration:none;
color:#eee;
padding:15px 37px 19px 37px;
}
.navmenu li a:hover{
background:#36332e;
}
.active a{
background:#36332e;
}
HTML
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>Sub Link 1</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
You need to initially hide the menu:
.navmenu li ul { display: none; }
and then display it when you hover over the nav item:
.navmenu li:hover ul { display: none; }
You should also be careful about defining styles that target .navmenu li or .navmenu li a because those will also target your submenu. You should instead use child selectors, giving you more control over the non-submenu links, so your selectors will look like:
.navmenu > li
.navmenu > li > a
I've encorperated some of those changes into this JSFiddle to get you started:
http://jsfiddle.net/Wexcode/B5P26/
Edit:
This is actually going to lose it's hover state when you hover over the submenu links:
.navmenu > li > a:hover {
background:#36332e;
}
Instead, you should do this:
.navmenu ul { position: absolute; }
.navmenu > li:hover { background: #e6332e; }
.navmenu > li > a { display: block; }
Since the <ul> is nested inside the <li> element, you won't lose the hover state when you hover over the submenu links. I updated the fiddle to reflect these changes.
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>
Sub Link 1
<ul>
</li> <a href=# >hi hi hi</a>
<ul>
<li>hello hello hello</li>
<li>hello hello hello</li>
<li>hello hello hello</li>
</ul>
</li>
</li><a href=# >hi hi hi</a> </li>
</li> <a href=# >hi hi hi</a> </li>
</ul>
</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
The following is a screen capture of the issue that i'm faced with. The drop down menu is supposed to appear under the second menu item in the top menu.
The HTML is,
<nav class="nav">
<ul>
<li class="menu-item">Hi Alexander!</li>
<li class="menu-item"><a>My Account</a>
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
</li>
<li class="menu-item"><a>Contact Us</a></li>
<li class="menu-item"><a>Chat</a></li>
<li class="menu-item"><a>Chat</a></li>
</ul>
</nav>
The CSS is as follows,
.nav {
margin-top: 2px;
position: relative;
float: right;
}
.nav > ul {
padding: 0;
margin: 0;
}
.menu-item{
list-style: none;
float: left;
}
.menu-item .my-sub-menu {
visibility: hidden;
position: absolute;
padding: 0;
margin: 0;
}
.menu-item:hover .my-sub-menu {
visibility: visible;
}
.list-item {
list-style: none;
}
I need the sub menu to appear under the second item in the top menu. This is only in firefox and IE but chrome renders it perfectly. I cant figure out what the issue is. Is there at least e fix that i could use for these two browsers? or another alternative to get around this issue.
Tahnk you in advance.
If you add position:relative to .menu-item it will make the absolute positioning work from the list item itself. The only draw back is if you are using a percentage based width on your drop down it will take the width of the parent li as 100% so a pixel width may have to be specified.
try doing
.sub-list{
padding:0px !important;
}
and if by second menu u want it to come under contact us
then change the position of the div
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
into the next li element ie cntact us
kind of a fiddle
fiddle ex