I am trying to make a drop-down menu that drops from image but I can't seem to make it work. How should I target the hover? Because everything I am trying is not working. How I am trying to initiate hover effect is shown at the end of CSS.
.area-left {
float: left;
}
.menu-icon {
width: 28px;
display: inline-block;
vertical-align: middle;
margin-top: 5px;
}
.menu-icon hr {
border: 2px solid #A5CF4C;
border-radius: 100px;
margin-top: 3px;
margin-bottom: 4px;
margin-right: 5px;
margin-left: 3px;
}
.area-left .menu li:hover {
background-color: rgba(165, 207, 76, 0.4);
}
.logo img {
vertical-align: middle;
margin-top: 2px;
}
.sub-menu ul {
background-color: rgba(255, 255, 255, 0.8);
}
.sub-menu li {
border: 1px solid green;
padding: 0px 5px;
}
.sub-menu .menu li:first-child {
margin-top: 3px;
}
.sub-menu ul li {
display: none;
}
.logo img:hover .sub-menu ul li {
display: block;
}
<div class="area-left">
<ul id="htc-menu" class="parent-menu">
<li class="logo ico-container">
<div class="menu-icon">
<hr/>
<hr/>
<hr/>
</div><img src="images/logo.png" alt="HTC Logo"></li>
<li class="sub-menu">
<ul class="menu">
<li>smartphones</li>
<li>accessories</li>
<li>virtual reality</li>
<li>fitness</li>
</ul>
</li>
</ul>
</div>
You're trying to access the .sub-menu as a child of .logo, despite them being siblings of each other.
Try:
.logo:hover + .sub-menu ul li {
display: block;
}
Or just:
#htc-menu:hover .sub-menu ul li {
display: block;
}
Try this :)
I purposely did not go with the adjacent CSS selector because once your mouse moves off the menu icon, the menu would disappear again, making it unhelpful. So you'll want to target the hover state of the parent element so that the menu remains visible while the mouse moves from the logo to the menu that just appears.
.area-left {
float: left;
}
.menu-icon {
width: 28px;
display: inline-block;
vertical-align: middle;
margin-top: 5px;
}
.menu-icon hr {
border: 2px solid #A5CF4C;
border-radius: 100px;
margin-top: 3px;
margin-bottom: 4px;
margin-right: 5px;
margin-left: 3px;
}
.area-left .menu li:hover {
background-color: rgba(165, 207, 76, 0.4);
}
.logo img {
vertical-align: middle;
margin-top: 2px;
}
.sub-menu ul {
background-color: rgba(255, 255, 255, 0.8);
}
.sub-menu li {
border: 1px solid green;
padding: 0px 5px;
}
.sub-menu .menu li:first-child {
margin-top: 3px;
}
.sub-menu ul li {
display: none;
}
.logo img:hover .sub-menu ul li {
display: block;
}
/* Tessa's Changes */
#htc-menu {
list-style: none;
}
#htc-menu:hover li.sub-menu ul.menu li {
display: block;
}
<div class="area-left">
<ul id="htc-menu" class="parent-menu">
<li class="logo ico-container">
<div class="menu-icon">
<hr/>
<hr/>
<hr/>
</div><img src="images/logo.png" alt="HTC Logo">
</li>
<li class="sub-menu">
<ul class="menu">
<li>smartphones</li>
<li>accessories</li>
<li>virtual reality</li>
<li>fitness</li>
</ul>
</li>
</ul>
</div>
Related
Please can someone help, I've been at this for 2 days and just can't get it right! I'm trying to create a dropdown menu to adhere to my existing navbar. Here's my code below. I have it set that the navbar style changes for smaller windows/mobile and still need to figure that part out wrt the sub menu.. HELP :(
nav {
position: fixed;
width: 100%;
z-index: 10;
}
nav ul {
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #000;
padding: 0;
text-align: center;
margin: 0;
transition: 1s;
}
nav ul li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 20px;
padding: 5px 5px;
}
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
position: absolute;
}
nav.black ul {
background: rgba(255, 255, 255, 1);
color: #666;
}
nav.black ul li a {
text-decoration: none;
font-size: 20px;
transition: 1s;
filter: invert(50%);
}
.menu-icon {
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #00b4ff;
display: none;
}
#media(max-width: 900px) {
.nav-logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 45em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px 0;
text-align: center;
}
.menu-icon {
display: block;
}
}
<div class="nav-wrapper">
<nav>
<div class="menu-icon">
<i class=" fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Courses
<ul>
<li>PADI Experiences</li>
<li>PADI Basic Courses</li>
<li>PADI Speciality Courses</li>
<li>PADI Pro</li>
</ul>
</li>
<li class="small-nav-logo"><a id="nav-africa" href ="index.html"><img src="img/logo-icon.gif" alt="Home" width="80" height="68"></a></li>
<li>Dives
<ul>
<li>Guided Packages</li>
</ul>
</li>
<li>Nature</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
Add this to your css.
nav ul li ul li{
display: block;
text-align: left;
margin: 20px 0px;
}
All you needed to do was target the li inside the li.
i am trying to learn how to make hover on image in
navbar
my goal is to make the div-image "pic-index" to be
affcted by hover on "HOME" link in navbar and make the div to be
changed into another image by hover .
i really dont have any idea
how i can do such thing .
here is my HTML :
I added an snippet to my question, so you can see what I current have in my code
body {
margin: 0;
padding: 0;
background: white;
}
.nav ul {
list-style: none;
background-color: white;
text-align: center;
padding: 0;
margin: 0;
}
.logo{
position: absolute;
float: right;
margin-left: 1136px;
margin-top:-3px;
}
.mainul {
height: 145px;
box-shadow: 1px 1px 1px #7e7e7ea6;
}
.mainul2{
height: 145px;
box-shadow: 5px 9px 29px -2px #0000005e;
}
.pic-index{
position:absolute;margin-left:936px;margin-top:62px;
}
.nav li {
font-family: Varela Round;
font-size: 1.2em;
line-height: 40px;
text-align: left;
padding-right:;
}
.nav a {
font-size:15px;
margin-top:50px;
margin-left:20px;
text-decoration: none;
color: #5a5a5a;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
color:#57c0ea;
}
.nav a.active {
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav"> <ul class="mainul"> <ul class="mainul2">
<div class="logo"><img src="images/Logo-1.png"></div>
<div class="pic-index"><img src="images/nav-home-normal.png"></div> <li class="contact">צור קשר <ul>
</ul> </li> <li class="services">שירותים <ul> <li>Tutorial #1##</li> <li>Tutorial #2</li> <li>Tutorial #3</li> </ul> </li>
<li class="about">אודות
</li> <li class="home">דף הבית</li>
</ul> </ul> </div>
Once your .home is after the .pic-index you only can achieve that with some JS or jQuery, here's a solution with jQuery.
If .pic-index comes before .home, then you would be able to use only CSS, but it's not the case.
(I Added an image just to represent the effect, run the snippet in FULLSCREEN to better visualization)
EDIT
Another thing, I made a small update in the css, but it's up for you to keep it or no (added css to img class).
ALSO, you have some HTML structure errors in the lists, some ul and li starts and ends on wrong places
/* HOVER */
$(function() {
$('.home').mouseenter(function() {
$('.pic-index img').attr(
'src', 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-check-icon.png'
);
});
$('.home').mouseleave(function() {
$('.pic-index img').attr(
'src', 'http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-help-about-icon.png'
);
});
});
body {
margin: 0;
padding: 0;
background: white;
}
.nav ul {
list-style: none;
background-color: white;
text-align: center;
padding: 0;
margin: 0;
}
.logo{
position: absolute;
float: right;
margin-left: 1136px;
margin-top:-3px;
}
.mainul {
height: 145px;
box-shadow: 1px 1px 1px #7e7e7ea6;
}
.mainul2{
height: 145px;
box-shadow: 5px 9px 29px -2px #0000005e;
}
.pic-index{
position:relative;
top:30%;
float: right;
margin-right: 50px;
}
.pic-index img{
max-width: 48px;
max-height: 48px;
}
.nav li {
font-family: Varela Round;
font-size: 1.2em;
line-height: 40px;
text-align: left;
padding-right:;
}
.nav a {
font-size:15px;
margin-top:50px;
margin-left:20px;
text-decoration: none;
color: #5a5a5a;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
color:#57c0ea;
}
.nav a.active {
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav"> <ul class="mainul">
<ul class="mainul2">
<div class="logo"><img src="images/Logo-1.png"></div>
<div class="pic-index"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-help-about-icon.png"></div>
<li class="contact">צור קשר
<ul>
</li>
</ul>
<li class="services">שירותים
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about">אודות</li>
<li class="home">דף הבית</li>
</ul>
</div>
I am having a problem putting a sub-submenu into my html/css designed menu. I have attached a picture of the results that I get from the given code. If someone could point out where I'm making a mistake that would be greatly appreciated. I have looked at everything 2 times over and feel like I'm simply implementing the css incorrectly.
#topbar {
background-color: #222;
}
#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover ul {
display: block;
}
#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu li {
display: block;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li: hover ul {
display: inline-block;
}
#sortsongmenu {
display: in-line;
position: relative;
background-color: #333;
border: 5px solid #222;
border-left: 0;
margin-left: -5px;
}
#sortsongmenu li{
display: inline-block;
}
#sortsongmenu li a:hover {
color: #DB7093;
}
<div id="topbar">
<div id="topbar_wrapper">
<ul id="mainmenu">
<li>Home</li><li>
Search</li><li>
Sort By ▼
<ul id="sortmenu">
<li><a href='#'>Song</a>
<ul id="sortsongmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>Artist</a></li><li>
<a href='#'>Album</a></li><li>
<a href='#'>Genre</a></li><li>
<a href='#'>BPM</a></li><li>
<a href='#'>Release Date</a></li>
</ul>
</li><li>
Add Song</li><li>
Contant Us</li>
</ul>
</div>
</div>
#sortmenu li: hover ul
needs to be:
#sortmenu li:hover ul
Also under #sortsongmenu
display: in-line;
needs to be
display: none;
I have a problem with the drop down menu style..
when I mouse hover the third level, the second level font color is changed to its color..
I want to make it keep white (as hover) when third level is hover..
How can I make it?
My style:
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu
{
font-size: 20px;
display: inline;
min-height: 45px;
overflow: auto;
}
ul#menu li
{
float: left;
list-style: none;
padding-left: 20px;
background-color: #ff6a00;
border-bottom: 2px solid #181818;
border-top: 2px solid #303030;
min-width: 160px;
display: block;
position: relative;
min-height: 45px;
}
ul#menu li:hover
{
background-color: #808080;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
border-bottom: 2px solid #222222;
border-top: 2px solid #1B1B1B;
}
ul#menu li a
{
text-decoration: none;
padding: 0px;
border-left: 3px solid rgba(0, 0, 0, 0);
color: white;
display: block;
font-family: 'Lucida Console';
font-size: 18px;
line-height: 45px;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
ul#menu li a:hover
{
border-radius: 5px 0 0 0;
border-left: 3px solid #C4302B;
color: #C4302B;
}
ul#menu li:hover
{
background-color: #DA251D;
}
ul#menu li ul
{
display: none;
}
ul#menu li:hover ul
{
display: block;
}
ul#menu li ul li
{
float: none;
}
#menu .submenu li:hover a
{
border-left: 3px solid #454545;
border-radius: 0;
color: #ffffff;
}
#menu > li:hover .submenu, .menu > li:focus .submenu
{
max-height: 2000px;
z-index: 10;
}
#menu > li:hover .submenu li, .menu > li:focus .submenu li
{
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
</style>
<title>Page Title</title>
</head>
<body>
<div class="ThirdMenu">
<ul id="menu" class="menu">
<li>sangeet
<ul class="submenu" id="submenu"
<li>sdfsadf
<ul class="thirdmenu" id="thirdmenu"><li>sdfsd</li></ul>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Tell me simple way to display third menu hover on main category?
if i got you right:
HTML:
<div class="menu_wrap">
<ul class="newlevel level0">
<li>level0, link 1</li>
<li>
level0, link 2
<ul class="newlevel level1">
<li>level1, link 1</li>
<li>level1, link 2</li>
<li>
level1, link 3
<ul class="newlevel level2">
<li>level2, link 1</li>
<li>level2, link 2</li>
<li>level2, link 3</li>
</ul>
</li>
</ul>
</li>
<li>level0, link 3</li>
</ul>
</div>
CSS:
.menu_wrap
{
width: 300px;
}
ul
{
padding: 0;
}
li
{
list-style: none;
}
a
{
display: block;
padding: 10px;
text-decoration: none;
background: #ff6a00;
color: #000;
border-top: 1px solid;
}
a:hover, .current > a
{
background: #DA251D;
}
.level1 a
{
padding-left: 40px;
}
.level2 a
{
padding-left: 80px;
}
.level0 ul
{
display: none;
}
.newlevel li:hover > ul
{
display: block;
}
JQuery:
$(document).ready(function(){
$('.newlevel li').hover(function(){
if ($(this).children('ul').length > 0){
$(this).addClass('current');
}
},function(){
$(this).removeClass('current');
});
});
jsfiddle: http://jsfiddle.net/esf90kz5/3/
I am working on a menu bar for a web site and the dropdown menu's work fine, the only problem is they will only display when my mouse is right at the edge of where they come out. Can anyone help, would be much appreciated. The part that you have to hover over is the very bottom of the red areas, and on dropdown 1 another submenu at the bottom to the right.
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" href="#"/>
</head>
<body>
<div id="banner">
<p id="title">Code Works</p>
</div>
<center>
<div style="background-color: #FFFF00" id="display">=</div>
</center>
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Setting Up +
<ul>
<li>Programs</li>
<li>Files</li>
</ul>
</li>
</ul>
</li>
<li>Templates +
<ul>
<li>Web Page</li>
<li>Clocks</li>
<li>Calendars</li>
<li>Maps</li>
<li>Transitions</li>
<li>Video</li>
<li>Audio</li>
<li>Search</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
**CSS**
html {
height: 100%;
}
body {
background: linear-gradient(#C0C0C0, #E0E0E0);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
#banner
{
width: 1376px;
margin-left: -10px;
margin-right: -10px;
margin-top: -32px;
padding-top: 0px;
background-color: #3366CC;
background-size: 100%;
height: 80px;
border-bottom: 4px inset #254A93;
background: linear-gradient(#3366CC, #2952A3);
}
#title
{
padding-top: 0.7em;
color: #FFFF00;
text-align: center;
font-size: 32px;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}
nav ul
{
opacity: 0;
margin-top: -1px;
margin-left: -10px;
background: linear-gradient(#FFFF66, #FFFF00);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after
{
content: ""; clear: both; display: block;
}
nav ul li
{
float: left;
}
nav ul li:hover
{
border-bottom: 4px solid #FF0000;
background: linear-gradient (#FFFF66, #FFFF00);
border-top: 2px solid #FFFF66;
}
nav ul li:hover a
{
color: #3366CC;
}
nav ul li a
{
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul
{
width: 200px;
background: #FFFF00; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li
{
border: 2px outset #FFFF00;
background: linear-gradient(#FFFF66, #FFFF00);
float: none;
position: relative;
}
nav ul ul li a
{
padding: 15px 40px;
color: #757575;
}
nav ul ul li a:hover
{
border-top: #E0E0E0;
border-bottom: #E0E0E0;
background: linear-gradient(#FFFF00, #FFFF66);
}
nav ul ul ul
{
position: absolute; left: 100%; top:0;
}
p:hover ul
{
display: none;
}
nav ul:hover
{
opacity: 0.7;
}
nav ul:hover nav ul li
{
opacity: 0.7;
}
#display
{
opacity: 0.7;
height: 30px;
background: linear-gradient(#FFFF00, #FFFF66);
}
#display a
{
size: 32px;
text-decoration: none;
}
nav ul ul li:hover
{
border-top: 1px solid #E0E0E0;
border-bottom: 1px solid #E0E0E0;
}
I think there are some redundant CSS in your code, but to make it work, you just need to add the line opacity:0.7 to this CSS:
nav ul li:hover > ul {
display:block;
opacity:0.7;
}
Here is the working fiddle