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. :)
Related
I feel like this question shouldn't exist anymore, but I can't seem to find a solution. So here goes.
ul {
list-style-type: none;
width:150px;
}
ul.nav_sub_menu > li {
width: 100%;
}
ul.nav_sub_menu > li a {
display: inline-block;
width: 100%;
padding: 2.5px 0px 2.5px 5px;
background: #213059;
color: white;
text-decoration: none;
border-bottom: 5px solid #253767;
}
ul.nav_sub_menu > li a:hover {
text-decoration: underline;
background-color: #253767;
}
<div class="nav_sub_menu_wrapper">
<ul class="nav_sub_menu">
<li>
About me</li><li>
Goals</li><li>
Realizations</li><li>
Future plans</li>
</ul>
</div>
This example generates a styles list with display:inline-block anchor tags
You might notice from the start that each list-item is separated by a horizontal white line between them. If not, try zooming the browser in or out (visible at 110% for me).
The white space isn't visible at all zoom levels and it only happens in Chrome, that's why I am at a loss.
How does one begin to troubleshoot this?
FYI, I have found this link to be useful but it didn't help. My chrome version:
Chrome Version 56.0.2924.87 (64-bit)
That is a weird issue. I think it might be something to do with the pixel resolution or density perhaps. However I managed to fix it with the below code.
ul {
list-style-type: none;
width:150px;
}
ul.nav_sub_menu > li {
width: 100%;
}
ul.nav_sub_menu > li a {
display: inline-block;
width: 100%;
padding: 2.5px 0px 2.5px 5px;
background: #213059;
color: white;
text-decoration: none;
border-bottom: 5px solid #253767;
float: left;
}
ul.nav_sub_menu > li a:hover {
text-decoration: underline;
background-color: #253767;
}
All I added was float: left; to the anchor property and it removed the white line between the list items. Try it and see what it does for different zoom levels. Although it does work for 110% zoom for me.
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 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).
Im trying to make a drop down menu, i cant edit my html and i must style it completely in css.
Im working with css3
i have it already styled i just need it to actually drop down.
the share 'li' will be the only thing seen on top of the page, when you hover over this the rest of the list items will drop down. Therefore the share li will now be at the bottom of the drop down. So the order from the top it will be in once you hover over the share li is - Twitter, facebook, google, linkedin and share.
heres my html for the dropdown:
<ul id = "dropdown">
<li>Twitter</li>
<li>Facebook</li>
<li>Google+</li>
<li>Linkedin</li>
<li>Share</li>
</ul>
so far this is what i have in my css
#dropdown ul {
float: left;
}
#dropdown li {
background: white;
padding: 10px;
width: 120px;
list-style-type: none;
font-family: arial;
font-size: 20px;
text-align: center;
}
#dropdown :nth-child(1) {
background-color: gray;
color: white;
border: 6px solid white;
}
#dropdown :nth-child(2) {
border: 6px solid white;
}
#dropdown :nth-child(3) {
background-color: gray;
color: white;
border: 6px solid white;
}
#dropdown :nth-child(4) {
border: 6px solid white;
}
#dropdown :nth-child(5) {border: 6px solid white;
border-top: 1px solid black;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
font-weight: bold;}
if anyone could help me out on how to style this to drop down the way i need it too it would be great,
thanks
When you hover over an LI element, you are also hovering over it's container, in this case the ul#dropdown element, so adding the following to the end of your styles should work fine:
#dropdown li {
display: none;
}
#dropdown li:last-child {
display: block;
}
#dropdown:hover li {
display: block;
}
You need to add some code. I've added some code for you. DEMO here
I have this select that is behaving strange on IE9.
First of all links that should open wiki page not working only on IE9 browser and second problem is on hover, why when cursor pass over help and log off the icon is overridden by hover background color?
<ul id="main">
<li class="username" tabindex="1" > <a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">LogOff</li>
</ul>
</li>
</ul>
CSS:
ul#main {
color: gray;
width: 120px;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
border-top: 1px solid #f2f2f2;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:green;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
Fiddle: http://jsfiddle.net/RwtHn/1455/
I can at least help you with the Icon issue. The issue is that you are overidding the background with a color. You can have a color or a background image. Not both. You will need to either have a different image in the background that is essentially the same but with different colors, do without the image when you hover or do without the color when you hover.
I'm sorry I can't be more helpful with the IE problem. I sincerely hate IE for things like this.
EDIT: This is something that you can do as mentioned in the comment below
.logoff:hover{
background: #f4f4f4 url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png");
height: 25px;
}
Thanks ANeves for this information. I learnt something here too.
OK, for the overridden icon issue credits goes for "ANeves",
but you may use below CSS for preventing extra code lines:
#main > li > ul > li:hover
{
background-color: #f4f4f4;
}
for the IE9 clicking issue, just add below CSS:
#main ul:hover
{
display: block;
}
and that's it
thanks to http://www.cssplay.co.uk/menus/cssplay-click-click.html
On hover you are overriding the background property. Since this property has both the colour and the image, you are overriding the image as well.
Set only the colour, then:
.help:hover{
background-color: #f4f4f4;
}
.logoff:hover{
background-color: #f4f4f4 ;
}
http://jsfiddle.net/RwtHn/1456/