I want to make it so the +Kendrick element is not underlined, but the Gmail and Images elements remain underlined when hovered over, any help would be appreciated, thanks
Relevant HTML
<body>
<div id="header">
<ul>
<li>+Kendrick</li>
<li>Gmail</li>
<li>Images</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
Relevant CSS
#header {
background-color: none;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#header ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
}
#header ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#header ul li a:hover {
text-decoration: underline;
}
ul a:hover first-child {
text-decoration: none;
}
You almost had it there. You just needed to finish the last css style like this
#header ul li:first-child a:hover {
text-decoration: none;
}
Here is the JSFiddle
Related
I am having trouble styling a basic nav.
I would like the nav menu colour to be grey and when it is hovered over turns to the green colour with a bottom border. It also jumps around on hover. I tried to add in border-bottom: transparent; but I think it is being overridden. I have played about moving the code and the a tag seems to be the culprit but I am not sure how to solve it. Hence all the styles.
HTML
<body>
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/>
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align:top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
background: #fff;
}
.nav li{
display: inline;
text-align: right;
color: #70B0A8;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
border-bottom: transparent;
}
.nav li:hover {
color: #97A6AA;
border-bottom: 1px solid #97A6AA;
cursor: pointer;
padding: 10px;
}
a {
text-decoration: none;
}
.nav a {
color: #70B0A8;
}
Here is a fiddle to see what I'm talking about.
You have define
.nav a {
color: #70B0A8;
}
at the end of your CSS which will surely override your :hover effect and also you've defined :hover color for .nav li:hover { instead of .nav li:hover a { viz not a right way to define hover effect for a tag inside li.
Further you should first define the border-bottom and padding for your li tag initially instead of :hover to prevent the jumping issue.
You have to change your CSS like the Snippet below.
Code Snippet
a {
text-decoration: none;
}
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
background: #fff;
}
.nav li {
display: inline;
text-align: right;
color: #70B0A8;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
padding: 10px;
border-bottom: 1px solid transparent;
}
.nav li a {
color: #70B0A8;
}
.nav li:hover {
border-bottom-color: #97A6AA;
cursor: pointer;
}
.nav li:hover a {
color: #97A6AA;
}
<body>
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png" />
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
The padding on your hover style was causing it to jump around.
Replace your .nav li:hover with the below.
.nav li:hover a{
color: #97A6AA;
text-decoration: underline;
cursor: pointer;
}
https://jsfiddle.net/c1egheLy/
So you remove the padding on hover and simply change the CSS around to suit what you need such as below:
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align:top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
}
.nav li{
display: inline;
text-align: right;
color: grey;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
border-bottom: transparent;
}
.nav li a:hover {
color: #70B0A8;
border-bottom: 1px solid #97A6AA;
cursor: pointer;
}
.nav a {
color: grey;
text-decoration: none;
}
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/>
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
Im slightly baffled as to why you don't have your logo beside the menu links too but thats simply moving the <img> into <class="nav"> but then within this instance you'd need to add width:100%; to .nav {} CSS
Replace this lines in your code
.nav li:hover {
color: #97A6AA;
border-bottom: 1px solid #18961d; //Green Color
cursor: pointer;
/* padding: 10px; */ //Remove this padding line
}
I hope this helps..
I'm here to ask a question I know is simple, but I just can not get it to work. I want to change the background color of my li tag to a different color once a user hovers over it.
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
background-color: #333;
margin: 0;
overflow: hidden;
width: 100%;
text-align: right;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: #aaa;
background-color: #333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
nav ul li:hover {
background-color: #666;
color: #000;
}
Any help will be greatly appreciated, thanks!
add an a to the hover and it works
nav {
background-color: #333;
margin: 0;
overflow: hidden;
width: 100%;
text-align: right;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: #aaa;
background-color: #333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
nav ul li a:hover {
background-color: #666;
color: #000;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
The reason it doesn't work is that there are links inside the li tags - <a> tags. Those take on their own color when hovering. So you'll have to define your desired color for li a:hover { color: ...}
Your styling for the anchor tag is interfering with your li:hover instructions.
You have to think of them as layers, especially when you're using them as block elements. The dimensions of the anchor tag are bigger than the ones of the li tag, hence you don't see the hover effect. I corrected your code. This works:
nav {
background-color: #333;
margin: 0;
overflow: hidden;
width: 100%;
text-align: right;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
background-color: #333;
}
nav ul li:hover {
background-color: #666;
color: #000;
}
nav ul li a {
color: #aaa;
background: transparent;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
Try to see, if you notice what I changed. This helps you to understand what was wrong in the first place. :)
My dropdown works fine, except it closes before i can move mouse top of last link in it.
CSS
nav {
width: 100%;
display: inline-block;
margin-bottom: 1%;
text-align: center;
background-color: #F0F0F0;
}
nav .links {
width: 100%;
line-height: 1.2;
font-size: 100%;
text-decoration: underline;
text-align: center;
}
nav .links a {
color: #666666;
text-decoration: none;
word-spacing: normal;
}
nav .links a:visited {
color: #666666;
text-decoration: none;
}
nav .links a:hover {
color: #383838;
text-decoration: none;
}
nav .links a:active {
color: #666666;
text-decoration: none;
}
nav ul {
position:relative;
list-style:none;
color: #666666;
white-space: nowrap;
}
nav li{
position:relative;
float: left;
margin-left: 5%;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
line-height: 1.2;
}
ul li:hover ul {
display: block;
}
HTML
<nav>
<div class="links">
<ul>
<li>ETUSIVU</li>
<li>HENKILÖKUVA JA HISTORIA</li>
<li>KORISTEKERAMIIKKA</li>
<li>GALLERIA
<ul>
<li>Keramiikkaveistokset</li>
<li>Keramiikka - kuparityöt</li>
<!--Next link is the one where dropdown closes before mouse reaches it-->
<li>Krisu testi</li>
</ul>
</li>
</ul>
</div>
I tested it with Chrome and FF. CSS is not top skill for me and i think this should work but obviously im wrong :)
I would appreciate help with this greatly, thanks.
EDIT
I changed nav ul li ul as...
nav ul li ul {
z-index: 1;
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
}
and now it works just fine. So basically i just added z-index there.
There is an image right below dropdows, not sure is it possible that it messes this one? Atleast z-index did help...
I have a hover drop down menu on my website. It displays ok until you hover over. The submenu appears but before you can click on a link, the sub menu vanishes.
Here is the HTML -
<div id="top-nav"><div id="nav">
<nav>
<ul id="menu" style="list-style-type: none;">
<li id="sub">Artists
<ul>
<li>Banks</li>
<li>Lil Silva</li>
<li>Frances and the Lights</li>
<li>Jim-E Stack</li>
</ul>
</li>
<li>Night</li>
<li>Info</li>
</ul>
</nav>
</div>
</div>
And here is the CSS -
#nav {
text-align:center;
list-style: none;
}
ul#menu {
background-color: #FFFFFF;
list-style: none outside none;
margin: 0 auto;
padding-bottom: 0px;
padding-top: 0px;
text-align: center;
width: 300px;
}
ul#menu:after {
content: "";
background-color: #FFFFFF;
height: 10px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 20px;
}
ul#menu li {
float: left;
}
ul#menu li a {
color: #666666;
font-size: 12px;
margin: 0;
padding: 0px 35px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #ccc;
}
a.selected-page, ul#menu a.selected-page:hover {
background-color: #FFFFFF;
}
li#sub ul {
display: none;
position: absolute;
background-color: #FFFFFF;
z-index: 22222;
margin-top: 4px;
overflow: hidden;
}
li#sub ul li {
display: block;
float: none;
border-top-style: none;
border-width: 2px;
border-color: #FFFFFF;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
ul#menu li#sub:hover ul {
display: block;
}
ul#menu li#sub ul li:hover {
background-color: #FFFFFF;
}
What am I doing wrong? Any help is greatly appreciated!
the problem is the following line of your CSS code:
li#sub ul {
...
margin-top: 4px;
...
}
Just remove this margin-top and your drop down menu will work properly.
In your example there is a 4px margin space between the "Artists"-link and the drop down menu below. And if your cursors leaves the link and enters this "margin area", the browser interprets it as un-hovering the link - and hides the drop down.
Like dalucks said, remove the top margin from your CSS:
li#sub ul {
margin-top:0;
}
Also, reduce the left margin/paddings from the submenu UL and/or LI children. With the original large values (35px) the menu could be hovered over a lot of invisible space.
ul#menu li ul li a {
padding-left:5px;
}
Fiddle: http://jsfiddle.net/LXwTr/
Add Padding: 0 to this
li#sub ul {
padding: 0;
}
http://jsfiddle.net/tdQmE/
Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", then I should see the menus below it.
also how can i adjust the width so that it is shiffted more to the left.
also when the dropdown menu is longer in lenth, it hides below my content, i want the dropdown menu to be over the body of the page, not in hiding.
thanks in advance you all.
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>
JSFiddle: http://jsfiddle.net/LWEry/
Like this:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
.sub-menu
{
position: absolute;
top: 0;
left: 100%;
}
http://jsfiddle.net/3xWcu/2/
I changed one selector.
FROM
li:hover ul
TO
li:hover > ul
Edited my fiddle above. Added a sub-menu class to the ul containing the Profile and Board li tags:
<ul class="sub-menu">
<li>Profile</li>
<li>Board</li>
</ul>
and added some CSS above.
You mean like this? http://jsfiddle.net/3xWcu/
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>