I'm adding a separator "|" to every menu item using the :after selector. This adds it to the last element as well. I've been trying to remove that using the :last-child selector and it isn't working.
I'll list my code below and also provide a jsfiddle link.
HTML:
<nav id="nav_bar">
<div>
<ul>
<li>Home</li>
<li>Company Profile</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
CSS:
#nav_bar {
background-color: #debb23;
height: 45px;
}
#nav_bar ul{
list-style-type: none;
}
#nav_bar ul li{
display: inline-block;
margin: 10px 0;
}
#nav_bar ul li a{
color: #ffffff;
text-decoration: none;
padding: 0 15px;
}
#nav_bar ul li:after{
content: "|";
color: #ffffff;
}
#nav_bar ul li:last-child {
content: none;
}
Here's the jsfiddle link, http://jsfiddle.net/e3x369k0/
I appreciate any help.
You are targeting the last li element's content not its :after pseudo element's content.
Change your selector from:
#nav_bar ul li:last-child {
content: none;
}
to
#nav_bar ul li:last-child:after {
content: none;
}
Live example: http://jsfiddle.net/5x55emaf/
You're missing the :after in the last CSS rule. Should be like this: #nav_bar ul li:last-child:after
Try This and I've been using this technique in years :)
#nav_bar ul li{
border-right:1px solid black;
}
#nav_bar ul li:last-child{
border-right: 1px solid tranparent;
}
Related
I have a website, the nav bar currently looks like
Home | News | About Us |
How do I remove the line after "About Us"?
HTML
<nav>
<ul>
<li>
HOME
</li>
<li>
NEWS
</li>
<li>
ABOUT US
</li>
</ul>
</nav>
CSS
nav {
float:right;
clear:right;
width:40%;
margin:0;
margin-top:30px;
margin-right:8%;
}
nav ul {
margin: 0;
padding: 0;
font-family: Microsoft Yi Baiti;
}
nav ul li{
list-style: none;
}
nav ul li a{
text-decoration: none;
float: left;
display: block;
padding: 10px 30px;
color: black;
border-right: 1px solid #ccc;
}
nav ul li a:hover {
transition: all .2s ease-in;
color: rgb(204,204,204);
}
nav li.last {
border: none ;
}
The last line in CSS I attempted to remove the border, but it unfortunately does not work. Can anyone help? Thanks!
Use the :last-child pseudo class on your li and target the anchor tags.
Like so:
nav ul li:last-child a{
border-right: none;
}
You have the border on the a tag not the li. Also li does not have a class of last so use :last-child. You want to target it like this:
nav li:last-child a {
border: none;
}
Fiddle: http://jsfiddle.net/pqe9hc6y/
When I hover over the Menu it shows the dropdown menu.
I want it to happen on click.
I tried it but it didnt work for me.
This is my code:
HTML:
<div class="responsive-menu">
<ul>
<li>Menu
<ul>
<li>Zomer</li>
<li>Herfst</li>
<li>Winter</li>
<li>Lente</li>
</ul>
</li>
</ul>
</div>
CSS:
li {
list-style-type:none;
}
.responsive-menu {
display:block;
background-color:black;
color:white;
text-align:center;
padding:10px;
font-size:200%;
}
.responsive-menu ul li ul li {
padding:10px;
border-bottom:solid 1px white;
border-top:solid 1px white;
}
.responsive-menu ul li ul {
display:none;
font-size:60%;
padding-top:30px;
}
.responsive-menu ul li:hover ul {
display:block;
}
Here is a link to JSFiddle.
Instead of the :hover pseudo-class you should use the :focus pseudo-class.
.responsive-menu ul li:focus ul {
display:block;
}
To let the li gain focus it needs a tabindex attribute
<li tabindex="9999">Menu
http://jsfiddle.net/t78mf7jb/1/
amend
For not having the focus effect from browser add a outline:none style on the li
.responsive-menu ul li:focus {
outline: none;
}
http://jsfiddle.net/t78mf7jb/3/
HerrSerkers answer is a good answer, but there is another if you're willing to change your markup a little. You can simulate a click by using checkbox with it's label, like:
li {
list-style-type: none;
}
.responsive-menu {
display: block;
background-color: black;
color: white;
text-align: center;
padding: 10px;
font-size: 200%;
}
.responsive-menu ul li ul li {
padding: 10px;
border-bottom: solid 1px white;
border-top: solid 1px white;
}
.responsive-menu ul li ul {
display: none;
font-size: 60%;
padding-top: 30px;
}
#trigger {
display: none;
}
#trigger:checked + .responsive-menu ul li:hover ul {
display: block;
}
<input type="checkbox" id="trigger" />
<div class="responsive-menu">
<ul>
<li>
<label for="trigger">Menu</label>
<ul>
<li>Zomer</li>
<li>Herfst</li>
<li>Winter</li>
<li>Lente</li>
</ul>
</li>
</ul>
</div>
JSFiddle
Update - as HerrSerker pointed out, there is a flaw regarding closing the menu - check his fiddle with a fix.
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
I'm trying to fashion a 100% CSS and HTML dropdown menu like what's seen on http://phpbb.com. When you hover over the navigation links, a new div appears just below the one you hovered onto.
What I'm trying to do is make .submenu appear just below the <li> that it's nested into by using #nav li a:hover submenu {. To my knowledge this CSS selector should select the .submenu DIV when an a element is hovered over? But it doesn't work.
#nav {
list-style-type: none;
margin: -5px 0px 0px 5px;
}
#nav li {
display: inline;
}
#nav li a {
display: block;
padding: 3px;
float: left;
margin: 0px 10px 0px 10px;
text-decoration: none;
color: #fff;
font-weight: bold;
position: relative;
}
#nav li a:hover {
text-shadow: 1px 1px #333;
}
#nav li a:hover submenu {
display: block;
color: red;
}
.submenu {
position: absolute;
display: none;
}
<ul id="nav">
<li>Home
</li>
<li>
Skins
<div class="submenu">
hello :)
</div>
</li>
<li>Guides
</li>
<li>About
</li>
</ul>
Your second to last selector is looking for a "submenu" element, you should correct this to say ".submenu"
Like this:
/*#nav li a:hover submenu {*/
#nav li a:hover .submenu {
display: block;
color: red;
}
EDIT:
To get the hover to work, you also need to adjust your CSS so that the hover is applied to the list item, instead of the anchor tag:
#nav li:hover .submenu {
display: block;
color: red;
}
Are you missing a period ('.') before submenu in the selector #nav li a:hover submenu?
Try to edit this following part.
Put a . (dot) before the submenu, since its a class.
#nav li a:hover .submenu {
display: block;
color: red;
}
#nav li:hover .submenu {
display: block;
color: red;
}
You want the submenu to appear when you hover on li, not on a, simply because you do not have items with a class submenu inside the a.
Also you could consider using s for the submenus.
Hey guys, thanks in advance for any help or input. I am having trouble understanding CSS selectors and i have read the docs..
I am trying to refer to the UL with the id dropdown in my stylesheet. I was under the assumption that i was able to refer to any elements like:
#dropdown ul
{
}
This method however does not seem to work :s.. Am i misunderstanding CSS selectors? The elements in my actual code are nested deeper than this structure but i presume the principle is the same?
<div id="wrapper">
<ul id="dropdown">
<li class="sub">Dropdown
<!-- Sub Menu -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- End Submenu -->
</li>
</ul>
</div>
/* Dropdown Menu */
#dropdown ul
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#dropdown ul li
{
display: block;
position: relative;
float: left;
}
#dropdown li ul
{
display: none;
}
#dropdown ul li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
#dropdown ul li a:hover
{
background: #617F8A;
}
#dropdown li:hover ul
{
display: block;
position: absolute;
}
#dropdown li:hover li
{
float: none;
font-size: 11px;
}
#dropdown li:hover a
{
background: #617F8A;
}
#dropdown li:hover li a:hover
{
background: #95A9B1;
}
Try
ul#dropdown
{
}
This will select the ul element with ID dropdown.
With
#dropdown ul
you are trying to locate a ul element within an element with id dropdown. This will select all ul elements inside the #dropdown ul, however many levels deep.
edit: it's right as mario wrote.
edit2: im sorry for being 5seconds too slow, i just wanted to help. For completition of my post:
ul#dropdown or #dropdown is the right selection
#dropdown ul means "select any ul that is a direct or indirect child of #dropdown". That is not what you want, I think. Try #dropdown alone (you don't need to mention ul as IDs are exclusive, meaning you should only have one #dropdown in a page).