I'm trying to get this simple horizontal navigation menu to work but when I go and add an "active" class to the active li, nothing is changing. the .active just doesn't show up? What did I do wrong guys?
<div id="nav">
<ul>
<li class="active">All</li>
<li>Services</li>
<li>Technology</li>
<li>Referral</li>
<li>Reseller</li>
</ul>
</div>
Here's the CSS:
#nav ul{
list-style-type:none;
margin:40px auto;
padding:0;
width:625px;
height:50px;
}
#nav li{
display:inline;
}
#nav li a,
#nav li a:visited,
#nav li a:link {
width:120px;
height:20px;
display:inline;
float:left;
text-align: center;
padding-top:5px;
padding-bottom: 5px;
margin-top:auto;
margin-bottom:auto;
font-family: arial;
text-decoration: none;
color:#929292;
font-weight: bold;
background-color: #e5e5e5;
margin-left:5px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#nav li a{
}
#nav li a:hover{
color: #ffffff;
cursor: pointer;
background-color: #2F5290;
}
#nav li a:active{
color: #FAAF31;
}
.active{
background-color: #2F5290;
color: #FAAF31;
}
Specificity is your problem. In quick terms: ids are worth 100, classes worth 10 and elements worth 1, so #nav li a is worth 102 points of specificity, but .active is only worth 10 points. If you update it to #nav li a.active you will get 112 points, thus having enough specificity to override your original styles. You can read more about specificity on W3C
Thanks #setek for the good answer, I thought that it should really be the answer and added a bit as well.
Related
I am not sure where I am going wrong but the css on a and a:hover doesnt seem to work. I cant see the background of the li elements changing to blue when I hover over them.Can anyone help? Any help will be really appreciated.
The HTML is
<body>
<div id="navbar">
<ul>
<li>home</li>
<li>nature</li>
<li>travel</li>
<li>people</li>
<li>random</li>
<li>bio</li>
<li>contact</li>
</ul>
</div>
</body>
the CSS is
#navbar ul{
float:left;
margin:0;
width:600px;
list-style : none;
padding-top:30px;
}
#navbar ul li
{
vertical-align: middle;
display: inline;
margin: 0;
text-align:center;
font-family: Calibri;
padding-left:15px;
font-size:20px;
font-weight:normal;
list-style-type: none;
color:#808080;
}
#navbar ul li a
{
text-decoration: none;
white-space: nowrap;
line-height: 45px;
padding: 5px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #666;
}
#navbar ul li a : hover
{
color:#FFFF00;
background-color: #4caef2;
}
You can't add random spaces in selectors.
This is an error:
#navbar ul li a : hover
Remove all the spaces except the actual descendant combinators:
#navbar ul li a:hover
This would have been picked up if you had used a validator.
Please remove the space b/w colon and hover ie,
navbar ul li a : hover should be #navbar ul li a:hover
change
#navbar ul li a : hover
to
#navbar ul li a:hover
please
if you want to apply a pseudo class like hover you have to append it directly after the selector you are applying the pseudclass to, separated by a ':' without any additional spaces.
The syntax for pseudo-classes is :
selector:pseudoclass
So in your case :
#navbar ul li a:hover
hoping someone could help me solve this issue...im not using js, just css and html. I have built a menu which works good but my issue is when i try to add in a sub menu. I would like for it be hidden until someone goes over the main menu, then i would like for it to drop down. The effect that im getting now is my sub menu loads right away with the main menu above it and then it disappears when i go over that main menu item. i have tried some different things such as adding z-index here and there, but no luck so far...
HTML:
<div id="container">
<div id="menu">
<ul id="nav">
<ul>
<li id="menu1"><h2>Home</h2></li>
<li id="menu2"><h2>Sign-Up</h2></li>
<li id="menu3"><h2>Packages</h2>
<ul>
<li>Gold</li>
<li>Platinum</li>
</ul>
</li>
<li id="menu4"><h2>About Us</h2></li>
<li id="menu5"><h2>Contact</h2></li>
</ul>
</ul>
</div>
CSS:
* {
margin:0px;
padding:0px;
}
.form-textbox{
height:100px;
font-size:100px;
}
#fieldset{
width:300px;
}
#fieldst p{
clear:both;
padding:5px;
}
#legend{
font-size:16px;
}
label[for="username"] {
color:#FFFFFF;
font-weight:bold;
clear:both;
text-align:left;
}
label[for="password"] {
color:#FFFFFF;
font-weight:bold;
clear: both;
text-align:left;
margin-top:40px;
}
body {
padding-top:0px;
background-color:#01111d;
color:#FFF;
font-family:verdana, arial, sans-serif;
text-align: left;
letter-spacing: 1px;
}
a {
color: #FFF;
font-size: 14px;
}
a:hover {
color:#efae00;
} //01a9c0
.more {
float:left;
}
.clear {
clear:both;
}
p {
margin: 20px 0px 20px 0px;
line-height: 16px;
font-size: 14px;
}
#container {
margin: 0px auto;
width: 873px;
}
#menu {
background-image:url(images/menu.gif);
width:862px;
height:90px;
position:relative;
z-index:99999;
}
#menu li{
position:absolute;
top:40px;
list-style-type:none;
}
#menu1 {
left:110px;
}
#menu2 {
left:255px;
}
#menu3 {
left:400px;
}
#menu4 {
left:540px;
}
#menu5 {
left:680px;
}
#menu a {
font-family: verdana, arial, sans-serif;
font-size:12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover {
color:#efae00;
}
#menu li > #nav li ul
#nav li ul {
position:absolute;
display:none;
}
#nav li:hover ul {
display: none;
}
#nav li ul li {
float: none;
display: block;
}
#nav li ul li a {
width: 118px;
position: absolute;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #fff;
}
#nav li ul li a:hover {
background: #066;
color: #000;
}
Jsfiddle here: http://jsfiddle.net/bC7f2/
So it appears there are a few things that we can change in your code. The first thing is when you should and should not display things. To keep it short, I have made a few adjustments to the CSS code, just be sure you are getting the exact area you are trying to use. Here are the new selector names:
#nav ul li:hover ul #ITEM NAME HERE
#nav li ul # ITEM NAME HERE
Next, you started off by displaying your drop down menu as "display: block;" , this means that anything in the drop down menu will automatically begin on the page, this should actually be set to "display:none;", so that it is not visible until you hover. Here is your end product:
#nav ul li:hover ul #item1 {
display: none;
position: absolute;
z-index: 100;
display: inline-block;
top: 20px;
}
#nav ul li:hover ul #item2 {
/* display: none; */
position: relative;
z-index:1;
display: block;
top: 13px;
}
#nav ul li:hover ul #item3 {
/* display: none; */
position: relative;
z-index:0;
display: block;
top: 27px;
}
#nav li ul #item1 {
z-index:100;
display:none;
}
#nav li ul #item2 {
z-index:1;
display:none;
}
#nav li ul #item3 {
z-index:0;
display:none;
}
I also added a margin here to connect the sub menu to the normal menu or else it will act really weird. Your end product can be found here.
I would suggest looking into some specific tutorials on how to create drop down menus with CSS or look into using jQuery with your drop down menu (it will make it more clean and easy to use).
Edit: Here is an update with the sub menus showing, I have also added another sub menu to show you exactly how the items will work and the corresponding CSS to go with it here.
To break down my additions, I will split it up into sections really fast:
Z-Index: This is pretty much the order of what the items will appear in, where the higher the number, the higher on the list it will appear. Here is a resource for more information.
Positioning: I have used a combination of absolute and relative positioning. This is extremely dirty and I don't know if many would recommend the use of this in the applicable web programming world. It would be better to use solely absolute positioning, but this will still get your job done. More information can be found here.
Top: This is pretty self explanatory but it is really the distance from the utmost top object. More information on this can be found here.
I have recently been working on a small CSS menu that I can’t get working properly. Ive been fiddling around with existing menu’s and trying to get the positioning and fonts etc to be working.
Basically first I had my main menu, which is working fine the way it should. Now when I try add a dropdown to one of the options, it really messes up and I am completely clueless to fixing this mess :S
What I need help in: Positioning the dropdown menu’s below the correct menu-item (now they always float on the left). Also I want the submenu items, to be the exact same style/size/font/etc as the main menu items, which for some reason I can’t get working either.
Any help is appreciated, I submitted the CSS / HTML Code of the menu into a pastebin file:
CSS: http://pastebin.com/rJEgvnK1
HTML: http://pastebin.com/e52RuH4r
Its not perfect but still you can figure out the positioning correctly but not the fonts. Check this jsfiddle
CSS used:
#mainMenu ul{
width:954px;
padding:0;
margin:5px 0 10px 0;
list-style-type:none;
border:solid 2px #ddd;
font-size: 18px;
text-transform: uppercase;
}
#mainMenu ul li a{
text-decoration:none;
color:#000000;
background-color:#eee;
padding:0.2em 0.6em;
border-right:0px solid white;
display:block;
}
#mainMenu a:hover{
color:#FFFFFF;
background-color:#2E9AFE;
}
#mainMenu ul li{
display:inline-block;
position: relative;
}
#mainMenu ul ul {
background-color: #eee;
display: none;
width: 133px;
height: auto;
position: absolute;
border: solid 1px #ddd;
top: 23px;
}
#mainMenu ul li:hover > ul{
display:block;
padding:0;
margin:5px 0 10px 0;
list-style-type:none;
border:solid 2px #ddd;
font-size:18px;
text-transform:uppercase;
}
#mainMenu ul ul li:hover a{
color:#FFFFFF;
background-color:#2E9AFE;
}
#mainMenu ul ul li:hover {
cursor:pointer;
}
#mainMenu ul ul li {
float:none;
padding:10px;
}
#mainMenu ul ul li{
font-size:16px;
padding:0 10px;
}
Not perfect but this should get you furter:
jsfiddle
To get the blocks below each link (IN YOUR CSS), simply remove the a-Tag from #mainMenu ul li a{
This one is a little nicer !!!
Roll over the text and the blue block below moves along the blue line. If I do it via position relative and set the blue block to top 20px, it also moves the text down.
Is there a way I can do this purely in CSS, or should I use a background image with the top half set as a transparent gif and the bottom blue?
The code I've tried so far is:
#menu ul {
list-style:none;
margin:0;
padding:10px;
text-align:center;
}
#menu ul li {
display:block;
float:left;
list-style:none;
margin-right: 40px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 14px;
padding-top: 5px;
padding-bottom: 5px;
height: 39px;
}
#menu ul li a {
display:block;
margin:0px;
padding:0px;
color:#FFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
margin-right: 5px;
margin-left: 5px;
padding-left: 10px;
padding-right: 10px;
}
#menu ul li a:hover {
color:#fff;
margin-bottom:5px;
padding-bottom:5px;
}
#menu ul li a.active,
#menu ul li a.active:hover {
color:#fff;
background-color: #0488C5;
font-weight:bold;
}
I am still learning so excuse any mistakes!
Click here for a demo.
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
</ul>
ul {
width: 100%;
border-bottom: 3px solid blue;
overflow: hidden;
}
li {
float: left;
margin: 0 20px 0 20px;
}
li a {
border-bottom: 20px solid #fff;
display: block;
}
li a:hover, .active {
border-bottom: 20px solid blue;
}
You can then use the hover state for another class called something like "active" that you can apply when on that page.
You should be able to tweak this example to suit your needs.
You don't need any images. CSS is more than capable of doing this for you.
....................................
Live demo
Hi now this is possible used to after in css
as a simple example is this
HTML
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
Css
ul{
list-style:none;
border-bottom:solid 10px blue;
}
li{
display:inline-block;
vertical-align:top;
background:red;
}
li a{
text-decoration:none;
display:inline-block;
vertical-align:top;
position:relative;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}
li:hover a:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:0;
height:10px;
background:blue;
}
LIve demo
Place three anchors in an unordered list and have them displayed in-line by setting the list display to none an floating the list items. Further add an empty span to each anchor which you can style with the :hover pseudo selector.
Learn CSS, its fun!
I'd like to make a black navigation bar for my website, and when you hover over the first link it goes orange, the second link it goes green, etc. I know how to change colour on hover but don't know how to make each link different.
I figure its something to do with giving ids to each li tag?
<div id="navbar">
<ul>
<li id="link1">1</li>
<li id="link2">2</li>
<li id="link3">3</li>
</ul>
</div>
But then how do I create different styles for each of these ids in the css file?
Below is what I tried
#navbar ul li a {
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 30px;
padding-right: 30px;
color: #ffffff;
background-color: #000000;
}
#navbar ul li #link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
#navbar ul li #link2 a:hover {
color: #ffffff;
background-color: #28C622;
padding-top:15px;
padding-bottom:15px;
}
Help much appreciated!
What you're doing is on the right track, but don't repeat the CSS over and over:
#navbar ul li a:hover {
color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
#navbar ul #link1 a:hover {
background-color: #C62222;
}
#navbar ul #link2 a:hover {
background-color: #28C622;
}
As others have noted, you also need to either remove the space between the li and your id, or just remove the li entirely (since there is only one link1, you don't necessarily need to tell the browser that it is an li).
Additionally, if you want, you can (and probably should) simply those selectors all the way down to #link1 a:hover and #link2 a:hover. It's more of a stylistic choice, but it helps to keep your code clean.
You have a bad selector. The li is superfluous.
#navbar #link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
You need to remove the space between li and #link1:
#navbar ul li#link1 a:hover
You could further optimize your CSS like this:
#navbar a {
text-decoration: none;
padding: 25px 30px; /* shortcode for top/bottom - left/right */
color: #ffffff;
background-color: #000000;
}
#navbar a:hover { /* common hover styles */
color: #ffffff;
padding:15px 30px;
}
#link1 a:hover { /* individual hover styles */
background-color: #C62222;
}
#link2 a:hover { /* individual hover styles */
background-color: #28C622;
}
remove the space between li and #link2.
#navbar ul li#link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
#navbar ul li#link2 a:hover {
color: #ffffff;
background-color: #28C622;
padding-top:15px;
padding-bottom:15px;
}
You were close, but the space between li and #linkX is causing problems. These are not two separate elements, so they should be combined. One possible method is:
#navbar ul li#link1 a:hover {
....
Alternately, you can use:
#navbar ul #link1 a:hover {
....
You may wish to combine the duplicated styles into a single directive:
#navbar ul li a:hover {
color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
Then use only the changed style as needed:
#link1 a:hover {
background-color: #C62222;
}