<nav>
<ul>
<li class="span4">
<a href="/">
<span class="inner">Nav 1</span>
</a>
</li>
I have pipes at the side of each of my nav elements, but they do not extend to the entire height of the nav (only the text).
On rollover the pipe is still visible on the side. it's hard to explain but I have a fiddle:
Fiddle
My question is, what's the best approach, so that when on rollover you hide the pipes from the user?
You could add this to your css, if that is what you need, it hides all pipes when you hover one element:
ul:hover .inner {
border-right: 2px solid transparent;
}
See the fiddle: http://jsfiddle.net/v27DS/30/
Also, if you want to hide the pipes of only the hovered element, try:
.inner:hover {
border-right: 2px solid transparent;
}
See the fiddle: http://jsfiddle.net/v27DS/31/
Try using the sibling combinator to access the previous or next element and make its border transparent.
Read this: http://css-tricks.com/child-and-sibling-selectors/
You can do like this:
nav > ul > li:hover ~ li > a > span {
border-left: none;
border-right: 2px solid black;
}
.inner {
border-left: 2px solid black;
}
nav > ul > li:first-of-type > a > span {
border-left: none;
}
nav > ul > li:last-of-type > a > span{
border-right: 2px solid black;
}
Fiddle
Related
I have this style for the opencart category menu:
#menu .dropdown-inner a {
border-bottom: 1px solid #1f90bb;
}
And I am trying to remove the bottom border:
#menu.dropdown-inner a li:last-child {
border-bottom: none;
}
But it's not working. Please help!
JS Fiddle Example
Change your second style so that the a is inside the li:
.... li:last-child a {
border-bottom: none !important;
}
This is regarding a list and the double border effect of side by side selected and hovered elements, as pictured here.
Back in the day we called it border collapse because we were using table elements.
Here is the CSS which adds the border (which comes before the next lines in the stylesheet):
li.selected, li:hover {
border: green 1px solid;
border-radius: 1px;
}
I got it working when the hover follows the selected list item:
li.selected + li:hover {
border-top: 1px solid transparent;
}
but this rule for some reason does not apply when the selected item follows the hover:
li:hover + li.selected {
border-top: 1px solid transparent;
}
The idea of these rules are simply that if they appear next to each other, make the top border of the second item transparent.
I checked and it is not being overwritten anywhere, and the two lis are definitely adjacent siblings. This does not work on firefox or chrome.
Does anyone know of any conflicts with using all of these selectors together?
Please let me know if I can add anything else to the post to get a good answer.
You need to set transparent border as default for li.
li.selected, li:hover {
border: green 1px solid;
border-radius: 1px;
}
li {
border: transparent 1px solid;
}
li.selected + li:hover, li:hover + li.selected {
border-top: 1px solid transparent
}
<ul>
<li>dfsafasf</li>
<li class="selected">dfsafasf</li>
<li>dfsafasf</li>
<li>dfsafasf</li>
<li>dfsafasf</li>
<li>dfsafasf</li>
<li>dfsafasf</li>
</ul>
In my code I got border-right on all of my li elements. I'm trying to get rid of the border-right when a li element is active using an own made class named active. The problem is that my class does not remove the border-right.
This is a JSFiddle of the code as well: http://jsfiddle.net/t0a4j5tq/2/
div#navbar {
width: 250px;
height: 550px;
float: left;
}
div#navbar > ul {
text-align: center;
background-color: #EEE;
}
div#navbar > ul > li.li, div#navbar > ul > li.liLast {
list-style-type: none;
border-bottom: 1px solid black;
border-right: 1px solid black;
font-size: 25px;
font-family: Algerian, "Times New Roman";
}
div#navbar > ul > li > a {
color: black;
text-decoration: none;
display: block;
width: 100%;
padding: 38px 0;
-webkit-transition: margin-left 0.5s;
}
div#navbar > ul > li > a:hover {
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0 5px black;
margin-left: 5px;
}
li.active {
box-shadow: inset 3px 3px 10px #333;
border-right: none;
}
<div id="navbar">
<ul>
<li class="li active">Start</li>
<li class="li">Om mig</li>
<li class="li">Vision</li>
<li class="li">Tjänster</li>
<li class="liLast">Kontakt</li>
</ul>
</div>
The root of your problem is CSS Specificity. This is important to understand, because simply using !important in your code is a hack and can cause you to have problems later on if you forget that you put it there.
!important overrides everything, and so obviously should not be used except in dire, last-resort situations (and even then, many people [myself included] would argue that you should figure out how to fix the problem anyway instead of using !important).
Earlier in your code, you have a CSS selector for the same element (and similar elements):
div#navbar > ul > li.li {
Now, you are trying to access the same element with just this:
li.active {
But the first selector is way more specific. Instead, you should use the following CSS selector, without the !important hack:
div#navbar > ul > li.active {
Hi solution is simple you just need to inform that this change is "important" :P
li.active {
box-shadow: inset 3px 3px 10px #333;
border-right-style: none !important;}
Hope this helps :)
I have a drop down menu done in css only, done in the following way:
.top-menu
{
padding:0;
margin:0;
list-style: none;
height:50px;
}
.top-menu > li > a
{
display:block;
text-decoration:none;
font-size:16px;
line-height:16px;
padding:15px 20px;
border: 1px solid transparent;
color:#fff;
}
.top-menu > li > a:hover
{
background-color: #fff;
color: #333;
border: 1px solid #004488;
}
.top-menu > li.popout:hover ul
{
display:block;
}
The class "top-menu" is for the top level ul element.
What I want to do is apply the ".top-menu > li > a:hover" style for when I hover over the popout ul, so that the top level link has the hover style also when I hover above its descendants in the ul below.
Thanks.
Here is the html:
<ul class="top-menu">
<li>Home</li>
<li>
Welcome
</li>
<li class="popout">
link2
<ul>
<li>sublink1</li>
<li>sublink2</li>
</ul>
</li>
I want to apply the hover style for link2, when I hover over the descendant ul (which contains sublink2 and sublink1)
I know this was asked a while back, but for others having your problem I believe you can achieve the desired results by changing this:
.top-menu > li > a:hover
{
background-color: #fff;
color: #333;
border: 1px solid #004488;
}
The '>' means the direct child. If you leave the '>' out you can get all child elements matching the selector. Below achieved the results I believe you desire:
ul li:hover > a
{
background-color: #fff;
color: #333;
border: 1px solid #004488;
}
That way when you hover over the child the parent will still display the hover styles.
I believe you need to use JavaScript for that particular behavior. There is no way for you to apply styles to the parent and child at the same time.
Edit: Thinking about this again, you could do something like that:
.topmenu:hover > li.popout {...} /* Parent styles */
.topmenu:hover li.popout ul {...} /* Child styles */
I am trying to put a border around a link on hover, and the style applies to it, but it jumps (the element jumps) when i hover over it... what can I do?
code:
.navigation li:hover {
border: 1px solid #ccc;
}
You 'jump' is caused by the 1px height of the border, that make your li move
You might use
.navigation li:hover {
border-color: #ccc;
}
.navigation li {
border: 1px solid #<parentBackgroundColor/transparent>;
}
instead. This way, the border is here from the beginning, so no jump on hovering, and it's invisible, since it's the same color of the parent container or transparent.
.navigation li {
border: 1px solid transparent;
}
You can add a transparent border when you're not hovering, then it won't jump.
Or, you can remove a total of 2px vertical padding around the element, for example:
.navigation li {
padding: 10px
}
.navigation li:hover {
padding: 9px;
border: 1px solid #ccc;
}