I want to make an ul li menu and I want to place each li element over previous one.
I don't know if I can explain with words what I mean, so I've made an image showing desired effect:
How can I do this using plain CSS? Is it possible, or I must use javascript?
This is what I've tried so far:
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
}
li a {
display: block;
position: absolute;
top: -30px;
z-index: 1;
width: 225px;
height: 115px;
}
but each li appears on the same place over previous one.
You can use a negative margin-top to "lift" the li elements.
http://jsfiddle.net/tomprogramming/mbe9W/
relevant CSS
li { padding:10px; border:1px solid #000; margin-top:-10px; }
li:first-of-type {
margin-top:0;
}
I think this is close:
<ul>
<li><a class="a" href="#">A</a></li>
<li><a class="b" href="#">B</a></li>
<li><a class="c" href="#">C</a></li>
</ul>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
padding-top:30px;
}
li {
position: relative;
height:50px;
}
li a {
display: block;
position: absolute;
height:20px;
top: -30px;
left:0;
width:225px;
height:115px;
}
.a {
border:1px solid #ff0000
}
.b {
border:1px solid #00ff00
}
.c {
border:1px solid #ffff00
}
Related
What I am trying to do is to get the hover effect that puts the anchor link a bit down, but somehow it affects all the links. Can somebody point out what I did wrong here?
nav {
width: 100%;
height: 5rem;
background: red;
}
ul {
margin: 0 auto;
font-size: 0;
}
ul li {
display: inline-block;
line-height: 4.8rem;
position: relative;
}
ul li > a {
text-decoration: none;
color: #FFF;
font-family: "Verdana";
padding: .1rem 1.5rem;
font-size: 1.3rem;
display: block;
overflow: hidden;
position: relative;
transition: 300ms all;
height: 100%;
margin: 0;
}
ul li > a::before, ul li > a::after {
content: '';
width: 100%;
position: absolute;
left: 0;
transition: 200ms all;
}
ul li > a::before {
background: #FFF;
height: .5rem;
top: 0;
transform: translateY(-100%);
}
ul li > a::after {
background: #000;
height: .4rem;
bottom: 0;
transform: translateY(100%);
}
ul li::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #CCC;
position: absolute;
opacity: 0;
}
ul li:hover > a {
padding-top: 0.6rem;
padding-bottom: 0.1rem;
}
ul li:hover > a::before, ul li:hover > a::after {
transform: translateY(0);
}
ul li:hover::before {
opacity: 0.3;
}
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</nav>
Why li:hover > a is affecting all list items?
The problem is not your :hover selector, it's the display-block on the lis. inline-blockelements align on the baseline, this means that when you add a padding-topto one of them, all the others move down as well. To fix it float the elements to the left to keep them on one line and aligned to the top:
Demo: https://jsfiddle.net/403zexop/
nav {
width:100%;
height:5rem;
background:red;
}
ul {
margin:0 auto;
font-size:0;
overflow: hidden;
li {
display:block;
line-height:4.8rem;
position:relative;
float: left;
>a{
text-decoration:none;
color:#FFF;
font-family:"Verdana";
padding:.1rem 1.5rem;
font-size:1.3rem;
display:block;
overflow:hidden;
position:relative;
transition:300ms all;
height:100%;
margin:0;
&::before,&::after{
content:'';
width:100%;
position:absolute;
left:0;
transition:200ms all;
}
&::before{
background:#FFF;
height:.5rem;
top:0;
transform:translateY(-100%);
}
&::after{
background:#000;
height:.4rem;
bottom:0;
transform:translateY(100%);
}
}
&::before{
content:'';
width:100%;
height:100%;
top:0;
left:0;
background:#CCC;
position:absolute;
opacity:0;
}
&:hover{
>a{
padding-top:0.6rem;
padding-bottom:0.1rem;
&::before,&::after{
transform:translateY(0);
}
}
&::before{
opacity:0.3;
}
}
}
}
Note: I cleared the floats by adding overflow: hidden; to the ul
"li:hover > a" is correct!
The problem is, that with changing the padding you alter the height of the element, and the parent container has to adapt and as well all other childs.
You can see it when you do not change the padding, but just the background-color of the hovered a. You will see, it is just altering the current element.
I am using bootstrap 3 navbar. But on one of my drop downs I have add a <span class="label label-success"></span>
I cannot seem to get my span inline with the links that it is connected to. Not sure what to do.
Demo here: Click on the notices link for drop down menu. http://codepen.io/riwakawebsitedesigns/pen/asqoy
.dropdown-menu {
min-width: 280px;
}
ul.nav .navbar {
margin: 0;
padding: 0;
}
.dropdown-menu li {
margin: 0;
padding: 0;
vertical-align: top;
}
.dropdown-menu li a {
margin: 0;
overflow: auto;
}
.dropdown-menu li a:hover {
background: #222222;
color: #FFFFFF;
}
.dropdown-menu li a span {
float: right;
display: block;
}
demo - http://codepen.io/anon/pen/hKJHp
.dropdown-menu li a span {
float: right;
line-height: inherit; /** set the line-height to inherit */
}
After getting some advice else where. It now works by using this css
ul.dropdown-menu > li > a {
display: block;
overflow: auto;
position: relative;
}
ul.dropdown-menu span.label {
position: absolute;
top:50%;
right:0;
transform:translate(-50%,-50%);
}
I'm using Font-Awesome for my web icons and I'm trying to add tooltips to them. I can't get my positioning correct such that on hover, it doesn't move the icon when it's displayed. The tag is how [Twitter] instructs implementing the icons.
Here's my code:
<ul>
<li>
<div class="tooltip">like me.</div>
<i class="icon-facebook-sign"></i>
</li>
[...]
#footer li {
display:inline;
margin:0px 5%;
}
#footer i {
position:relative;
font-size:74px;
}
#footer i:hover {
color:#3b8edb;
cursor:pointer;
}
.tooltip {
display:none;
position: relative;
background: #ffffff;
font-size:12px;
color:#2c6ca8;
border-radius:5px;
padding:10px;
}
.tooltip:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.tooltip:after {
border-top-color: #ffffff;
border-width: 12px;
left: 50%;
margin-left: -12px;
}
$(function() {
$("#footer li i").mouseenter(function() {
$(this.parent()).find(".tooltip").toggle();
}).mouseleave(function() {
$(this.parent()).find(".tooltip").toggle();
});
});
.tooltip {
position: absolute; /* <- not relative */
top: 10px; /* <- position relative to #footer li */
left: 10px;
}
And you can drop the js and use CSS to show it on mouseover:
#footer li:hover .tooltip{
display:block;
}
I've a problem with inserting an image after every element in my list. I used ":after" and it shows me the image but instead of after every element, the images are with a new linebreak under every element:
Should be (|=image):
Site1 | Site2 | Site...
Reality:
Site1 Site2 Site3
| | |
Following my css code, maybe someone can help:
/* Navigation */
#nav {
position:relative;
height:70px;
background:#191919;
position:relative;
}
/* The main menu */
.menu{
list-style: none;
position: relative;
float: left;
display: block;
left: 50%;
padding-top:20px;
}
/* First level of navigation */
.menu li{
position: relative;
float: left;
display: inline;
right: 50%;
padding-right:15px;
}
.menu li a{
display:inline;
width:auto;
word-wrap: break-word;
text-shadow: none;
color:#FFF;
text-decoration:none;
font-size:14px;
font-weight:normal;
}
.menu li:after {
display: block;
content: "";
width: 5px;
height: 50px;
background: transparent url('../images/nav_bar_line.png') no-repeat;
}
You can use absolute position for this. Write like this:
.menu li:after {
display: block;
content: "";
position:absolute;
top:0;
right:-5px;
width: 5px;
height: 50px;
background: transparent url('../images/nav_bar_line.png') no-repeat;
}
I have a problem with hover on this site I'm doing. The menu is ok in all pages, except the home. What is kinda awkward, 'cause I'm just using php include to change the content, and the header, menu and footer are always the same.
In Firefox and Chrome it's ok, but the problem is that when I mouseover the menu on IE9 it has a displacement, like the image:
example
http://i74.photobucket.com/albums/i265/_k_ps_/exemplo.gif
I think it's something with the display: block, but I don't know how to fix it and make the menu work properly :(
Here is the HTML:
<div id="menu" class="group">
<ul>
<li id="menu-01"><span>Home</span></li>
<li id="menu-02"><span>A Empresa</span></li>
<li id="menu-03"><a href="galeria_representacao.php?image=0">
<img src="images/representacao.jpg" class="menu-head" onMouseOver="this.src='images/representacao-hover.jpg'" onMouseOut="this.src='images/representacao.jpg'"></a>
<ul class="menu-body">
<li>Teste1</li>
<li>Teste2</li>
<li>Teste3</li>
<li>Teste4</li>
<li>Teste5</li>
</ul>
</li>
<li id="menu-04"> <span>Serviços</span></li>
<li id="menu-05"><span>Projetos</span></li>
<li id="menu-06"><span>Novidades</span></li>
<li id="menu-07"><span>Contato</span></li>
<li id="menu-08"><span>E-mail</span></li>
<li id="menu-09"><span>Login</span></li>
</ul>
</div>
And the CSS:
#menu {
width: 834px;
height: 44px;
background-image: url(../images/menu-up.jpg);
display: block;
}
#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}
#menu ul span {
display: none;
}
#menu ul li {
list-style: none;
display: block;
float: left;
position: relative;
}
#menu li ul {
position: absolute;
display: none;
z-index: 12;
}
#menu li ul li {
clear: both;
position: relative;
margin: 0;
padding: 0;
background-color: #0676c4;
width: 157px;
height: 40px;
font-family: Helvetica, Verdana, sans-serif;
font-size: 14px;
}
#menu li ul li a {
clear: both;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding: 10px;
margin: 0;
display: block;
}
#menu li ul li a:hover {
background-color: #87c5f1;
height: 20px;
margin: 0;
}
#menu ul li, #menu ul a {
margin: 0;
padding: 0;
text-decoration: none;
height: 44px;
display: block;
}
#menu-01 {
left: 0px;
width: 75px;
}
#menu-01 a:hover {
background-image: url(../images/menu-down.png);
}
#menu-02 {
left: 0px;
width: 112px;
}
#menu-02 a:hover {
background: url(../images/menu-down.png) -75px;
}
#menu-03 {
background-image: url(../images/representacao.jpg);
left: 0px;
width: 157px;
z-index: 11;
border: 0;
}
#menu-04 {
left: 0px;
width: 103px;
}
#menu-04 a:hover {
background: url(../images/menu-down.png) -344px;
}
#menu-05 {
left: 0px;
width: 108px;
}
#menu-05 a:hover {
background: url(../images/menu-down.png) -447px;
}
#menu-06 {
left: 0px;
width: 113px;
}
#menu-06 a:hover {
background: url(../images/menu-down.png) -555px;
}
#menu-07 {
left: 0px;
width: 101px;
}
#menu-07 a:hover {
background: url(../images/menu-down.png) -668px;
}
.menu-head {
border-width: 0;
}
Can somebody help me?
I put your code (and modified it a bit) in a jsfiddle.
The problem, from what I see, seems to be with the 3rd element, which has a child ul.
From what I see from there, you have a problem with your CSS :
This CSS style
#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}
Affect this HTML element :
<ul class="menu-body">
Which you probably don't want to. (fixed here)
But I'm not sure it's your error, the code you supplied needs the images, and I do not have them...
Also, all your left:0px are useless.
If you want a better answer, you'll have to enhance your question (and/or the jsfiddle!). :-)