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;
}
Related
I'm working on a pure CSS dropdown menu but ran into some alignment issues.
Specifically: the sub-menu items get moved over to the right when hovering over their respective menu item. Here's the fiddle: https://jsfiddle.net/fhakjnhe/5/
HTML
<body>
<header>
<div id="menustrip">
<div id="logo_container">
<h1>LOGO</h1>
</div>
<div id="menu">
<nav>
<ul>
<li><a id="active-page" href="#">AAA</a></li
><li>BBB
<ul>
<li style="background-color:red;">A</li>
<li>B</li>
</ul>
</li
><li>CCC</li
><li>DDD</li
><li>EEE
<ul>
<li style="background-color:blue;">A2</li>
<li>B2</li>
</ul>
</li
><li>FFF</li
><li><a id="quote-page" href="#">GGG</a></li>
</ul>
</nav>
</div>
</div>
Related CSS
header #menustrip #menu nav ul
{
list-style: none;
position: relative;
}
header #menustrip #menu nav ul li
{
display: inline-block;
}
header #menustrip #menu nav a
{
display: block;
color: #1d120c;
font-weight: bold;
font-size: 18px;
padding: 0 /*15px*/10px;
margin: 0;
border: 2px solid transparent;
}
header #menustrip #menu nav a:hover
{
border-left: 2px solid #97bc14;
border-right: 2px solid #97bc14;
color: #97bc14
}
header #menustrip #menu nav a#active-page
{
color: #97bc14
}
header #menustrip #menu nav a#quote-page
{
margin-left: 15px;
border: 2px solid #97bc14;
color: #97bc14
}
header #menustrip #menu nav a#quote-page:hover
{
border: 2px solid #97bc14;
background-color: #97bc14;
color: #fcffff;
}
header #menustrip #menu nav ul li ul
{
/*display: none;*/
position: absolute;
padding-left: 0;
}
header #menustrip #menu nav ul li:hover > ul
{
display: inherit;
}
header #menustrip #menu nav ul li ul li
{
/*left: -100%;*/
min-width: 100px;
float: none;
display: list-item;
position: relative;
}
I checked a similar question CSS Drop Down Menu : nav ul ul li Moved to Right and checked that margin and padding were set to 0. Also in my case, the sub-item moves to the right when hovering, it seems to remain okay while "hidden".
On line 94 of the CSS file, change display: inherit; for display: block;. The inherit property is displaying the dropdown menu as an inline-block.
i suggest you to use software Web menu maker & button maker
this software let you to create professional and beautiful menus and buttons with java script or only css.
http://www.easymenumaker.com/
I'm trying to create a dropdown menu for my personal website but something doesn't seem to go right.
HTML:
<header class="mainheader">
<nav class="nav">
<ul>
<li>Home</li><li>
League</li><li>
<ul class="nav-dropdown">
<li>bbva</li>
<li>barclays premier league</li>
</ul>
Contact</li>
</ul>
</nav>
</header>
CSS:
.mainheader, .header-text, .header-text-soccer {
background-color: green;
margin-left: 60px;
margin-right: 60px;
margin-top: 20px;
height: 60px;
border-radius: 6px;
}
.mainheader nav ul li a {
text-decoration: none;
color: white;
}
.mainheader nav ul li {
display: inline-block;
padding: 20px;
color: white;
}
.nav ul li:hover {
background-color: #41a608;
height: 20px;
border-radius: 2px;
}
The last few lines of code are the problem I think. The hover part covers every line-item that is within the .nav , but I don't know how to seperate the main navigation links from the sub navigation links (which should drop down) in css.
Can anyone explain to me what code I should add to let it work?
thanks.
I modified your complete code:
Here is it, There are several modification. This is may be helpful for you. You need to hide your drop-down option first and find out the time when firing it out and also how to fire.
And one important thing, you have to set your drop-down options as absolute, so that it is the child of some main option/ menu.
Modified HTML:
<header class="mainheader">
<nav class="nav">
<ul>
<li>Home</li>
<li>
League
</li>
<li>Dropdown
<ul class="nav-dropdown">
<li>bbva</li>
<li>barclays premier league</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
Modified CSS:
.mainheader, .header-text, .header-text-soccer {
background-color: green;
margin-left: 60px;
margin-right: 60px;
margin-top: 20px;
height: 60px;
border-radius: 6px;
position: relative;
}
.mainheader nav ul li a {
text-decoration: none;
color: white;
}
.mainheader nav ul li ul{
display: none;
}
.mainheader nav ul li {
display: inline-flex;
padding: 20px;
color: white;
}
.nav ul li:hover {
background-color: #41a608;
border-radius: 2px;
}
.nav ul li:hover ul{
background: #aaa none repeat scroll 0 0;
display: block;
margin-left: -20px;
padding: 0;
position: absolute;
top: 60px;
width: 200px;
}
.mainheader nav ul li ul li{
box-sizing: border-box;
color: white;
display: inline-block;
padding: 20px;
width: 100%;
}
I suppose this is what you need:
https://jsfiddle.net/8f2hvdfh/1/
Your CSS was a mess. Check out a guide on how to make CSS dropdown menus: http://www.w3schools.com/css/css_dropdowns.asp
This gives you the basic setup:
nav ul ul {
position:absolute;
display:none;
padding-left:0;
}
nav ul li {
display:inline-block;
height:60px;
}
nav ul ul li {
display:block;
}
nav ul li a {
text-decoration:none;
color:white;
display:block;
padding:21px;
}
nav ul li:hover ul {
display:block;
}
The rest is bells and whistles. Good luck.
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/
I have a problem with the navigation bar. When I hover over About or Text on the nav bar it shows a spacing on the left side of the button, I want it the hover colour to contain the full width of the button.
https://jsfiddle.net/jdd3h0sf/3/
HTML:
<div id="nav">
<ul>
<li class="home">Home</li>
<li>About</li>
<li>Text ⌄
<ul class="submenu">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
<li>Work</li>
<li>Contact ⌄
<ul class="submenutwo">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
</ul>
CSS:
#nav {
background-color: #333;
height: 52px;
text-align: center;
margin: 0 auto;
letter-spacing: 1px;
text-transform: uppercase;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li {
border-right: 1.8px solid #191919;
height: auto;
width: 156.5px;
padding: 0;
margin: 0;
}
.home {
border-left: 1.8px solid #191919;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #444;
}
#nav ul li a, visted {
color: #ccc;
display: block;
padding: 15px;
margin: 0;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #444;
border: 1px solid #333;
border-top: 0;
max-width: 169px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:visited {
color: #ccc;
}
#nav ul ul li a:hover {
color: #2980B9;
}
This is a part of display:inline-block;. If you want to keep them displayed inline-block, there are several different solutions (Read a css-Tricks article about it):
1 - Change your HTML format:
Change your <li>'s html like this:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
Or this:
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
Or even with comments, like this:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
Or, just place all the li's on a single line:
<ul><li>one</li><li>two</li><li>three</li></li>
It is messy, yet effective.
2 - Negative margins:
Pretty straightforward:
li{
display: inline-block;
margin-right: -4px;
}
3 - Skip the closing tag:
This is actually perfectly fine in HTML5, li's do not have to have a closing tag.
<ul>
<li>one
<li>two
<li>three
</ul>
4 - Set the <ul>'s font size to 0:
ul {
font-size: 0;
}
ul li {
font-size: 16px;
}
5 - Or, just float the <li>'s:
Whatever floats your boat.
You are experiencing the dreaded inline-block spacing issue. In your fiddle, if you condense all of your li elements to be on the same line, the hover works as expected. The linked article outlines a few other options.
You can also just float the elements and that would resolve the issue.
#nav ul li {
float: left;
}
Having some trouble with my nav, i'm trying to create a dropdown menu when you hover over the "Match" link. every time I hover the mouse over the link, list will stay underneath said link and disrupt how the navigation bar looks. Any helps will be much appreciated
HTML
<nav>
<span class= "navbar-button"></span>
<ul class="navbar">
<li>Home</li>
<li>Gallery</li>
<li>Match
<ul>
<li>City</li>
<li>Coastal</li>
<li>Rural</li>
</ul>
</li>
</ul>
</nav>
CSS
body{
padding: 0;
margin: 0;
font-family: 'main';
}
.navbar {
list-style: none;
background-color: #333;
color: #fff;
margin: 0;
text-align: center;
}
.navbar > li {
display: inline-block;
padding: 1.3% 2%;
}
.navbar > li:hover {
background-color: #585858;
}
.navbar > li > a{
text-decoration: none;
font-size: 30px;
color: #fff;
}
.navbar li ul {
display: none;
}
.navbar li:hover ul{
display: block;
}
you need to use absolute positioning to break it out of the container so it won't disrupt the rest of the elements:
.navbar li ul {
position: absolute;
display: none;
background-color: #333;
margin: 0;
text-align: center;
padding: 20px;
}
Be sure to set its parent to position: relative or the body will become its container:
.navbar > li {
position: relative;
display: inline-block;
padding: 1.3% 2%;
}
JSFIDDLE
Add position absolute to: .navbar li ul