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/
Related
Good day all,
I have created a nav bar with various links, I would like to use the hover effect to have it change color on hover. Problem is that the effect is only around the word not the height of the nav bar to horizontal rules. I would like the hover effect to reach to the horizontal rules.
Here is my code:
ul{
list-style-type: none;
}
li{
display:inline;
padding-right: 50px;
}
#NavBar ul li a{
display: inline-block;
text-decoration: none;
cursor: pointer;
}
#NavBar ul li a:hover{
background-color: yellow;
}
<hr>
<nav id="NavBar">
<ul>
<li><a>Home</a></li>
<li><a>History</a></li>
<li><a>Gallery</a></li>
<li><a>Techniques</a></li>
</ul>
</nav>
<hr>
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
border: solid silver;
border-width: 1px 0;
text-align: center;
}
nav li{
display: inline-block;
margin: 0;
padding: 0;
}
nav a {
display: block;
text-decoration: none;
cursor: pointer;
padding: 1em;
}
nav a:hover {
background-color: yellow;
}
<nav>
<ul>
<li>
<a>Home</a>
</li><li>
<a>History</a>
</li><li>
<a>Gallery</a>
</li><li>
<a>Techniques</a>
</li>
</ul>
</nav>
The CSS selector only highlights the words because the a is targeted. If you change the a with li then It highlight the whole area of li.
Repalce:
#NavBar ul li a:hover{
background-color: yellow;
}
With:
#NavBar ul li:hover{
background-color: yellow;
}
Try this
li:hover {
background-color: yellow;
}
Here I have my website: http://gyazo.com/56e069ebf8b5bd61ee30523886180b88
There are a number of issues with the nav bar.
1.You can see that the text or nav bar is not horizontally centered, as indicated by the hover (which is equal on top and bottom)
2.There is to much space in between the text, (and this spacing is the only way I've found works without the text moving around when highlighting or hovering.
So for 1. is there a way I can make the text or the nav bar (not sure what is the cause) centre so the hover looks more equal (horizontally)
For 2. Is there a way I can close the gap between the text, while still keeping the same padding settings, and so it doesn't move the text around when I use the hover function.
I've also added a jsfiddle if that helps: http://jsfiddle.net/d1a5eshs/
HTML FOR NAV BAR
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li>HOME
</li>
<li>STATUS
</li>
<li>INFO
</li>
<li>GAMEMODES
<ul>
<li>SURVIVAL
</li>
<li><br>PURE-PVP
</li>
<li><br>GAMESWORLD
</li>
</ul>
</li>
<li>RULES
</li>
<li>VOTE
</li>
<li>CONTACT
</li>
</ul
CSS FOR NAV BAR
/*TOP NAV BAR SECTION*/
#nav_bar {
background-color: #a22b2f;
padding:1px;
box-shadow: 0px 2px
height:45px;
}
#nav_bar ul li {
display: inline-block;
}
#nav_bar ul li a {
color: white;
text-decoration:none;
font-weight:bold;
font-size:15px;
margin-left:10px;
padding-bottom:13px;
padding-top:17px;
padding-left:10px;
padding-right:10px;
margin-bottom:30px;
}
#nav_bar ul li ul {
display: none;
}
#nav_bar>ul>li>a:hover {
background:#8c1b1f;
padding-bottom:13px;
padding-top:13px;
padding-left:10px;
padding-right:10px;
}
#nav_bar>ul>li>ul>li>a:hover {
background:#c9c9c9;
padding-bottom:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
}
#nav_bar ul li:hover ul {
display: block;
position: absolute;
padding: 0px;
background: #e2e2e2;
padding-top:10px;
padding-bottom:10px;
padding-left:0px;
padding-right:10px;
border: 1px solid black;
border-radius:5px;
}
#nav_bar ul li:hover ul li {
display: block;
}
#nav_bar ul li:hover ul li a {
color: black;
font-size:12px;
font-weight:bol;
margin-left:-20px;
padding-bottom:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
}
There were several spacing issues and also there were several duplicate styles and a few mistakes, but I think I fixed all your issues. http://jsfiddle.net/d1a5eshs/1/.
Here's my version of your navigation bar: http://jsfiddle.net/zo541am2/. I trimmed and simplified both your HTML and CSS code.
HTML:
<nav>
<ul>
<li>HOME</li>
<li>STATUS</li>
<li>INFO</li>
<li>GAMEMODES
<ul>
<li>SURVIVAL</li>
<li>PURE-PVP</li>
<li>GAMESWORLD</li>
</ul>
</li>
<li>RULES</li>
<li>VOTE</li>
<li>CONTACT</li>
</ul>
</nav>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
nav {
background-color: #a22b2f;
box-shadow: 0px 2px 10px;
}
ul {
list-style-type: none;
}
nav > ul {
display: table;
margin: 0 auto;
min-width: 650px;
text-align: center;
}
nav > ul > li {
display: inline-block;
position: relative;
}
nav > ul > li > a {
display: block;
color: #fff;
text-decoration: none;
font: bold 15px/3 Serif;
padding: 0 15px;
}
nav ul ul {
display: none;
position: absolute;
min-width: 100%;
background: #e2e2e2;
border: 1px solid gray;
border-radius: 2px;
}
nav > ul > li:hover > a {
background: #8c1b1f;
}
nav ul ul li a {
display: block;
color: black;
font: bold 12px/3 Sans-Serif;
text-decoration: none;
}
nav ul ul > li:hover > a {
background: #c9c9c9;
}
nav > ul > li:hover > ul {
display: block;
}
This is how I want the navigation bar, as in : http://themediaoctopus.com/social-media/nostalgic-approach-advertising
How to change the complete color of <li> when hovered on or selected?
Any idea on how to get those seperators between those buttons?
Selection action doesn't work, why? I'm on a particular page and that button on navigation bar is not highlighted. Why and how can I do it?
Here is my current navigation bar when hovered:
Here is my HTML :
<body>
<nav>
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>GET IT</li>
<li>WHAT YOU CAN DO</li>
<li>ABOUT</li>
</ul>
</nav>
</body>
Here is my CSS :
body {
color : #F9F9F9;
}
nav {
background-color: #26AD60;
margin: 10px 10px 0px 10px;
}
nav ul {
margin: 0px;
list-style-type: none;
padding: 15px 0px 15px 0px;
}
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
color: #F9F9F9;
border-bottom: none;
font-weight: bold;
text-decoration: none;
}
nav ul li a:active {
background-color: #1C8148;
text-decoration: none;
}
nav ul li:hover {
background-color: #1C8148;
color: #F9F9F9;
}
Add this:
padding: 15px 10px 15px 10px;
To your nav ul li:hover{ CSS
Fiddle: http://jsfiddle.net/39Lzp/
In order to have that item be highlighted based on the page you are on you can add a class to it and style that class accordingly. Then, in each different HTML file, you add that class to the corresponding element. For example, index.html would look like this:
<li class="current">HOME</li>
<li>HOW IT WORKS</li>
But how_it_works.html would look like this:
<li>HOME</li>
<li class="current">HOW IT WORKS</li>
Now, for the borders, all you need to do is use the border property like so:
nav ul li {
border-left: 1px dashed white;
}
nav ul li:first-of-type {
border-left: none;
}
Also, in order for the border to span the entire height of the nav bar, change this:
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
To this:
nav ul li {
display: inline;
padding: 15px 10px 15px 10px;
}
http://jsfiddle.net/LbBEK/
Also, for future reference, you have 3 separate questions here. Next time, break your questions up to be more concise and you'll find yourself getting a much better response here on SO.
Its good if you use a:hover and the properties given to it... which allow user to have clickable area been selected and highlighted.
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>project</li>
</ul>
</nav>
CSS:
nav{
display:block;
background:#26AD60;
}
nav ul{
list-style:none;
margin:0px;
padding:0px;
overflow:hidden;
}
nav ul li{
float:left;
border-right: 1px dashed rgba(255, 255, 255, 0.25);
}
nav ul li:last-child{
border:none;
}
nav ul li a{
transition: all 0.25s linear 0s;
padding: 0px 20px;
line-height: 50px;
outline: medium none;
font-family:arial;
font-size:12px;
color: rgb(255, 255, 255);
text-shadow: none;
text-transform: uppercase;
text-decoration:none;
display:block;
}
nav ul li a:hover{
background: #229b56;
}
Please check this jsfiddle to see the same.
Just change the hover statement background-color
nav ul li:hover {
background-color: blue; // here
color: #F9F9F9;;
}
You may want to change the active statement too
nav ul li a:active {
background-color: red;
text-decoration: none;
}
For the border, you can like something like this :
nav ul li {
border-right: 1px dashed rgba(255,255,255,0.25)
}
nav ul li:last-child {
border: 0; // they dont do this, but I prefer with it. As you want.
}
Demo JSFiddle
Apply this on hover padding: 15px 10px 15px 0px;
See demo
Apply border property border-right: 1px dashed #fff for dashed separation between li.
I'm using an HTML/CSS menu from the article SuckerFish Dropdowns. My particular menu has a grey background. I am trying to get the menu's background to have a fixed width. I tried adding a width parameter to the #navbar section in the CSS but that didn't seem to do anything. How do I get this fixed width behavior?
HTML
<ul id="navbar">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li>System Set-Up & Status
</li>
<li>NMEA Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li></ul>
</li>
<li>UDP Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li><li></li></ul>
</li>
<li>Baro / PoE
</li>
<li>Advanced
</li>
<li>MOB
</li>
</ul>
CSS
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #cccccc;
color: #000000;
text-decoration: none; }
#navbar li a:hover {
background-color: #999999; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #c0c0c0;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #999999; }
The CSS snippet is here and the HTML snippet is here
jsfiddle of question:
The #navbar is taking the appropriate width, but it does not have a background-color set so by default it is transparent.
Remove background-color from #navbar li a and add it to #navbar instead. You will also have to remove the height and clear your floats for it to work properly:
#navbar {
background-color: #cccccc;
margin: 0;
padding: 0;
overflow: hidden; /*clear floats */
}
Working example: http://jsfiddle.net/UfuG2/
Since you're floating your menu list items, you'll want to put a clearfix on the unordered list. Then you can set the width and background-color on the ul. Check out http://jsfiddle.net/qT7xs/.
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.