CSS
#menu2
{
background: black;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 220px;
}
#menu2 li
{
margin: 0;
padding: 0;
}
#menu2 a
{
border-bottom: 1px solid #393939;
color: #ccc;
display: block;
margin: 0;
padding: 9px 16px;
text-decoration: none;
}
#menu2 a:hover
{
background: black url("../images/select.png") left center no-repeat;
color: #fff;
padding: 9px 16px;
}
#menu2 a:active
{
background: red;
color: #fff;
padding: 9px 16px;
}
JQuery
<script type="text/javascript">
$(document).ready(function() {
$("#menu2 li a").click(function() {
$(".active").removeClass("active");
$(this).addClass('active');
});
});
</script>
HTML
<ul id="menu2">
<li>Home</li>
<li>About us</li>
<li>Contacts</li>
</ul>
Replace this #menu2 a:active into this #menu2 a.active
As like this
Replace this
#menu2 a:active
{
background: red;
color: #fff;
padding: 9px 16px;
}
into this
#menu2 a.active
{
background: red;
color: #fff;
padding: 9px 16px;
}
Demo
Active Navi More info
Related
Hi I am trying to develop navigation bar using CSS.
I am display menus in navigation but these menus are not displaying as expected. I am trying to display as below.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
border-top: 4px solid #2e92fa;
}
<ul>
<li><a class="active" >Product Name</a></li>
<li><a class="active" >Dashboard</a></li>
<li><a >Reports</a></li>
<li><a >Map</a></li>
</ul>
Can someone help me to change css classes in order to look like as below image? Any help would be appreciated. Thank you
Is that the way you want it to be ?
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px 20px 16px;
text-decoration: none;
border-top: 6px solid transparent;
}
li a:hover {
background-color: #222;
border-top: 6px solid #2e92fa;
}
li a:active {
background-color: #000;
border-top: 6px solid blue;
}
<ul>
<li><a class="active">Dashboard</a></li>
<li><a>Reports</a></li>
<li><a>Map</a></li>
</ul>
You can use psuedo classes for this
:active works on click
:hover works on mouse over
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-top: 4px solid transparent;
}
li a:hover {
background-color: #111;
border-top: 4px solid #2e92fa;
}
li a:active
{
border-top:4px solid blue;
}
<ul>
<li><a class="active" >Dashboard</a></li>
<li><a >Reports</a></li>
<li><a >Map</a></li>
</ul>
I have a nav bar with three links in it. If you look closely, you'll see that the dark green top-border on the hover and active anchors do not cover the brown border. Is there any way to make it do this?
Here's what it looks like;
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
background-color: #C8E6C9;
margin: 0;
padding: 0;
}
.container {
margin: 0 10% 0 10%;
}
header, ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4CAF50;
}
h1 {
margin: 0;
border-bottom: 1px solid #FFFFFF;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
li {
float: left;
margin: 0 0 0 0;
}
h1, li a {
display: block;
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
border: 2px solid #4CAF50;
border-top: 6px solid #4CAF50
}
/*link actions*/
li a.active {
background-color: #795548;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
}
li a:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
color: #795548;
}
li a.active:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
}
a:first-child {
text-decoration: none;
color: #FFFFFF;
}
a:first-child:hover {
color: #795548;
}
<body>
<noscript>Please Use JavaScript you loser.</noscript>
<div class="container">
<header>
<nav>
<h1>My Website</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Getting Started</li>
</ul>
</nav>
</header>
</div>
</body>
That's the way borders meet. I'd suggest using a box-shadow instead of the top border
NOTE:
You were clearing the floats with overflow:hidden on the ul. This would stop this technique working. I'd suggest an alternative clearfix method.
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
background-color: #C8E6C9;
margin: 0;
padding: 0;
}
.container {
margin: 0 10% 0 10%;
}
header,
ul {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
width: 100%;
background-color: #4CAF50;
}
h1 {
margin: 0;
border-bottom: 1px solid #FFFFFF;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
li {
float: left;
margin: 0 0 0 0;
}
h1,
li a {
display: block;
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
border: 2px solid #4CAF50;
border-top: none;
box-shadow: 0 -6px 0px 0px #4CAF50;
}
/*link actions*/
li a.active {
background-color: #795548;
border: 2px solid #795548;
border-top: none;
box-shadow: 0 -6px 0 0px #388E3C;
}
li a:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: none;
box-shadow: 0 -6px 0 0px #388E3C;
color: #795548;
}
li a.active:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: none;
box-shadow: 0 -6px 0px 0px #388E3C;
}
a:first-child {
text-decoration: none;
color: #FFFFFF;
}
a:first-child:hover {
color: #795548;
}
<div class="container">
<header>
<nav>
<h1>My Website</h1>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Getting Started
</li>
</ul>
</nav>
</header>
</div>
As #Paulie_D commented, the brown in the top border of your anchor tag is the point of intersection between your top green and surrounding brown border. Because the background color of your li is already brown, I'd recommend removing the brown border like so:
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
background-color: #C8E6C9;
margin: 0;
padding: 0;
}
.container {
margin: 0 10% 0 10%;
}
header, ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4CAF50;
}
h1 {
margin: 0;
border-bottom: 1px solid #FFFFFF;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
li {
float: left;
margin: 0 0 0 0;
}
h1, li a {
display: block;
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
border-top: 6px solid #4CAF50
}
h1 {
border: 2px solid #4CAF50;
}
/*link actions*/
li a.active {
background-color: #795548;
border-top: 6px solid #388E3C;
}
li a:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
color: #795548;
}
li a.active:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
}
a:first-child {
text-decoration: none;
color: #FFFFFF;
}
a:first-child:hover {
color: #795548;
}
<body>
<noscript>Please Use JavaScript you loser.</noscript>
<div class="container">
<header>
<nav>
<h1>My Website</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Getting Started</li>
</ul>
</nav>
</header>
</div>
</body>
Note: I also removed the fallback green border of your li to only apply to the h1.
im wondering how to write my css so that when i hover the text the green line under the yellow box becomes yellow as well. thank you
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
link
https://jsfiddle.net/18fk9sce/
i should add that i wish the green line to remain. some solutions seem to remove the green line running across the page.
Okay, I've just updated the solution now.
Just replace the overflow: hidden; in ul with a fixed height: 42px. And increase the padding bottom of the hovered link by 2px (i.e the border-bottom size). That would cover the border with yellow color of the link.
Check the updated fiddle
ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 42px;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
padding-bottom: 14px;
}
HTML - added wrapper
<div class="menu__holder">
<ul class="main_menu_left">
<li id="left">Homehome</li>
<li id="left">Homehomehome</li>
<li id="left">Homehome</li>
<li id="right">Homehome</li>
<li id="right">Home</li>
</ul>
</div>
CSS
.menu__holder {
width: 100%;
padding: 0;
border-bottom: 2px solid green;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 9999;
margin-bottom: -2px;
}
ul li {
border-bottom: 2px solid transparent;
}
ul li:hover {
border-color: yellow;
z-index: 9999;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
Updated fiddle - NEW
You have to set the border in the li not in ul, so you can separately change the border.
Just change the Style to achieve it:
Updated fiddle
Updated Style
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
li{
border-bottom: 2px solid green;
}
li:hover {
background-color: yellow;
border-bottom: none;//you can set other color here
}
Updated CSS :-
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
border-bottom: 2px solid green;
}
a:hover {
background-color: yellow;
border-bottom: 2px solid yellow;
}
try with adding this to your css.if this is not the case tell me
ul:hover{
border-bottom:1px solid yellow;
}
thanks to everyone who contributed to this question.
in the end this is the code i use.
https://jsfiddle.net/4d0ghscu/
<style>
.menu{
height:40px;
border-bottom:4px solid green;
padding:0;}
.menu_left{
display:inline;
list-style-type:none;}
.menu_right{
display:inline;
list-style-type:none;}
.tab_left{
float:left;}
.tab_right{
float:right;}
a{
display:block;
color:black;
padding:12px 12px;
text-decoration:none;}
a:hover{
background-color:yellow;}
</style>
<ul class="menu">
<ul class="menu_left">
<li class="tab_left">Homehome</li>
<li class="tab_left">Homehomehome</li>
<li class="tab_left">Homehome</li>
</ul>
<ul class="menu_right">
<li class="tab_right">Homehome</li>
<li class="tab_right">Home</li>
</ul>
</ul>
key to the code:
*separating left from right within an overhead. which made it simpler and more flexible to add new elements to the navigation menu.
*adding height.
![enter image description here][1]I have the following CSS navigation that adds an arrow on hover.
How can add an arrow to be visible for the active or on link? i have attached the image as well
Here is my code below
<style type="text/css">
#nav {
margin-top:0;
padding: 12px 0;
margin-left: 0;
background-color: #fafafa;
color: #464646;
-moz-box-shadow: 0 5px 5px #888;
-webkit-box-shadow: 0 5px 5px #888;
box-shadow: 0 5px 5px #888;
}
#nav li {
list-style: none;
display: inline;
margin: 0px;
padding: 0;
padding: 22px;
padding-right: 0;
padding-left: 0;
}
#nav li a {
font-family: Arial;
font-style:normal;
text-transform: uppercase;
text-decoration: none;
color: #464646;
padding: .7em 3em;
border-right: 1px dashed #959595;
}
#nav li a:hover {
background-color: #fafafa;
color: #005596;
font-weight: bold;
}
#nav li:hover {
background: transparent url(images/down_arrow2.png) no-repeat scroll center bottom;
margin: 0;
}
#active a:link, #active a:visited,#active a:hover
{
/* border: 1px solid #333; */
background-color: #fafafa;
color: #005596;
font-weight:bold;
}
</style>
HTML
<ul id="nav">
<li id="active">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Add a Restaurant</li>
<li>Delete a Restaurant</li>
<li>Logout</li>
</ul>
Use a class name instead if an id:
<li class="active">Home</li>
Then you can do:
#nav li.active {
background: transparent url(images/down_arrow2.png) no-repeat scroll center bottom;
margin: 0;
}
Just add a background image to css.
#active a:link, #active a:visited,#active a:hover
{
/* border: 1px solid #333; */
background-color: #fafafa;
color: #005596;
font-weight:bold;
background: transparent url(images/down_arrow2.png) no-repeat center bottom;
margin: 0;
}
I want simple drop-down menu. But I have one problem. I want when I hover over dropped items (drop-menu-items) my parent element (drop-menu-parent) to be colored with black, but it's in white. I can't explain it very well. You can see it here -> http://jsfiddle.net/YEyuP/
I think this is what you need : http://jsfiddle.net/YEyuP/6/
HTML:
<nav>
<ul id="cat-nav">
<li>About</li>
<li>Contact</li>
<li class="drop-menu-parent">
Portfolio
<ul class="drop-menu-items">
<li>Some other category</li>
<li>Some other category</li>
<li>Some other category</li>
<li>Some other category</li>
</ul>
</li>
<li>Testimonials</li>
<li>Browse Products</li>
<li>Support Forum</li>
</ul>
</nav>
CSS:
nav {
background: #000;
}
#cat-nav {
text-align: center;
background-color: #0f0609, #0f0609;
background-image: url(cat-nav-bg.jpg), url(cat-nav-bg-bottom.jpg);
background-repeat: no-repeat, repeat-y;
margin-top: -8px;
display: block;
}
#cat-nav:after {
content: " ";
display: block;
clear: both;
width: 81%;
padding-top: 8px;
margin: 0 auto;
background: url(teeth.png) repeat-x;
}
ul#cat-nav > li {
text-align: center;
display: inline-block;
}
#cat-nav a:link { color: #fff; text-decoration: none; padding: 10px; display: inline-block;}
#cat-nav a:hover { color: #fff; text-decoration: none; }
#cat-nav a:visited { color: #fff; text-decoration: none; }
#cat-nav a:active { color: #fff; text-decoration: none; }
ul .drop-menu-items {
position: absolute;
display: none;
background: #fff url(drop-menu-bg.png) bottom repeat-x;
-webkit-box-shadow: 0px 5px 5px #8f8f8f;
-moz-box-shadow: 0px 5px 5px #8f8f8f);
box-shadow: 0px 5px 5px #8f8f8f;
border-radius: 0 10px 10px 10px;
}
ul.drop-menu-items li{
background: url(drop-menu-bullet.png) no-repeat 5px center;
float: none;
position: relative;
color: #000;
padding: 5px 15px;
margin: 0 10px;
border-bottom: 1px dotted #cecece;
}
ul.drop-menu-items li:hover {
background: #f0f0f0 url(drop-menu-bullet.png) no-repeat 5px center;
}
.drop-menu-parent:hover .drop-menu-items {
display: block;
z-index: 1000;
}
#cat-nav > li:hover a{
color:#000;
}
ul#cat-nav li a:hover {
background: #fff;
border-radius: 5px;
/* padding-top: 5px; */
}
#cat-nav .drop-menu-items li a {
color: #000;
}
#cat-nav .drop-menu-items li:hover a {
text-decoration: underline;
background: none;
color: #000;
}
.drop-menu-parent:hover {
background: #fff;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
explanation
What i have added is this :
#cat-nav > li:hover a{
color:#000;
}
'>' indicates a direct child...so the direct child of #cat-nav when hovered over will assign a black color to the tag.
You could have also written : #cat-nav .drop-menu-parent:hover > a { color:#000; }
And it would have worked just as well...Infact, this second bit is a better option.
Add:
ul#cat-nav li:hover a{
color: #000;
}
Not sure if I understood you right(?), but here's an example. Is this what you mean? jsFiddle
nav {
background: #000;
}
#cat-nav {
text-align: center;
background-color: #0f0609, #0f0609;
background-image: url(cat-nav-bg.jpg), url(cat-nav-bg-bottom.jpg);
background-repeat: no-repeat, repeat-y;
margin-top: -8px;
display: block;
}
#cat-nav:after {
content: " ";
display: block;
clear: both;
width: 81%;
padding-top: 8px;
margin: 0 auto;
background: url(teeth.png) repeat-x;
}
ul#cat-nav > li {
text-align: center;
display: inline-block;
}
#cat-nav a:link { color: #fff; text-decoration: none; padding: 10px; display: inline-block;}
#cat-nav a:hover { color: #fff; text-decoration: none; }
#cat-nav a:visited { color: #fff; text-decoration: none; }
#cat-nav a:active { color: #fff; text-decoration: none; }
ul .drop-menu-items {
position: absolute;
display: none;
background: #000 url(drop-menu-bg.png) bottom repeat-x;
-webkit-box-shadow: 0px 5px 5px #8f8f8f;
-moz-box-shadow: 0px 5px 5px #8f8f8f);
box-shadow: 0px 5px 5px #8f8f8f;
border-radius: 0 10px 10px 10px;
}
ul.drop-menu-items li{
background: url(drop-menu-bullet.png) no-repeat 5px center;
float: none;
position: relative;
color: #000;
padding: 5px 15px;
margin: 0 10px;
border-bottom: 1px dotted #cecece;
}
ul.drop-menu-items li:hover {
background: #000 url(drop-menu-bullet.png) no-repeat 5px center;
}
.drop-menu-parent:hover .drop-menu-items {
display: block;
z-index: 1000;
}
ul#cat-nav li a:hover {
background: #000;
border-radius: 5px;
color: #fff;
/* padding-top: 5px; */
}
#cat-nav .drop-menu-items li a {
color: #fff;
}
#cat-nav .drop-menu-items li:hover a {
text-decoration: underline;
background: none;
color: #fff;
}
.drop-menu-parent:hover {
background: #000;
background-color: #000;
border-radius: 5px 5px 0 0;
}