I want the underline on hover over a li href item to be red. What i did is this:
.custom-nav ul{
list-style:none;
margin: 0;
padding: 0;
overflow: hidden;
}
.custom-nav li {
display:inline;
font-size:24px;
margin:40px;
}
.custom-nav a{
text-decoration: none;
width: 50%;
}
.custom-nav a:hover{
color:rgba(255,228,228,1.00);
border-bottom: 4px solid red;
}
HTML:
<div class="custom-nav">
<ul>
<li>photography</li>
<li>digital art</li>
</ul>
</div>
So you can see I have tried setting the a:hover to have a border bottom but it doesnt seems to work. No underline appears at all! What am I missing?
in this i modified just .custom-nav ul:/*overflow:hidden */remove this attribute
.custom-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.custom-nav li {
display: inline;
font-size: 24px;
margin: 40px;
}
.custom-nav a {
text-decoration: none;
width: 50%;
}
.custom-nav a:hover {
color: rgba(255, 228, 228, 1.00);
border-bottom: 4px solid red;
}
<div class="custom-nav">
<ul>
<li>photography
</li>
<li>digital art
</li>
</ul>
</div>
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'am stuck with this one thing in navigation bar.
So I made ribbon navigation bar with hover when mouse over the element. I do have class ".active" then ribbon is little bit longer, but when i mouse over this active element ribbon decreases. I want to know how can make hover on everything except for that ".active" class, and also for drop-down content.
I think, there is a work with those Pseudo-elements like :not() but i'm not sure,i tried almost everything.
Thanks.
Here is my HtTML+CSS code so far!
<nav role="top">
<ul>
<div class="ribbon">
<li>Home</li>
<li >Blog</li>
<li class="active" >Portfolio</li>
<li>Music</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
<li id="livechat" >About me</li>
</div>
</div>
</ul>
Since .active is applied to the parent li, you need to use :not() on that to target .active or not, and then apply the CSS that changes when you hover a link
nav[role="top"] li:not(.active) a:hover { ... }
nav[role="top"] ul {
list-style-type: none;
float: right;
margin-top:0px;
}
nav[role="top"] li {
display: inline-block;
position: relative;
float: right;
padding:0 8px;
}
nav[role="top"] a {
display: block;
color: #b3b3b2;
text-align: center;
padding: 14px 0px;
text-decoration: none;
width: 70px;
font-size: 11px;
font-family: 'Pontano Sans', sans-serif;
font-weight: 600;
}
nav[role="top"] li:not(.active) a:hover {
height:1px;
text-decoration: none;
width: 70px;
background-color: #aecacc;
color:#fff;
}
nav[role="top"] a:hover::after {
margin-top:-18px;
content: "";
display: block;
position: static;
width: 0;
height:20px;
border-right: 35px solid #aecacc;
border-left: 35px solid #aecacc;
border-bottom: 12px solid rgba(224, 33, 33, 0);
}
.active a {
height:12px;
text-decoration: none;
width:20px;
background-color: #aecacc;
}
.active a:first-child {
color:white;
}
.active::after {
margin-top:0px;
content: "";
display: block;
position: static;
width: 0;
height: 20px;
border-right: 35px solid #aecacc;
border-left: 35px solid #aecacc;
border-bottom: 12px solid rgba(224, 33, 33, 0);
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display:none;
position: fixed;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
transition: all .4s ease-in-out;
}
.dropdown-content a:hover {
background-color: rgba(208, 208, 207, 0.2)
}
.dropdown:hover .dropdown-content {
display:block;
}
<nav role="top">
<ul>
<div class="ribbon">
<li>Home</li>
<li >Blog</li>
<li class="active" >Portfolio</li>
<li>Music</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
<li id="livechat" >About me</li>
</div>
</div>
</ul>
</nav>
You are correct about the :not(). Add it to line 29 of your CSS
nav[role="top"] li:not(.active) a:hover {
height:1px;
text-decoration: none;
width: 70px;
background-color: #aecacc;
color:#fff;
}
I got my navigation bar to work nicely but I need to have different colors in the backgrounds of each element.
I tried giving them ID's and using it in CSS but it doesn't work.
The "info day"should be firebrick(red) but "course"and "locations" should be two different colors.
Can anyone one help me out?
.menuUl {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-left: none;
border-right: none;
}
.menuLi {
float: left;
border: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: firebrick;
border-radius: 5px;
}
<ul class="menuUl">
<li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a>
</li>
<li class="menuLi" id="infoDay">INFO DAY
</li>
<li class="menuLi" id="locations">LOCATIONS
</li>
</ul>
Hope this helpful:
.menuUl{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-left: none;
border-right: none;
}
.menuLi{
float: left;
border: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li:nth-child(1) a:hover {
background-color: blue;
border-radius: 5px;
}
li:nth-child(2) a:hover {
background-color: firebrick;
border-radius: 5px;
}
li:nth-child(3) a:hover {
background-color: black;
border-radius: 5px;
}
<ul class="menuUl">
<li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a></li>
<li class="menuLi" id="infoDay">INFO DAY</li>
<li class="menuLi" id="locations">LOCATIONS</li>
</ul>
I change their font-color for visibility in the snippet-demo but the main idea is to use them like this li#infoDay a:hover. Its specific to id's and changing their order wont affect the css
.menuUl{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-left: none;
border-right: none;
}
.menuLi{
float: left;
border: none;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
border-radius: 5px;
}
li#courses a:hover{
background-color: blue;
}
li#locations a:hover{
background-color: green;
}
li#infoDay a:hover{
background-color: firebrick;
}
<div>
<ul class="menuUl">
<li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a></li>
<li class="menuLi" id="infoDay">INFO DAY</li>
<li class="menuLi" id="locations">LOCATIONS</li>
</ul>
</div>
I have 2 nav bars which I want to be on top of each other without spaces, but for some reason there is an empty line as if I had used .
HTML part
<!DOCTYPE html>Logo!
<BR>
<ul class="menu">
<li>Home
</li>
<li>placeholder
</li>
<li>placeholder
</li>
<li>placeholder
</li>
<li>placeholder
</li>
<li>placeholder
</li>
</ul>
<ul class="submenu">
<li>subheader1
</li>
<li>subheader2
</li>
<li>subheader3
</li>
</ul>
CSS part:
.submenu {
text-align: left;
background-color: #C2F0C2;
}
.menu {
background-color: #98bf21;
}
body {
width: 900px;
margin: 2em auto;
}
.menu ul {
margin:0;
padding:0;
overflow: hidden;
text-align: center;
font-size:0;
}
.menu li {
display: inline;
list-style: none;
}
.menu a:link, a:visited {
display: inline-block;
margin-right: -4px;
width: 135px;
color: #FFFFFF;
font-size: small;
font-family: Verdana, sans-serif;
text-align: center;
padding: 4px;
text-decoration: none;
background-color: #98bf21;
}
.menu a:hover, a:active {
background-color: #7A991A;
}
.submenu ul {
margin:0;
padding:0;
overflow: hidden;
text-align: left;
font-size:0;
}
.submenu li {
display: inline;
list-style: none;
}
.submenu a:link, a:visited {
display: inline-block;
margin-right: -4px;
width: 135px;
color: #000000;
font-size: small;
font-family: Verdana, sans-serif;
text-align: center;
padding: 4px;
text-decoration: none;
background-color: #C2F0C2;
}
.submenu a:hover, a:active {
background-color: #7A991A;
}
Fiddle
I'm not sure which part I need to change so I included all of it.
How can I remove the empty line?
E: I failed with the fiddle and forgot to press update, should have the right one now.
Apply padding:0 and margin:0 for your menu and submenu classes.
.menu, .submenu{margin:0; padding:0;}
DEMO
You just have to add this in your CSS :
.menu {margin-bottom:0px;}
.submenu {margin-top:0px;}
Have a good day.
Note: I see on firefox all together, so it give me 2 pixels on the two square join. For that i used this technique
You can use pseudo :last-child
CSS
div {
display: inline-block;
padding: 15px;
border-left: 2px solid red;
border-top: 2px solid red;
border-bottom: 2px solid red;
margin: 0;
white-space:0;
}
div:last-child {
border-right: 2px solid red;
}
DEMO HERE
I have ran into a slight problem with my dropdown menu. I need and extra level in my dropdown, but i really don't know what to do with the CSS...
The page can be seen here.
The problem can be seen in the menu under "Om os", where "Brochure 2013", "Brochure 2014" should be visible when hovering over "Brochure" and not as it is now!
How to fix this?
Here's my CSS:
.cssmenu {
border: 0px solid #2E181A;
margin: 0px auto 0px auto;
padding: 0px;
font-family: verdana,geneva,arial,helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
color: #2E181A;
width: 798px;
background: #E6D9BD;
text-align: center;
}
.cssmenu ul {
background: #E6D9BD;
height: 37px;
list-style: none;
margin: 0px auto 0px auto;
padding: 0;
text-align: center;
}
.cssmenu li {
padding: 0px 8px 0px 8px;
display: inline-block;
}
.cssmenu li a {
color: #2E181A;
display: block;
font-weight: bold;
line-height: 37px;
padding: 0px 10px;
text-align: center;
text-decoration: none;
}
.cssmenu li a:hover {
color: #8e8e8e;
text-decoration: none;
}
.cssmenu li ul {
background: #E6D9BD;
border-left: 5px solid #2E181A;
border-right: 5px solid #2E181A;
border-bottom: 5px solid #2E181A;
display: none;
height: auto;
opacity: 0.95;
filter: alpha(opacity=95);
/* For IE8 and earlier */
position: absolute;
width: 225px;
z-index: 200;
float: none;
/*top:1em;
/*left:0;*/;
}
.cssmenu li:hover ul {
display: block;
}
.cssmenu li li {
display: block;
float: none;
padding: 0px;
width: 225px;
}
.cssmenu li ul a {
display: block;
font-size: 12px;
font-style: normal;
padding: 0px 25px 0px 25px;
text-align: left;
}
.cssmenu li ul a:hover {
background: #D5BE91;
color: #000000;
opacity: 1;
filter: alpha(opacity=100);
/* For IE8 and earlier */;
}
.cssmenu p {
clear: left;
}
.cssmenu .active > a {
background:;
color: #ffffff;
}
.cssmenu .active > a:hover {
color: #ffffff;
}
And here's my menu:
<ul class="active">
<li><span>Forside</span>
</li>
<li><span>Hingste</span>
<ul>
<li><span>Volstrups Cash</span>
</li>
<li><span>Churchill</span>
</li>
<li><span>Blejsbjergs Cooper</span>
</li>
<li><span>Con Cosmos</span>
</li>
</ul>
</li>
<li><span>Salgsheste</span>
<ul>
<li><span>Volstrups Charline</span>
</li>
<li><span>Volstrups Calina</span>
</li>
<li><span>Volstrups Colline</span>
</li>
</ul>
</li>
<li><span>Betingelser</span>
</li>
<li><span>Om os</span>
<ul>
<li><span>Heste på stationen</span>
</li>
<li><span>Samarbejdspartnere</span>
</li>
<li><span>Om Stutteriet</span>
</li>
<li><span>Brochure</span>
<ul>
<li><span>Brochure for 2014</span>
</li>
<li><span>Brochure for 2013</span>
</li>
</ul>
</li>
</ul>
</li>
Hope you guys can help me out! :)
you need woking with level3 ul.add some margin-top andleft to 100%
just add this porperty to you css file:
.cssmenu li li:hover > ul{
visibility:visible !important
}
.cssmenu li ul ul {
margin-top: -30px;
left: 100%;
width: 100%;
visibility:hidden;
border-left:none;
margin-left:-5px;
}
.cssmenu li ul ul a{
border-left:5px solid #2E181A;
}
.cssmenu li ul ul li:first-child a{
border-left:none !important;
}
also you don't need add the <a> tag into <span>. you can remove that,