<div class="fbtop">
<img src="https://static.solidshops.com/1441/files/Logo-site.png" title="Pieke Wieke" alt="Pieke Wieke">
<h2 class="title">Zelfgemaakt met liefde</h2>
<ul class="dropdown">
<li>
Naaibenodigdheden
<ul class="sub_menu">
<li>
Allerlei
</li>
<li>
Spelden
</li>
<li>
Naalden
</li>
</ul>
</li>
<li>
Stoffen
<ul class="sub_menu">
<li>
Effen
</li>
<li>
Katoen
<ul>
<li>
Pieke Wieke for Soft Cactus
</li>
<li>
Soft Cactus
</li>
<li>
Bedrukte katoen
</li>
<li>
Basics
</li>
<li>
Stretchkatoen
</li>
</ul>
</li>
<li>
Bedrukt
</li>
<li>
Stretch katoen
</li>
<li>
Tricot
</li>
<li>
Flannel
</li>
<li>
Gabardine
</li>
<li>
Ribfluweel
</li>
<li>
Voering
</li>
<li>
Teddy fleece
</li>
<li>
Geweven
</li>
</ul>
</li>
<li>
Flockfolie
</li>
<li>
Workshops
</li>
<li>
Waardebonnen
</li>
<li>
Vlieseline
</li>
<li>
Fournituren
<ul class="sub_menu">
<li>
Lint
</li>
<li>
Garen
</li>
<li>
Ritsen
</li>
<li>
Paspel
</li>
<li>
Biais
</li>
<li>
Elastiek
</li>
</ul>
</li>
</ul>
</div>
It's a classic way of doing dropdown menu's by css, to see it at work you can go to http://jsfiddle.net/W6Rhe/
There you'll also see the issue that I have with the menu. If you select the first item "Naaibenodigdheden" you'll see that the first sub menu item has front color white instead of red.
If you go to stoffen, you'll notice the same behaviour, if you select the sub menu "katoen" you'll notice the same behaviour again.
Now the cherry on the pie of this delicious issue is that when I adjust all my links to relative links (ie I remove https://blabla.blah.com) then All the items appear in red as intended.
What the hell am I doing wrong? I just don't get it.
ps tested this on chrome
ps2 it appears that when I replace the url in whatever is not what they are now, the problem does not occur, bizar is my only term for this behaviour
This code here:
ul.dropdown li a:visited,
ul.dropdown li a:hover
{
color:#fff;
}
is overriding the color on :visited links to white.
The reason the color changes when you use a relative URL is because the browser no longers sees it as visited, because it is a different path.
I have found the culprit, thanks to Andy for pointing me into the right direction:
ul.dropdown ul li a:hover,
ul.dropdown ul li a:active,
ul.dropdown ul li a:link {color: #e10707; }
He noticed that the links that were still white were in fact links colored trough the :visited attribute that was declared #fff or white :)
There is one state missing in the previous code block, indeed the a:visited color is not set to red, that's why it was white
Related
I have a multi-level ul list like below.
<ul>
<li>
</li>
<li>
<a href="/">
</a>
<ul>
<li>
<ul>
<li>
</li>
<li>
<ul>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
</li>
<li>
</li>
</li>
</li>
</ul>
There could be more levels inserted.
So I want every ul > li > a will have a padding-left+10 of it's parent a tag.
you can use forloop for adding css for all the anchor tags at once.
add class in anchor tag for get element by class
var lis = document.getElementByClass("link").getElementsByTagName("li");
after this you can implement css using javascript:
var sheet = window.document.styleSheets[0];
sheet.insertRule('a { padding-left: 50px; }', sheet.cssRules.length);
I want to change the background of "zxczxczxc" and "bbbbbb" to yellow. I try ul > li:first-child > a {
background: yellow;
} but it is not work. Any one have solution? thanks
Note: No add more class. It's must be css only.
<ul class="sub-menu">
<li>
<a>zxczxczxc</a>
<ul class="sub-menu">
<li><a>ccccc</a></li>
<li><a>bbbbddddddbb</a></li>
</ul>
</li>
<li>
<a>bbbbbb</a>
</li>
</ul>
Your Answer:
.link1{background-color:red}
.link2{background-color:Blue;
color:white;}
<li>
<a class="link1">zxczxczxc</a>
<ul class="sub-menu">
<li><a>ccccc</a></li>
<li><a>bbbbddddddbb</a></li>
</ul>
</li>
<li>
<a class="link2">bbbbbb</a>
</li>
</ul>
Buddy, you have a small typo in your code to set a background color we use background-color
body {
background-color: coral;
}
I have a drop-down menu in a Shopify site I'm creating.
On desktop, the main li is clickable to a link, as well as opening the sub-menu items when hovered.
On mobile, the main li ONLY opens the sub-menu "drawer", but can't be selected as a link on its own.
How can I make it selectable and open the drawer on mobile?
li a {
display: block;
padding: 7px 10px !important;
text-align: left !important;
}
<li class="site-nav--has-dropdown site-nav--active" aria-haspopup="true">
<a href="/" class="site-nav__link">
Home
<span class="icon icon-arrow-down" aria-hidden="true"></span>
</a>
<ul class="site-nav__dropdown">
<div>
<li>
ABOUT
</li>
<li>
PLANS & PRICING
</li>
<li>
POLICIES
</li>
<li>
CENTER
</li>
<li>
BACK
</li>
<li>
FAQ
</li>
<li>
OUR TEACHERS
</li>
</div>
<span class="arrow"> </span>
</ul>
</li>
Include the main li link as the first item in the sub-menu (in addition to the link in the main menu).
Display it on mobile devices.
Hide it with display: none on desktop devices.
I used image list style and trying to align it perfectly well with the text in vertical.
JSFiddle: http://jsfiddle.net/uwzW5/
But it seems the text is always down by 2px-3px. How can I fix this issue?
<div class="col-md-3 feature-ul-section">
<ul>
<h3>TRACK</h3>
<li> Detailed event tracking:
<ul class="sub-feature features-close">
<li> Timestamp</li>
<li> IP</li>
<li> Country</li>
</ul>
</li>
<li> Conversions Tracking
<ul class="sub-feature features-close">
<li> <a >Double tier conversion</a></li>
<li> <a>Configurable cookies</a></li>
<li> Track multiple conversions</li>
<li> Track product ID</li>
<li> Track custom parameters</li>
<li> Track conversion value</li>
<li> Track commission amount</li>
<li> http/https</li>
</ul>
</li>
<li> <a>Google Analytics UMT</a></li>
</ul>
</div>
and css
.feature-ul-section ul li {
list-style-image: url(../img/green-list.png);
font-family:'Source sans pro';
}
.feature-ul-section ul li ul li {
list-style-image: url(../img/grey-list.png);
}
You can add a span element inside each li element and then add CSS style to the span element
Try
HTML:
<div class="col-md-3 feature-ul-section">
<ul>
<h3>TRACK</h3>
<li> <span>Detailed event tracking:</span>
<ul class="sub-feature features-close">
<li> <span>Timestamp</span></li>
<li> <span>IP</span></li>
<li> <span>Country</span></li>
</ul>
</li>
</div>
CSS:
span{
position:relative;
top:-3px;
}
DEMO
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.