How can I target one element on hover and then effect an other element?
Here's the HTML:
<header>
<h1 style="float: left; margin-top: 2%;"> Naughty Mama.</h1>
<nav>
<ul>
<li>My Profile</li>
<li>Inbox</li>
<li>Notifications</li>
</ul>
</nav>
</header>
Here's the CSS:
#CHARSET "ISO-8859-1";
header {
background-color: #ddd;
}
nav {
float: right;
margin-right: 5%;
margin-top: 2%;
}
nav ul li{
display: inline;
padding: 15px;
background-color: #eee;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
color: #000;
}
I want to effect the nav ul li when I hover on nav ul li a.
Hope I am clear.
You may style <a> so it covers <li>. apply hover effect as background to <a> :)
http://codepen.io/anon/pen/zyDLA
header {
background-color: #ddd;
}
nav {
float: right;
margin-right: 5%;
margin-top: 2%;
}
nav ul li{
display: inline-block;
background-color: #eee;
vertical-align:top;
}
nav ul li a {
color: #fff;
text-decoration: none;
display:block;
padding:15px;
}
nav ul li a:hover {
color: #000;
background:#48a
}
Related
In the below snippet I have a CSS menu using nested lists. A problem I have with it is that when you hover over the second list item, it reveals the nested list but in the process, increases the parent list's height pushing everything else down.
I'm aware I can use a position of absolute however that leads to a problem of the nested list not sitting below it's parent element and making it incredibly annoying to style for each nested list I may want.
Is there a simple way I can solve my problem while maintaining the nested loop sitting below it's parent (and by extension, making it possible to access with the :hover)
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li > ul {
display: none;
position: relative;
left: 50px;
border: 1px solid #fff;
}
nav ul li > ul li {
display: block;
color: #fff;
}
nav ul li:hover > ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3</li>
<li>Item-4</li>
</ul>
</nav>
I hope your issue is fixed in below fiddle. Try it.
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li > ul {
display: none;
position: absolute;
left: 50px;
top:100%;
border: 1px solid #fff;
}
nav ul li > ul li {
display: block;
color: #fff;
}
nav ul li:hover > ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3</li>
<li>Item-4</li>
</ul>
</nav>
For this you will need to understand the concept of position...Use position:absolute for the drop-menu and position:relative for its parent li...no need to write css for every drop-menu
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li>ul {
display: none;
position: absolute;
top: 100%;
left: 0px;
border: 1px solid #fff;
min-width: 150px;
}
nav ul li>ul li {
display: block;
color: #fff;
}
nav ul li:hover>ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3
<ul>
<li>Item-3A</li>
<li>Item-3B</li>
<li>Item-3C</li>
<li>Item-3D</li>
</ul>
</li>
<li>Item-4</li>
</ul>
</nav>
There is nothing to worry about using absolute position for submenu. just make the parent relative. According to your code
nav ul li {
display: inline-block;
position: relative; // Added
}
and than modify nested ul like this
nav ul li > ul {
display: none;
position: absolute; // Added
left: 0; // Changed
border: 1px solid #fff;
width: 160px; // Change as per your requirement
}
I would like a deconnexion button to appear when hovering on the menu "Bonjour Toi".
But it's showed on 2 lines instead of 1.
As "Toi" can be changed according to user name, when the name is longer the menu deconnexion is correctly showed on 1 line.
Here is what i have now:
Here is my html code:
.nav-top {
background-color: #475162;
height: 70px;
width: 100%;
text-align:center;
padding:10px;
}
.nav-top nav .logo{
float:left;
}
.nav-top nav .logo{
margin-left:20px;
}
.nav-top nav ul {
padding: 0px;
margin: 0px;
float: right;
}
.nav-top nav ul {
margin-right: 50px;
}
.nav-top nav li {
display: inline;
}
.nav-top nav li a {
color: white;
font-size: 1em;
line-height: 70px;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
}
.nav-top ul li a.active {
border: solid 1px #FF307E;
}
.nav-top ul li a:hover:not(.active) {
border: solid 1px #FF307E;
}
/* BUTTON DECONNEXION */
.nav-top nav ul li{
display:inline-block;
position:relative;
}
.nav-top nav ul li ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
}
.nav-top nav ul li:hover ul{
max-height:15em;
}
.nav-top nav ul li ul a{
padding:8px 5px;
text-decoration: none;
}
.nav-top nav ul li ul a img{
vertical-align:middle;
}
.nav-top nav ul li:hover li a{
background-color: #FF307E;
color:white;
text-transform:inherit;
}
<div class="nav-top">
<nav>
<div>
<div>
<a routerLink='./'><img class="logo" src="./assets/img/logo.png" height="70px"></a>
<ul>
<li><a>BLOG</a></li>
<li><a>CONTACT</a></li>
<li><a>SUPPORT</a></li>
<li ><a class="active ">Bonjour {{nameUserConnected}}</a>
<ul>
<li><a (click)="confirmLogout()"><img src="./assets/img/logout.png" width="17px" /> Déconnexion</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
How can I get the deconnexion + icon on the same line ?
You have a few problems here. The ul that is positioned absolute will have the width of the element it's relative to. Which is the li containing Bonjour Toi . That's why when it's longer, it will fit. If the text is smaller , the ul won't fit. You also set overflow:hidden on it , you need to remove that
I changed a bit your code ( the image i've set it like a background-image and padding-left of a is equal to the width of image, change it as you like )
All new/changed code is at the top of the CSS styles
see below
.nav-top nav ul li ul {
position: absolute;
z-index: 1000;
max-height: 0;
left: 0;
top: 100%;
display: none;
}
.nav-top nav ul li ul li a {
padding-left: 30px;
background: url('https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico') no-repeat scroll left center #FF307E;
}
.nav-top nav ul li ul {
width: 100%;
display: none;
}
.nav-top nav ul li:hover > ul {
display: block;
overflow: visible;
}
.nav-top {
background-color: #475162;
height: 70px;
width: 100%;
text-align: center;
padding: 10px;
}
.nav-top nav .logo {
float: left;
}
.nav-top nav .logo {
margin-left: 20px;
}
.nav-top nav ul {
padding: 0px;
margin: 0px;
float: right;
}
.nav-top nav ul {
margin-right: 50px;
}
.nav-top nav li {
display: inline;
}
.nav-top nav li a {
color: white;
font-size: 1em;
line-height: 70px;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
}
.nav-top ul li a.active {
border: solid 1px #FF307E;
}
.nav-top ul li a:hover:not(.active) {
border: solid 1px #FF307E;
}
/* BUTTON DECONNEXION */
.nav-top nav ul li {
display: inline-block;
position: relative;
}
.nav-top nav ul li:hover ul {
max-height: 15em;
}
.nav-top nav ul li ul a {
padding: 8px 5px;
text-decoration: none;
}
.nav-top nav ul li ul a img {
vertical-align: middle;
}
.nav-top nav ul li:hover li a {
background-color: #FF307E;
color: white;
text-transform: inherit;
}
<div class="nav-top">
<nav>
<div>
<a routerLink='./'><img class="logo" src="./assets/img/logo.png" height="70px"></a>
<ul>
<li><a>BLOG</a></li>
<li><a>CONTACT</a></li>
<li><a>SUPPORT</a></li>
<li><a class="active ">Bonjour Toi</a>
<ul>
<li><a (click)="confirmLogout()">Déconnexion</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
I'm stuck with a drop down menu. The problem is that the "parent" link is jumping.
HTML:
<ul id="nav">
<li><span>Page 1</span>
<ul>
<li><a>Extralong Page 1.1</a></li>
<li><a>Page 1.2</a></li>
<li><a>Page 1.3</a></li>
</ul>
</li>
<li>Page 2</li>
<li><span>Page 3</span>
<ul>
<li><a>Page 3.1</a></li>
<li><a>Long description for page 3.2</a></li>
<li><a>Page 3.3</a></li>
<li><a>Page 3.4</a></li>
</ul>
</li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
#nav {
float: right;
}
#nav ul {
float: left;
}
#nav li {
float: left;
padding-top: 2px;
list-style: none;
background: #3451ff;
}
#nav li a,
#nav li span {
display: block;
text-decoration: none;
font-size: 12pt;
font-weight: bold;
padding: 13px 10px 9px 10px;
}
#nav li a:link, #nav li a:active, #nav li a:visited,
#nav li span {
color: #FFF;
}
#nav li a:hover, #nav li a.active,
#nav li span:hover {
color: #000;
}
#nav li li {
display: none;
}
#nav li:hover li {
display: block;
float: none;
background: #555;
}
#nav li li a {
font-size: 10pt;
margin: 1px;
width: 100%;
background: #3c6f3a;
padding: 5px 0;
}
Demo
How can I make this parent static such that it's width isn't changed on hover? I don't want to use js.
Set a width for the parent:
#nav li {
float: left;
padding-top: 2px;
list-style: none;
width: 100px; /* Add this bad boy */
background: #3451ff;
}
DEMO HERE
You can use position:absolute and make its parent li position:relative Demo
#nav ul {
position:absolute;
right:0;
}
Use position:relative for ul parent and give position:absolute for parent child..it will be working fine.
Here is the updated fiddle :http://jsfiddle.net/nikhilvkd/gmU55/5/
#nav li li {
display: none;
position:relative;
}
#nav li:hover li {
display: block;
float: none;
position:absolute;
background: #555;
}
I'm trying to fix my drop down menu but I'm having problems with the highlighted colour and the background colour/size.
When I hover it, it is not covering the full button with orange like I want it to and, it has some grey left in it from the background where I don't want it to be.
One of the issues may be the fact I'm using 2 style sheets for mobile and computer.
HTML:
<div id="nav">
<ul id="menu">
<li id="active">Home</li>
<li>About Revelstoke</li>
<li>Ticker Rates</li>
<li>Snow School
<ul id="sub-menu">
<li>Kids Lessons</li>
<li>Adult Lessons</li>
<li>First Tracks</li>
</ul>
</li>
<li>Weather</li>
<li>Gallery</li>
<li>Trail Maps</li>
<li>Contact Us</li>
</ul>
</div><!--close nav-->
CSS (computer):
#nav {
background-color:#eee;
height: 33px;
border-top: solid black 2px;
border-bottom: solid black 2px;
min-width: 1000px;
}
#nav #active a {
font-weight: bold;
color: #ffffff;
background-color: #0160a2;
padding: 5px 15px 8px 15px;
}
#nav ul {
text-align: left;
font-size: 18px;
background-color: #eee;
}
#nav ul li {
display: block;
position: relative;
float: left;
line-height: 24px;
}
#nav ul li a {
display:inline;
padding:5px 10px 8px 10px;
background-color: #eee;
}
#nav li ul {
display: none;
}
#nav li:hover ul {
display: block;
position: absolute;
margin-top: 6px;
padding: 0;
width: 97px;
height: 82px;
}
#nav li:hover li {
font-size: 14px;
}
#nav ul li a:hover {
background-color: #ff8a00;
color: #000000;
}
#nav ul li ul li a{
padding:5px;
}
#nav ul li ul li a:hover{
padding:5px;
width: 97px;
height: 82px;
}
CSS (mobile):
#nav {
background-color:#eee;
}
#nav ul {
text-align:center;
font-size: 18px;
}
#nav ul li {
list-style-type:none;
border-top: 3px solid white;
}
#nav ul li a {
color: #000000;
display:block;
padding:13px 0;
text-decoration:none;
font-weight: bold;
}
#nav ul li a:hover {
background-color: #0096ff;
font-weight: bold;
color: white;
}
#nav #active a {
background-color: #01385e;
font-weight: bold;
color: white;
}
If I understood your question this should be a solution http://jsfiddle.net/GcDGv/2/ (I worked only for non-mobile CSS), this is how I fixed it:
I removed all height properties from classes related to the sub-menu. They can be auto-calculated.
Change the width of li elements in sub-menu to 100%, so now they will use whole area.
Make links in sub-menu as block elements, so margin/paddings from top and bottom will work as you want. And removed width and height properties from last style ul li ul li a:hover
I'm trying to create a hover effect in my drop down menu but I can't figure out how to do it.
What I want to do is this:
instead of this:
My Code - You can also see it here, (updated version)
HTML:
<nav>
<ul>
<li>One
<ul>
<li>1.1</li>
<li>1.2
</ul>
</li>
<li>Two
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>Three
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
<li>Four</li>
</ul>
</nav>
CSS:
nav {
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
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 {
}
nav ul li:hover {
background-color: #000;
}
nav ul li a:hover {
color: #fff;
}
nav ul li a {
display: block;
padding: 25px 15px;
color: #6F0;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #000;
}
Any help will be appreciated.
Working fiddle:
Change the styles for the below two:
nav ul li:hover {
border-bottom: 1px solid #000;
color: #000;
}
nav ul li a:hover {
color: #000;
}
And add:
nav ul li:hover li:hover{
background: #000;
}
In order to style the sub-menus.
The first (li:hover) you want to set a bottom border - you can change the width of this border from 1px to something more thick, say, 3px