So i have this menu, this is the structure:
<div id="menu-home">
<ul>
<li> a.active </li>
<ul class="sub-menu">
<li> a </li>
</ul>
</ul>
</div>
What i need to access is that <ul class="sub-menu"> when the a is active
Can someone point me to that?
I've used:
#menu-s a.active ul.sub-menuul {
display:block;
}
Thanks
You have a messed up post, but if I understand what do you want to ask, the example below will help you.
This should be your HTML:
<div id="menu-home">
<ul>
<li>
<a href="#"> a.active
<ul class="sub-menu">
<li> sample </li>
</ul>
</a>
</li>
</ul>
</div>
This should be your CSS:
#menu-home ul li a:active ul.sub-menu li {
color: green;
border: 1px solid green;
}
I added few changes to CSS, for you, to help you understand what's happening.
This is the jsfiddle link with the demonstration:
http://jsfiddle.net/aWe3n/24/
This is not how u give class it should be Link
Related
First, see the code below:
ul.parent li:hover{
background-color: red;
}
/* ul.parent li:hover .child{
background-color: white;
} */
<ul class="parent">
<li> App </li>
<li>
Components
<ul class="child">
<li> Badge </li>
<li> Dropdown </li>
<li> Navbar </li>
<li> Modal </li>
</ul>
</li>
</ul>
The problem is when I hover on components the ul child list also changes the background-color as expected. But I don't want it, When I hove on components only this li should be changed not the ul list.
Again, when I hover on it then I can change the ul background color as I need (for me it makes a lot of problems).
How can I do this stuff? Advance Thanks.
You can color only the a inside
ul li:hover>a{
background-color: red;
}
<ul class="parent">
<li> App </li>
<li>
Components
<ul class="child">
<li> Badge </li>
<li> Dropdown </li>
<li> Navbar </li>
<li> Modal </li>
</ul>
</li>
</ul>
Set the background property to the anchor tags, not the list items. You can then unset the color for nested anchor tags (or set a different color or effect):
ul.parent > li:hover > a{
background-color: red;
}
ul.parent > li:hover ul.child a{
background: unset;
}
ul.child > li:hover a{
background: blue !important;
}
<ul class="parent">
<li>
App
</li>
<li>
Components
<ul class="child">
<li> Badge </li>
<li> Dropdown </li>
<li> Navbar </li>
<li> Modal </li>
</ul>
</li>
</ul>
How to use not selector to ignore specific ul li element from css?
<ul class="list">
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
<li>
<ul class="innerli">
<li></li>
</ul>
</li>
</ul>
I have tried with below code but not working
.list li:not(.innerli li){padding-left:10px;width: 500px;}
.list ul:not(.inner) li is the selector you are looking for I believe.
in .list look for all uls which are not having class .inner and from those take all list.
You are supposed to check by ul:not(selector) as below snippet.
.list ul:not(.innerli) li {
color: red;
}
<ul class="list">
<li>Outer</li>
<li>
<ul>
<li>Inner</li>
</ul>
</li>
<li>
<ul class="innerli">
<li>Inner</li>
</ul>
</li>
</ul>
Update: If you wish to select both <li>Outer</li> as well then you have to go for multi-lines as below.
/*.list ul:not(.innerli) li {
color: red;
}*/
ul:not(.innerli) li {
color: red;
}
ul.innerli li {
color: black;
}
<ul class="list">
<li>Outer</li>
<li>
<ul>
<li>Inner</li>
</ul>
</li>
<li>
<ul class="innerli">
<li>Inner</li>
</ul>
</li>
</ul>
I'm trying to create a white strike through in my active nav. It works in firefox but for the other browsers it only shows up in black. Is there a way to get it to be white.
HTML
<div id="menu">
<ul class="nav nav-pills menu">
<li class="nav_item">
HOME
</li>
<li class="nav_item">
ABOUT US
</li>
<li class="nav_item">
PORTFOLIO
</li>
<li class="active">
CONTACT US
</li>
</ul>
</div>
CSS
.active {
color: #fff;
text-decoration: line-through;
}
Here is the jsfiddel: JSFIDDLE
This works for me in Chrome:
.active a{
text-decoration-color: inherit;
text-decoration: line-through;
}
.active {
color:#fff;
}
jsFiddle example
Try this setting it to the a
.active a{
color: #fff;
text-decoration: line-through;
}
DEMO
Try this:
<div id="menu">
<ul class="nav nav-pills menu">
<li class="nav_item">
<span style='color:black;'>HOME</span>
</li>
<li class="nav_item">
<span style='color:black;'>ABOUT US</span>
</li>
<li class="nav_item">
<span style='color:black;'>PORTFOLIO</span>
</li>
<li class="active">
<span style='color:black;'>CONTACT US</span>
</li>
</ul>
</div>
My HTML code:
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
If I write
nav ul li a:hover{}
It will create hover for all links.
How to create sentence that first link "Link1" will have different hover?
Use :first-child pseudo-selector
nav ul li:first-child a:hover {
color: red
}
<nav>
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
</ul>
</nav>
I have 2 or more <UL> sets inside, and wants to only make first UL <a> set to bold.
in fact, this is a menu with multiple sub menus, and I only want to make parent links bold.
I know it can be done by adding some more ID's or classes, but this is not an option, and just want to try css method only.
<ul class="menu">
<li class="collapsed first">
<a title="Mechanical products" href="1">Mechanical Products</a>
</li>
<li class="collapsed">
<a title="Chemicals" href="2">Chemicals</a>
</li>
<li class="expanded active-trail">
<a title="Instrumentation" href="3">Instrumentation</a>
<ul class="menu">
<li class="leaf first">
<a title="Control valves FISHER" href="4">Control Valves</a>
</li>
<li class="expanded active-trail">
<a class="active" title="Corrosion Monitoring System" href="5">Corrosion Monitoring</a>
<ul class="menu">
<li class="leaf first">
<a title="Access Fitting Assemblies" href="6">Fitting Assemblies</a>
</li>
<li class="leaf last">
<a title="Coupon Holders, Coupons & Probes" href="7">Holders,Coupons</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="collapsed">
<a title="Mechanical products2" href="8">Mechanical Products2</a>
</li>
</ul>
as of this example, only "Mechanical Products", "Chemicals", "Instrumentation" and "Mechanical Products2" should get bold.
Use the first child selector: >
.menu > li {
font-weight: bold;
}
Not that if you need to support IE6, you'll have to do it manually, as IE6 doesn't support the > selector:
.menu li a {
font-weight: bold;
}
.menu li ul li a {
font-weight: normal;
}
It will probably do it...
ul.menu li a
{
font-weight:bold;
}
ul.menu li ul li a
{
font-weight:normal;
}
You'll have to use the child selector and make the top-level <ul> unique by giving it some class:
ul.top-level > li > a {
font-weight: bold;
}
Demo: http://jsfiddle.net/kJJw9/
ul.menu li.collapsed a{font-weight:bold;}