I have a ul menu inside a div .menu. The parent .menu has a top and bottom 1px solid border. When hovering over an li element another border get added but the parent border still appear above it.
I want to not display the .menu top border when hovering over an li I don't want to use js unless it's the only solution.
Here is my code and my temporary fix.
HTML:
<div class="menu">
<ul>
<li>Home</li>
<li>Fun</li>
<li>Work</li>
</ul>
</div>
CSS:
.menu{
width: 100%;
background-color: black;
/* I want this border to... ↓ */
border-top: 1px solid black;
border-bottom: 1px solid black;
box-sizing: border-box;
}
.menu ul{
list-style: none;
overflow: hidden;
margin: 0px;
height:35px;
}
.menu ul li{
display: block;
float:left;
border-left: 1px solid gray;
position: relative;
}
.menu ul a{
color: #FFF;
padding: 10px;
display: block;
}
.menu ul a:hover{
text-decoration: none;
background-color: white;
color: pink;
/* ...not be displayed above this border when hovering */
border-top: 3px solid pink;
}
I only found this inefficient solution:
.menu ul:hover{
position: relative;
top: -1px;
}
Codepen link:http://codepen.io/eldev/pen/YPYLQz?editors=110
Any thoughts ?
Edit:
backgound-color isn't the same as border-color I made it by mistake. Codepen link updated.
there are few solutions at the same time.
like this? (or i don't understand correctly) http://codepen.io/anon/pen/XJVYMW
i have added margin-top: -1px for ul
There had to be some modification don't to the CSS; to make it easier to understand, I have added all my changes to the HTML section. I have NOT modified the CSS section.
Here you go http://codepen.io/anon/pen/rapKxE
And the beautified version http://codepen.io/anon/pen/MYrXQN
< Refer to CodePen >
NOTE Check the code on codepen for the latest updates.
There are four solutions :
margin-top: -1px; ;
Javascript ;
position: relative; top: -1px; ;
transform: translateY(-1px).
Related
On my website, I have used a customisable template for my navigation bar. The thing I want to do is to change the underlining colour of the text and not change the actual colour of the text (and as you know the underlining feature and the text have to be in the same selector. Now you might be thinking, just make a vertical rule and colour it! The thing is, I do not know the amount of space between an underline and a piece of text. Is there any way to colour the text a different colour from the underline? Thanks!
Screenshots:
Code Input: 1
Result: 2
One solution would be to "fake" the underline with a bottom border. It might not work depending on the structure of your HTML, but something like this:
text-decoration: none;
border-bottom: 1px solid #FF0000;
You cannot isolate the underline color and control it separate from text color; it inherits the same color from the text.
However, you can use border, instead.
nav a {
color: white
text-decoration: none;
border-bottom: 1px solid salmon;
background-color: salmon;
}
nav a.active {
color: #333;
border-bottom: 1px solid #333;
}
Use inline-block as display value for each link and apply a bottom border:
ul li a{
display:inline-block;
border-bottom:2px solid #eeeeee;
float:left;
padding: 10px;
background-color:red;
color:#ffffff;
text-decoration:none;
}
change padding, background color and font color as per your style.
This is another solution. Put the mouse over the element!
ul{
margin: 0;
padding: 0;
}
ul li a{
height: 50px;
position: relative;
padding: 0px 15px;
display: table-cell;
vertical-align: middle;
background: salmon;
color: black;
font-weight: bold;
text-decoration: none;
}
ul li a:hover:after{
display: block;
content: '\0020';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 3.5px;
background: #000000;
z-index: 9;
}
<ul>
<li><a href='#'>Menu Item</a></li>
</ul>
I would like add a border-bottom that displays when I hover over it with the mouse. I want it to override the border underneath so it looks like it changes colour. An example of this can be found here http://www.formaplex.com/services (in the nav bar)
Here is a jsfiddle https://jsfiddle.net/ey006ftg/
Also, a small question: does anyone know why there is a small gap in-between the the links (can be seen when hovering from link to link) and how to get rid of it.
Thanks
Just add this to your css:
nav a {
border-bottom: solid transparent 3px;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/ey006ftg/1/
You can use a negative margin to overlay the border below, as shown:
nav {
border-top: 1px solid grey;
border-bottom: 3px solid black;
width: 100%;
font-size:0;
}
nav ul {
width: 1056px;
margin: 0 auto;
text-align: center;
width: 1056px;
}
nav ul li {
display: inline-block;
width: 17%;
}
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
}
nav a:hover {
color: orange;
transition: 0.2s;
border-bottom: solid orange 3px;
margin-bottom: -10px;
}
a {
color: black;
text-decoration: none;
outline: 0;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
As for fighting the inline gap, seeing as you defined a font-size later for the a tag, I would just add a font-size:0, which I added to nav in the above Snippet.
fiddle demo
Simply set your default border to transparent - change color on hover
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: solid transparent 3px; /* add this! */
transition:0.3s; /* or even this :) */
}
Try this fiddle
To set border-bottom the way you want, you have to add border to anchor tag like this:
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid black;
}
and to make sure the space between menu items is gone use a little fix adding negative margin to your li tags inside menu like this:
nav ul li {
display: inline-block;
width: 17%;
margin-right: -4px;
}
I have this http://jsfiddle.net/wfhmtx8c/ so it works in jsfiddle?
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
opacity: 0.8;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff;
border-bottom: black; }
<ul id="nav">
<li>Taal/Languague:</li>
<li>Nederlands</li>
<li>English</li>
</ul>
But when I put it on my website: http://ub3rhd.nl it doesn't work?
The code is really the same?
Your page is working perfectly fine for me. On hover, it changes color, and on click it redirects me to #.
Also, opacity on elements containing text is not exactly appealing. If i were you, i would get the opacity back at 100%. Language is spelled wrong, too. (: Good luck!
They seem to work, but the style isn't as the one in the jsfiddle.
Edit: They look fine now.
Also, as another user said, the transparency on the menu-bar doesn't look good. :)
I am writing custom tabs using HTML and CSS only, and I have come up with this so far:
http://jsfiddle.net/ae4j8/
index.html:
...
<ul>
<li>Products</li>
<li>Loans</li>
<li>Deals</li>
</ul>
...
index.css:
ul { margin-top: 10px;}
ul li {
border-bottom: 28px solid #3f3f3f;
border-left: 28px solid transparent;
border-right: 28px solid transparent;
height: 0;
display: inline-block;
margin: 0 -35px 0 0;
padding: 0;
}
ul li:hover { border-bottom: 28px solid #7f7f7f; }
ul li a {
color: #fff;
display: block;
float: left;
margin: 0;
padding: 5px;
text-decoration: none;
}
I want the first tab to appear infront of the second one and the second one infront of the third one.
Currently its first tab behind second tab behind third tab,which looks like the top-most tab.
Any ideas on how I can get the tabs reversed?
As mentioned, you could put your links in reversed order (so your 'first' link 'Products' gets rendered last and therefore on top of the other ones.) To put them with CSS back in the original order you use float: right.
Fiddle
Try to add for li position:relative and z-index:0. And for :hover - z-index:20:
CSS:
ul li {
...
position:relative;
z-index:0;
}
ul li:hover { border-bottom: 28px solid #7f7f7f;z-index:1; }
http://jsfiddle.net/ae4j8/8/
I think it will be better
Here's my situation:
I want to make a CSS dropdown. Normally I can do this no problem with embedded ULs. However, I want to make a multi-column dropdown. I need the dropdowns to be of dynamic width though.
I have accomplished this with tables, but Id like to see if I could do it with DIVs.
My CSS for the drop down UL/LI is:
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
position: relative;
float:left;
margin-left:16px;
}
#nav li ul {
position: absolute;
display: none;
z-index:10;
}
#nav li:hover ul {
display:block;
}
#nav ul li a.main {
display: block;
height:47px;
text-decoration: none;
color: #fff;
padding: 0 16px 0 16px;
line-height: 48px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
font-weight:bold;
}
#nav ul li a.main:hover {
background:#FFF;
color:#222222;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
That creates the horizontal navigation with drop downs with this HTML:
<ul>
<li><a class="main">HO Scale</a>
<ul>
</ul>
</li>
</ul>
Using a table, I can put it inside the inner UL and use this CSS
.inner{
float:left;
background:#FFF;
border:1px solid #000;
border-top:0;
padding:12px 0 12px 12px;
}
By putting a Table with class of inner in those inner ULs it will work perfectly, space them out, 3 columns, all dynamic width.
I'd like to accomplish that with DIVs, but the problem is when I float (or don't float) the "inner" DIV it puts all of the links on the inside one to a line, I can't seem to make them go side by side. If I put the DIV OUTSIDE thee dropdown, it works just fine.
Any suggestions?
EDIT:
This is how it should look (and does with tables):
This is how it looks with DIVs (wrong)