With help I've got this list to be laid out and coloured they way I want.
https://jsfiddle.net/2t3cqr5m/
However I'm adding A HREF's to the lists and now the list values are changing style and colour, reading that from my main css script.
<li class='menu'></span> Learn HTML </li>
<li class='menu'><a href='#'><span class="icon-indent"></span> Create my own web site:
<ol>
<li class='menu'></span> Development Articles </li>
<li class='menu'></span> News and Stuff </li>
<li class='menu'></span> Funny Cat Pictures </li>
</ol>
</a></li>
How do I ensure they don't change and use the style shown in the example ?
Thanks
Just add the following CSS:-
.menu a:hover {
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
color: #000000;
}
.menu a:hover {
color: #2693ff;
}
https://jsfiddle.net/mac3Lgv6/
Related
What I'm trying...
I'm trying to make a menu with a hover effect. If you hover a link, it's background-color should change. If you go to the next one, it should change smoothly to the next link.
Problem
When you hover over one link and then go to the next one, there is a small gap between the elements. If your mouse is at that exact spot, nothing happens.
Working Example
.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 21px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}
<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href='#'>Menü #1</a></li>
<li class="menu-item"><a href='#'>Menü #2</a></li>
<li class="menu-item"><a href='#'>Menü #3</a></li>
</ul>
</div>
Not Working Example
.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 20px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}
<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href='#'>Menü #1</a></li>
<li class="menu-item"><a href='#'>Menü #2</a></li>
<li class="menu-item"><a href='#'>Menü #3</a></li>
</ul>
</div>
My observation
If you change the font-size just by one pixel, it works. If I use IE it works in both examples, but in Chrome only the Working One works :D
What I'm asking for...
Is this a Chrome bug or is there a possibility to make the 'not working one' work.
It's actually an interesting question. The "issue" is caused by the browser CSS that is reading the display:inline; of the a tag, and not having it fill the entire display:block; of the li tag.
You can fix this by using the following CSS rule
.menu-item a {
display:block;
}
Add display: block to the links. The link is smaller than the li
Remove the font-size and line-height from the menu-item, style the link directly. This behaviour most likely comes from rounding errors.
I have a bit of a problem, for the header of my website i used a styled div, called a so my http://puu.sh/d9Ax5/2817017ea2.png
but when i try to post a link i can't see it since it is already styled for the header.
Here is my code:
HTML HEADER LIST
a {
text-decoration: none;
color: #fff;
transition: all 0.2s ease-in;
}
CSS
<div class="nav">
<ul>
<li>Home</li>
<li>News</li>
<li>Content Packs</li>
<li>About</li>
<li>Help</li>
</ul>
</div>
Instead of giving style directly to a, use .nav a.
.nav a {
text-decoration: none;
color: #fff;
transition: all 0.2s ease-in;
}
This will help you to give the styles only to the 'a' inside the nav class and not any other 'a' in your code.
I am trying to alter an existing menu to a hovering dropdown. This seems simple enough, however this is a complex menu that is very nested and has lots of responsive rules and elements.
I'm just wanting to make a simple css dropdown out of it. Something like this
That being said. I am having trouble finding the styling paths. ul li ul etc. I have the code and have been using inspector, but am unable to find the proper styling paths.
Here is the menu I am trying to alter.
<ul class="section-nav__items grid">
<li class="section-nav__item section-nav__item--first section-nav__item--home grid__item one-half current-section">Home
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li class="section-nav__item section-nav__item--cards grid__item one-half">Cards</li>
<li class="section-nav__item section-nav__item--mortgages grid__item one-half">Mortgages</li>
<li class="section-nav__item section-nav__item--loans grid__item one-half">Loans</li>
<li class="section-nav__item section-nav__item--insurance grid__item one-half">Insurance</li>
<li class="section-nav__item section-nav__item--banking grid__item one-half">Banking</li>
<li class="section-nav__item section-nav__item--phones grid__item one-half">Phones</li>
<li class="section-nav__item section-nav__item--travel grid__item one-half">Travel</li>
<li class="section-nav__item section-nav__item--last section-nav__item--coupons grid__item one-half">Coupons</li>
</ul>
for example, I've added the sub items to the first menu item that I want to create a dropdown out of:
<li class="section-nav__item section-nav__item--first section-nav__item--home grid__item one-half current-section">Home
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
It seems obvious but I can't find the path to these. Here is the css to the parent li "home" item.
.section-nav--primary .section-nav__item--home a {
color: #009f9b;}
Here is an example of what I tried that didn't work:
.section-nav--primary .section-nav__item--home ul li ul a {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.section-nav--primary .section-nav__item--home ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
.section-nav-primary .section-nav__item--home ul li ul li:hover {
background: #666;
}
.section-nav--primary .section-nav__item--home ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Here is a link to the menu so you can view the source.
Thanks
Take off one of the ul li pairs.
The ".section-nav--primary .section-nav__item--home" are the first ul li.
So it should be
.section-nav-primary .section-nav__item--home ul li:hover {
background: #666;
}
Here is the html code of the page's navigation:
<nav>
<ul id="navigation">
<A class="scroll" href="#first">Hjem</A>
<A class="scroll" href="#second">Info</A>
<A class="scroll" href="#third">Pris</A>
<li style="display: inline;"><A class="scroll" href="#">Brugervejledninger »</A>
<ul>
<li>arbejdsleder</li>
<li>medarbejder</li>
</ul>
</li>
<a id="login-button" href="http://mintimeseddel.dk/scheduling/users">Log ind</a>
</ul>
</nav>
And following is the css used to style it:
ul#navigation li:hover > ul
{
visibility:visible;
opacity:1;
}
ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0;
padding: 0;
visibility:hidden;
position: absolute;
z-index: 99999;
width:180px;
background:#f8f8f8;
box-shadow:1px 1px 3px #ccc;
opacity:0;
-webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
-moz-transition:opacity 0.2s linear, visibility 0.2s linear;
-o-transition:opacity 0.2s linear, visibility 0.2s linear;
transition:opacity 0.2s linear, visibility 0.2s linear;
}
ul#navigation ul {
top: 43px;
left: 43%;
}
ul#navigation ul li ul {
top: 0;
left: 181px;
}
ul#navigation ul li {
clear:both;
width:100%;
border:0 none;
border-bottom:1px solid #c9c9c9;
}
ul#navigation ul li a {
background:none;
padding:7px 15px;
color:#616161;
text-shadow:1px 1px 0px #fff;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
}
Everything works as expected on the localhost, but the problem occurs once the site is uploaded to the live server, the navigation menu gets messed up. Even though it is browser specific: on firefox it always shows up properly, while the other browsers need to reload the page a few times to get it right.
A live example of it can be seen at: www.mintimeseddel.dk
Any help is much appreciated.
Your HTML is not valid. Browsers will interpret the invalid html differently in an effort to figure out what it is supposed to mean.
Namely, you can't put anchors ('a') directly inside of unordered lists ('ul'), the only valid child of a list is a list item ('li'). In other words, you need to wrap an 'li' tag around the 'a' tags.
Some browsers will close the list and display the anchors inside of the list's parent element (a 'nav' in this case). Other browsers will transparently wrap the anchors in a list entry. Others still will try to render the anchors where they are.
If you fix the HTML, the rest should start to work consistently (although you might have to go back and redo the CSS).
EDIT To respond to OP's comment: The HTML should look like this:
<nav>
<ul id="navigation">
<!-- note the new 'li' tags here -->
<li><a class="scroll" href="#first">Hjem</a></li>
<li><a class="scroll" href="#second">Info</a></li>
<li><a class="scroll" href="#third">Pris</a></li>
<li style="display: inline;"><A class="scroll" href="#">Brugervejledninger »</A>
<ul>
<li>arbejdsleder</li>
<li>medarbejder</li>
</ul>
</li>
</ul>
<!-- and another additional 'li' tag here -->
<li><a id="login-button" href="http://mintimeseddel.dk/scheduling/users">Log ind</a></li>
</nav>
In my HTML5 code I am using lists to create tabs in my navigation bar.
<div id="nav_tabs">
<ul>
<a href="Index_V2.html">
<li>
Home
</li>
</a>
<a href="#media">
<li>
Media
</li>
</a>
<a href="#agenda">
<li>
Agenda
</li>
</a>
</ul>
</div>
When the user hovers over one of those tabs the background color and text color changes. However, for my Media tab in my list I added a drop-down menu. The HTML for that is:
<a href="#media">
<li>
Media
<ul class="submenu">
<li>Music</li>
<li>Photo</li>
<li>Video</li>
<li>Band</li>
<li>Interviews</li>
<li>Archive</li>
</ul>
</li>
The drop down menu works and the Media tab background color changes to white on hover as it is supposed to. Unfortunately, the "Media" text in the tab remains its original color.
This is the CSS that handles the change of color etc:
nav {
width: auto;
text-transform: uppercase;
background: #ff4e00;
height: 50px;
}
nav a {
color: white;
}
nav ul {
list-style-type: none;
margin: 0 auto;
margin-left: 0px;
}
nav ul li {
height: 35px;
margin: 0px;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
float: left;
text-align: center;
color: white;
font-size: 26px;
-webkit-transition: .2s linear;
-moz-transition: .2s linear;
-o-transition: .2s linear;
-webkit-transition: .2s linear;
-moz-transition: .2s linear;
-o-transition: .2s linear;
}
#nav_tabs ul li:hover {
background: white;
color: #ff4e00;
}
.submenu {
position: relative;
width: 10px;
top: 17px;
right: 15px;
padding: 0px;
margin: 0px;
display: none;
background: black;
}
.submenu li {
background: #ff4e00;
width: 150px;
}
li:hover .submenu {
display: block;
}
I am trying to get the "Media" link text to change to the same color as all the others, but since the Link/List order is different it obviously doesn't work the same. I have tried to use:
#nav_tabs ul a:hover {
color: #ff4e00;
}
But this only changes the color of the text when the user hovers over the link/text. It does not change the color of the text when the user hovers over the tab which is what I am looking for.
I managed to recreate my issue here in JS Bin. When the user hovers over the "Media" tab, the background of the tab changes but the text-color does not.
The short answer is this:
Instead of:
#nav_tabs ul a:hover {
color: #ff4e00;
}
Do this:
#nav_tabs ul:hover a {
color: #ff4e00;
}
You can place the :hover on any element in the CSS selector chain, it doesn't have to go on the last one. This means that when you hover over a UL, all of the child anchor tags will get the styles.
But a longer answer is you have poorly formatted HTML. You have empty anchor tags floating in the <ul> tags by themselves, instead of wrapped in <li> elements. You've also got anchor tags wrapping <li> elements rather than inside of them.
This means your whole cascading relationship is going to be off. Here is the revised HTML (I removed some stuff for simplicity, I'll let you add it back in using this new structure as a guide):
<body>
<nav id="nav_tabs">
<ul>
<li>Home</li>
<li>
Media
<ul class="submenu">
<li>Music</li>
</ul>
</li>
</ul>
</nav>
</body>
And then you should be able to adjust the CSS accordingly.
As some one mentioned in the comments, your HTML is not valid,
valid chields of are only s (you have to put the inside them).
In your code when the browser parse it .. tags get replaced and your css dont match it.
Here is the edited code: http://jsbin.com/ofapac/8/edit
<nav>
<div id="nav_tabs">
<ul>
<li>
Home
</li>
<li>
Media
<ul class="submenu">
<li>Music</li>
<li>Photo</li>
<li>Video</li>
<li>Band</li>
<li>Interviews</li>
<li>Archive</li>
</ul>
</li>
<li>
<a>Agenda</a>
</li>
<li>
<a>Contact</a>
</li>
</ul>
</div>
</nav>
And second thing, tags does not inherit font settings from there parent tag, so you have to specified it explisidly. there are 2 extra rows on the bottom of the CSS.
nav ul li a{
color: white;
}
nav ul li:hover > a{
color: #ff4e00;
}