I would like my hover effect to be complete, like in the picture. Mine highlights only a tiny bit around the text.
What am I missing? Please add an explanation to the solution.
http://jsfiddle.net/terzista/9vtpyojh/
css:
.nav
{
margin:0 auto;
width:100%;
position: absolute;
top:0px;
left:0px;
z-index: 4;
background-color:rgba(172,175,176,0.68);
}
.nav ul
{
text-align: center;
}
.nav li
{
width: 6em;
letter-spacing:0.1em;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
}
.nav a{
/*display: inline-block;*/
text-decoration: none;
color: #D12C2C;
}
.nav li:hover
{
color: #666;
background-color: #ED8C8C;
}
.nav li:hover a
{
color: #fff;
}
Modify the following selectors in your css,
.nav ul
{
text-align: center;
margin:0;
}
.nav li
{
width: 6em;
letter-spacing:0.1em;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
padding:10px;
}
The only thing being highlighted is your li. If your ul has margin, then there will be space between the highlighted li and the rest of your ul (so to speak). Removing the margin from ul, then adding padding:10px to get that same "buffer zone" allows it to look the same, but also give the highlight you want.
.nav
{
margin:0 auto;
width:100%;
position: absolute;
top:0px;
left:0px;
z-index: 4;
background-color:rgba(172,175,176,0.68);
}
.nav ul
{
text-align: center;
margin:0;
}
.nav li
{
width: 6em;
letter-spacing:0.1em;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
padding:10px;
}
.nav a{
/*display: inline-block;*/
text-decoration: none;
color: #D12C2C;
}
.nav li:hover
{
color: #666;
background-color: #ED8C8C;
}
.nav li:hover a
{
color: #fff;
}
<section class="nav">
<nav>
<ul>
<li>Home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</section>
Related
I created a dropdown menu and I am trying to get rid of the little space that I am getting at the beginning of the dropdown, between the parent component and its children, as shown in the screenshot below:
I want the drop down to begin from where the tab starts, something like this:
--------
| Parent
-----------
| Child
------------
Please, find a code snippet attached below:
ul {
list-style-type: none;
margin: 0;
padding-left: 25px;
padding-right: 10px;
position: absolute;
}
li {
display: inline-block;
float: left;
margin-right: 1px;
}
li a {
display: block;
min-width: 138.7px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
li:hover a {
background: green;
}
li:hover ul a {
background: grey;
color: #2f3036;
height: 40px;
line-height: 40px;
text-align: center;
}
li:hover ul a:hover {
background: green;
color: #fff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
}
ul li a:hover+.hidden,
.hidden:hover {
display: block;
width: auto;
}
#menu {
text-align: center;
}
<ul class="menu">
<li>Somthing</li>
<li> something
<ul class="hidden">
<li>somethoing</li>
<li>something</li>
</ul>
</li>
</ul>
Thanks in advance.
Set the padding to 0 on your hidden class. .hidden{padding: 0;} and also remove the li ul li a{width:auto; min-width:100px;} JSFiddle I changed your media query so it can be viewed in here.
ul {
list-style-type:none;
margin:0;
padding-left: 25px;
padding-right: 10px;
position: absolute;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
li a {
display:block;
min-width:138.7px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
li:hover a {
background:green ;
}
li:hover ul a {
background: grey;
color: #2f3036;
height: 40px;
line-height: 40px;
text-align:center;
}
li:hover ul a:hover {
background: green;
color: #fff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
.hidden{
padding: 0;
}
ul li a:hover + .hidden, .hidden:hover {
display:block;
width: auto;
}
#menu{
text-align:center;
}
#media screen and (max-width : 460px){
ul {
position: static;
display: none;
}
li {
margin-bottom: 1px;
}
ul li, li a {
width: 100%;
}
.show-menu {
display:block;
}
}
<ul class="menu">
<li>Something</li>
<li> something
<ul class="hidden">
<li>something</li>
<li>something</li>
</ul>
</li>
</ul>
li{position: relative;}
ul li ul{padding: 0; width: 100%;}
I have tried to make horizontal menu in center of page but 'div align=center' not working properly.
.nav ul {
display: block;
list-style-type: none;
margin: 0;
position: absolute;
}
.nav li {
display: inline-block;
float: left;
}
.nav li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica
Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } .nav li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } .nav div ul {display:block;} .nav li ul { display: none; } .nav
li ul li {
display: block;
float: none;
}
.nav li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
.nav ul > li:hover ul {
display: block;
visibility: visible;
}
.nav ul li:hover > ul {
display: block;
}
<div class="nav">
<ul>
<li>Home
</li>
<li>
About
<ul>
<li>A1
</li>
<li>A2
</li>
</ul>
</li>
</ul>
</div>
sample code
I have tried to make horizontal menu in center of page but 'div align=center' not working properly.
Remove position:absolute; from your ul and add these minor changes
.nav{
width: 100%;
}
.nav ul {
display:block;
list-style-type:none;
margin: 0px auto;
width: 50%;
}
Here's the solved fiddle
Remove position:absolute;. It doesn't take any margin or padding values.
.nav ul {
list-style-type:none;
margin:0 auto;
display:table;
}
Here solved fiddle link
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #19c589;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li class="dropdown">
About
<div class="dropdown-content">
A1
A2
A3
</div>
</li>
<li>New</li>
</ul>
Use as the below:
.nav {
margin:0 auto;
}
please remove the ul position: absolute; style other styling left as it is. These are the additional changes you have to do.
.nav {
display: -webkit-box;
}
.nav ul {
margin: 0 auto;
}
I am trying to create a horizontal navigation bar with the following properties:
The anchor text is centered horizontally and vertically in the list
items.
The entire list item is a clickable link.
On hover, the background colour of the list item and the colour of the anchor text are swapped.
Here is a fiddle that manages to accomplish only #2. None of the solutions that I have found for #1 seem to work. #3 escapes me.
Advice is appreciated.
Here is the working code:
#navbar ul {
list-style-type: none;
display: table;
}
#navbar li {
display: table-cell;
float: left;
width: 200px;
height: 50px;
text-align: center;
background-color: #f0e68c;
}
#navbar li:hover {
background-color: black;
}
#navbar li a {
display: block;
text-decoration: none;
color: black;
}
<div id="navbar">
<ul>
<li>Intro</li>
<li>Bio</li>
<li>Issues</li>
</ul>
</div>
You can use this css. Check this link https://jsfiddle.net/oynd1sq6/
#navbar li:hover a{
color:#ffffff;
}
You can use below CSS to get all the 3 things you wanted.
#navbar ul
{
list-style-type: none;
display: table;
}
#navbar li{
float: left;
text-align: center;
}
#navbar li a
{
display: table-cell;
width: 200px;
height: 50px;
text-decoration: none;
color: black;
vertical-align: middle;
background-color: #f0e68c;
}
#navbar li a:hover{
color: #f0e68c;
background-color: black;
}
I have used vertical-align: middle to align text it vertically and gave your li styling to a tag to achieve this.
Fiddle here: http://jsfiddle.net/MasoomS/6mn0fun4/1/
Just two modification you need is.
To accomplish #1:
Make line height of anchor same as line height of li tag. i.e. 50px
To Accomplish #3
Add style rule for anchor.
#navbar li:hover a{
color:#f0e68c;
}
Here is fiddle
#navbar ul {
list-style-type: none;
display: table;
}
#navbar li {
float: left;
width: 200px;
height: 50px;
text-align: center;
background-color: #f0e68c;
;
}
#navbar li:hover {
background-color: black;
}
#navbar li a {
display: inline-block;
text-decoration: none;
color: black;
line-height: 50px;
/*Make the line height same as height of li tag*/
}
/*Add style for anchor*/
#navbar li:hover a {
color: #f0e68c;
}
<body>
<div id="statement">
<div id="navbar">
<ul>
<li>Intro
</li>
<li>Bio
</li>
<li>Issues
</li>
</ul>
</div>
</div>
</body>
</html>
Below Code is for html
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
Below code is for css
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
}
Try this i hope it will work for you
Try this ... just changed ur css
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
https://fiddle.jshell.net/ofp184pn/1/
Only updated your code...
For color hover effect add:
#navbar li a:hover{
color: #f0e68c;
background-color: black;
}
And for horizontal align you should add "line-height" and "vertical-align" properties to your "#navbar li" selector:
#navbar li
{
display: table-cell;
float: left;
width: 200px;
height: 50px;
text-align: center;
background-color: #f0e68c;
line-height: 50px;
vertical-align: middle;
}
JsFiddle
Your all 3 problems are solved.
Check it out
#navbar ul{
list-style-type: none;
float:left;
}
#navbar li{ width: 100px;
height: 50px;
text-align: center;
background-color: #f0e68c;
float:left;
}
#navbar li:hover{
background-color: black;
}
#navbar li a{
display: inline-block;
text-decoration: none;
height:100%;
color: black;
}
#navbar li a:before{
height:100%;
vertical-align:middle;
content:'';
display:inline-block;
}
so I have this navbar in my project, and as it stands at the moment, the text changes color as you hover over it.
jsfiddle of this here
HTML:
<div class = "container">
<div class = "header">
<div class = "header-main">
</div>
<div class = "header-nav">
<ul>
<li><a class = "active" href="#">Home</a></li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
CSS:
* {
padding = 0;
margin = 0;
}
.container {
margin: 0 auto;
width: 940px;
}
.header-main{
border-bottom: 1px solid #dadada;
padding: 20px 0;
}
.header-nav {
padding: 0 0;
}
.header-nav ul {
list-style: none;
}
.header-nav ul li {
float: left;
margin-right: 20px;
}
.header-nav ul li a {
color: #737373;
text-decoration: none;
font-size: 18px;
font-family: 'Novecentosanswide-DemiBold';
text-transform: uppercase;
}
.header-nav ul li a.active {
color: #2ecc71;
}
.header-nav ul li a:hover {
color: #3e3e3e;
}
What I'd like to know is how I can add a box that changes color behind (EDIT: and spans the height of the nav) when you hover over it. The best example I can find of this is Windows 10's site
1. Set links to block elements
2. Add padding to the links (not the list items)
.header-nav ul li a {
color: #737373;
text-decoration: none;
font-size: 18px;
font-family: 'Novecentosanswide-DemiBold';
text-transform: uppercase;
display: block;
padding: 4px 8px;
}
3. Set background-color to the links
.header-nav ul li a.active {
background-color: #2ecc71;
}
.header-nav ul li a:hover {
background-color: #3e3e3e;
}
4. Clear ul
.header-nav ul:after {
clear: both;
content: "";
display: table;
}
5. ???
6. PROFIT
https://jsfiddle.net/BramVanroy/82n0rwb7/9/
Maybe it looks prettier without the margin on the list items? Like so.
(I just noticed that there was an error in your fiddle's CSS. You set margin = 0 to *, but the designator should be a colon not an equal sign, like so: margin: 0.)
.header-nav ul li a {
display:block;
padding:10px;
color: #737373;
text-decoration: none;
font-size: 18px;
font-family: 'Novecentosanswide-DemiBold';
text-transform: uppercase;
}
.header-nav ul li a:hover {
color: #fff;
background:#000;
padding:10px;
}
Eidting these two style classes will do the trick i think. Check it out.
You have to take control of the element size. You can do the trick with
// apply hover to li instead a
.header-nav ul li:hover {
color: #3e3e3e;
background-color: red;
}
// remove the margins for the ul
.header-nav ul {
margin-top: 0px;
margin-bottom: 0px;
}
// implement the margins of the ul on li but as padding instead of margin
.header-nav ul li {
padding-top: 10px;
padding-bottom: 10px;
}
see fiddle example
Few things which you missed:
Clearing the float
Removing margin,bottom from ul which cause unexpected dimensions.
Adding a padding to the link anchors.
CSS::
* {
padding=0;
margin=0;
}
.container {
margin: 0 auto;
width: 940px;
}
.header-main {
border-bottom: 1px solid #dadada;
padding: 20px 0;
}
.header-nav {
padding: 0 0;
}
.header-nav ul {
list-style: none;
margin:0;
padding:0;
}
.header-nav ul li {
float: left;
margin-right: 20px;
}
.header-nav ul li a {
color: #737373;
text-decoration: none;
font-size: 18px;
font-family:'Novecentosanswide-DemiBold';
text-transform: uppercase;
padding:5px 10px;
}
.header-nav ul li a.active {
color: #2ecc71;
background-color:#BFBFBF;
}
.header-nav ul li a:hover {
color: #3e3e3e;
background-color:#BFBFBF;
}
.header-nav ul:after {
clear:both;
content:"";
display:block;
}
Demo: https://jsfiddle.net/lotusgodkk/82n0rwb7/5/
I have a navigation menu with 3 sub levels. I need the 3rd level list to align left but I can't get it to behave. I can get levels 2 and 3 to align relatively with the main menu but I want the 2nd level to align relatively and the 3rd level aligning completely to the left. I'd appreciate any help/advice going, here is what I have:
JSFIDDLE HERE
HTML:
<ul class="nav">
<li>LINK1</li>
<li>LINK2
<ul class="#">
<li>LINK2a
<ul class="#">
<li>LINK2b</li>
<li>LINK2c</li>
<li>LINK2d</li>
<li>LINK2e</li>
<li>LINK2f</li>
</ul>
</li>
</ul>
</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
CSS:
a, img { border:none; }
* { margin:0; padding:0; }
.nav{
display:block;
list-style:none;
text-align: left;
position: relative;
height: 30px;
}
.nav li {
display: block;
position: relative;
float: left;
border: 1px solid #FFF;
}
.nav li a {
width: 125px;
height: 30px;
display: table-cell;
vertical-align: middle;
text-decoration: none;
font-size: 12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: center;
color: #000;
z-index: 2000;
background-color: #999;
}
li.active {
background-color: #999 ;
color: #000;
}
.nav li a:hover {
top: 30px;
}
.nav li:hover > a {
color:#fff;
background-color:#333;
}
.nav li ul {
width: 125px;
height: 25px;
position: absolute;
left: -9999px;
border: 1px solid #FFF;
}
.nav li:hover ul {
left: -2px;
}
.nav li li:hover > a {
color:#000;
background-color:#999;
}
.nav li li{
position: relative;
border: 1px solid #FFF;
height: 25px;
}
.nav li li a {
height: 25px;
top: 25px;
text-decoration: none;
font-size: 9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: center;
display: table-cell;
vertical-align: middle;
color: #000;
z-index: 2000;
background-color: #999;
}
li li.active {
background-color: #a9d9d9 ;
color: #007f7b;
}
.nav li li:hover ul {
left: -2px;
top: 25px;
}
ul.nav li > ul {
width: 700px;
height: 25px;
background-color:blue;
}
ul.nav li > ul > li > ul {
background-color:red;
height: 25px;
}
ul.nav li > ul > li { display: none; }
ul.nav li:hover li { display: block; }
Well, you are missing some simple changes CSS to make it work properly. I'll post what changes I made here to make it work:
.nav li ul became .nav li > ul
.nav li:hover ul became .nav > li:hover > ul
.nav li li:hover ul became .nav li > li:hover ul
ul.nav li > ul > li { display: none; } became ul.nav li ul ul { display: none; }
ul.nav li:hover li { display: block; } became ul.nav li:hover > ul { display: block; }
Added:
ul.nav li ul ul {
position: absolute;
top:25px;
left: -129px;
}
ul.nav li li:hover > a {
color: white;
background-color: #333
}