I have this sample:
link
CODE HTML:
<ul>
<li>MENIU 1</li>
<li>MENIU 2</li>
<li>MENIU 3</li>
<li>MENIU 4</li>
</ul>
CODE CSS:
ul {list-style-type:none;}
ul li:hover{
border-left:5px solid red;
}
My problem is simple ... when you put the arrow on the menu, the menu item moves a few pixels in right.
How can I prevent it from moving?
EDIT:
Perhaps I did not explain well ... I do not want another rim ... just when you put an item in the list arrow appears red headboard and my text goes in the right
You are adding some space that is not there before, that`s causing the selected item to move right. All you need to do is to add a transparent border, when item is not on hover.
ul {list-style-type:none;}
ul li{border-left:5px solid transparent;}
ul li:hover{border-left:5px solid red;}
Try setting default trasparent border:
ul li {border: 5px solid transparent;}
The menu lis are moving because you are adding a 5px border where there was none before. This increases the size of your overall box and shifts it to the right to make room for the border.
You can cure this by having a 5px border all the time, but make it transparent until hovered, so the 5px is always there and the box won't shift.
Just add a CSS rule for the li when not hovered:
ul li {
border-right: 5px solid transparent;
}
add a transparent border.
ul {list-style-type:none;}
ul li{border-left:5px solid transparent;}
ul li:hover{
border-left:5px solid red;
}
working demo https://jsfiddle.net/geekrose/ebepwj1m/2/
Add a default transparent border to the li's:
ul li{ border-left:5px solid transparent }
Hi now you can used to padding as like this
ul {list-style-type:none;}
ul li{padding-left:5px;}
ul li:hover{
border-left:5px solid red;
padding-left:0;
}
Demo Example
ul {list-style-type:none;}
ul li{padding-left:5px;}
ul li:hover{
border-left:5px solid red;
padding-left:0;
}
<ul>
<li>MENIU 1</li>
<li>MENIU 2</li>
<li>MENIU 3</li>
<li>MENIU 4</li>
</ul>
Add transparent border to the ul li class.
ul li{
border-left: 5px solid transparent;
}
following will be your final css
ul {list-style-type:none; }
ul li{
border-left: 5px solid transparent;
}
ul li:hover{
border-left:5px solid red;
}
Related
I have this layout that needs to be a bunch of boxes stacked on top of each other, they all have a 1px border.
In order to have the border always be 1px I put a margin-bottom of -1px to all of the boxes, but when I change the border color on hover it doesn't quite work as intended. Here's an example:
How can I make it so it doesn't overlap on hover?
My code:
.main-content ul li a {
margin-bottom:-1px;
padding:15px 23px;
display:block;
border:1px solid #545353;
color:#545353;
}
.main-content ul li a:hover {
border-color:#fff;
color:#fff;
}
I tried giving them all a z-index and then making that higher on hover, but it didn't work either...
Any ideas?
Thanks!
EDIT Adding HTML
<div class="row main-content">
<div class="container">
<div class="col-md-8 col-md-offset-2">
<ul>
<li>Bienvenida</li>
<li>¿Por qué es la decisión correcta?</li>
<li>¿Cómo funciona este servicio?</li>
<li>¿Cuánto cuesta este servicio?</li>
<li>Estoy interesado, ¿qué hago?</li>
<li>Registro</li>
</ul>
</div>
</div>
</div>
You can use the property:
box-sizing: border-box;
so that elements are exactly the width and height you want them to be. The border will be 1px within the element instead of stretching out to other ones.
ewfaeg
To keep the border at 1px, use this css:
.main-content ul li a {
position: relative;
z-index: 30;
margin-bottom:-1px;
padding:15px 23px;
display:block;
border:1px solid #545353;
color:#545353;
}
.main-content ul li a:hover {
border-color:#fff;
color:#fff;
z-index: 99;
}
The changes I made was setting a z-index for both unhovered links and hovered links. The position:relative is added because z-index does not reflect unless there is a position specified.
Try this https://jsfiddle.net/L565nwaL/1/
<div class="main-content">
<ul>
<li>item one</li>
<li>item two</li>
<li>item three large</li>
<li>item four</li>
</ul>
</div>
CSS
.main-content ul li a {
padding:15px 23px;
display:block;
border:1px solid #545353;
border-bottom: transparent;
color:#545353;
}
.main-content ul li a:hover {
border:1px solid #fff;
color:#fff;
}
.main-content {
background: #161616;
box-sizing: border-box;
}
Based on w3c the correct way in HTML for a nested list is.
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
However I want a border at the bottom of each item in the list, the following code underlines them all but Tea.
li {
border-bottom: 1px solid purple;
}
Any suggestions?
if you mean border bottom on everything you will need to do something like this:
li {
border-bottom: 1px solid purple;
}
li > ul {
border-top: 1px solid purple;
}
li > ul > li:last-child {
border: none;
}
Example
Alternative
Same length lines (but you'll have to find a way to indent the second level bullets)
Otherwise just use text-dexoration
Maybe you can use
text-decoration: underline
This applies to the text in the element.
Your problem is that the li containing tea actually does have a border, but it's a bottom border, so it is below the nested li.
Instead of using text-decoration you can also wrap the text in another element (span or div) inside the li elements, and apply the border to that. Such a solution using div is especially useful if you want the border to be the full width of the element instead of the text alone.
The "Tea" li DOES have a border it's just 'masked' by the border of the last submenu li
See JSfiddle
li {
border-bottom:3px solid red;
}
li ul li {
border-bottom:3px solid green;
}
As everyone above mentioned that the border actually exists for text "Tea" which is at very bottom because li element has display: list-item assigned by default. You can make it visible by using display: inline but keep in mind that you will lose the features of li element such as list-style-type because they are only applicable for display: list-item.
li {
border-bottom: 1px solid purple;
display: inline;
}
li:after {
content:"";
display: block;
}
Working Fiddle
This problem is caused by the fact that the "Tea" li tag contains not just 'Tea', but every other ul and li tag pair except for the one containing "Milk". The "Tea" li is getting underlined, which is actually appearing under the 'Green Tea' underline (if you look closely, you should notice a double underline there, especially if you add padding to you li tags.) Your best bet in this situation (if you are building the list programmatically) is to wrap the li items in another tag:
<ul>
<li><span>Coffee</div></li>
<li><span>Tea</span>
<ul>
<li><span>Black tea</span></li>
<li><span>Green tea</span></li>
</ul>
</li>
<li><span>Milk<span></li>
</ul>
then change your code to:
li span{
border-bottom: 1px solid purple;
}
This will ensure that the text gets underlined, and not the li tag containing the text.
Edit:=====================
This is the same thing that Mr Green is recommending in his comment
Give it a class add add display: inline-block so:
<ul>
<li>
<ul>
<li class="underline">
Some stuff here
</li>
</ul>
</li>
</ul>
and in your css:
.underline {
display: inline-block;
border-bottom: 1px #CCCCCC solid;
}
There are different ways to solve it, I went with this.
li {
border-bottom: 1px solid purple;
}
li > ul > li:first-child {
border-top: 1px solid purple;
}
li > ul > li:last-child {
border: none;
}
I'm getting some ugly behavior from a menu that contains nested lists.
The parent menu has some broad categories. When the user hovers over one of these list items, a child menu appears below. This is fine.
However, the child items can also have sub menus (I'll refer to these as grandchildren). These also appear on hover, but the entire child menu disappears when the user no longer hovers on the grandchild.
This is best explained with a FIDDLE
Hovering on Parent displays the 3 children. This is good.
Hovering on Child 1 displays the grandchildren. This is also
good.
But now trying to click Child 2 or Child 3 once the grandchildren under child 1 are expanded becomes clumsy. This is
very bad.
How can a decent hover effect be achieved here without this goofy behavior? (A CSS solution would be preferable.)
HTML
<div id="centeredmenu">
<ul>
<li>
<p><span>Parent</span></p>
<ul>
<li>
Child 1
<ul>
<li>grandchild 1</li>
<li>grandchild 2</li>
<li>grandchild 3</li>
</ul>
</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
</ul>
CSS
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 0px;
padding:3px 10px;
background: rgb(240,240,240);
color:#333333;
text-decoration:none;
line-height:2.3em;
border-top: 4px solid transparent;
border-right: 1px solid transparent;
border-bottom: 3px solid transparent;
border-left: 1px solid #848484;
}
/*hides the sub menu*/
#centeredmenu ul li ul li{
display: none;
}
/*displays sub menu on hover*/
#centeredmenu ul li:hover ul li {
display: block;
clear: both;
margin-left: 15px;
}
/*hides sub-sub menu*/
#centeredmenu ul li ul li ul{
display: none;
}
/*displays sub-sub menu on hover*/
#centeredmenu ul li ul li:hover ul {
display: block;
clear: both;
margin-left: 15px;
}
The markup structure of nested lists looks fine.
Using absolute positions on the nested ULs and the z-index tweaks you mentioned should do it.
This CSS only demo looks relevant:
http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html
The problem is that when you mouse out of child1 onto child2, child1 collapses and moves child2 out from under the mouse cursor. You need to absolutely position the grandchildren so they aren't contained within the children.
what I am trying to accomplish is this image:
now what I've done so far is:
<ul class="flechalista">
<li>2012
<ul class="flechalista">
<li>Enero</li>
<li>Febrero</li>
<li>Marzo</li>
<li>Abril</li>
</ul>
</li>
</ul>
and my css is this:
.flechalista{background:#fff;}
.flechalista li{background:#fff url(../img/red_arrow.png) no-repeat 10px 4px; padding:5px 0 5px 30px !important; border-bottom:1px solid #000;}
Now this works except that as you can see the border-bottom is for every li and full width.
I think I could make a first LI with less padding(2012) and the months LI's would have a bit more padding. But is there a way using what i have an playing with the css make it work?
.flechalista{background:#fff;}
.flechalista li ul li{padding:5px 0 5px 50px !important; border-bottom:1px solid #000;}
.flechalista li a{padding:5px 0 5px 10px !important; display:block; width:100%; border-bottom:1px solid #000;}
Demo: http://jsfiddle.net/calder12/FSa2S/5/
I have a simple ul list. the li's contain simple a href's.
I have a background and all that on the li and I want to change the li's border when the a href is mouseover...
Is that possible?
<ul>
<li>Button 1</li>
</ul>
anyway, I need the li border to change on mouseover... this seems simple, but I can't figure it out.
I would make the li the same size as the a tag.
then in your css file:
ul li {
border: 1px solid #000000;/*Black 1px border*/
}
ul li:hover {
border: 2px dotted #ff0000; /*Red 2 pix dotted line border*/
}