My following css selector #nav-bar li:hover ul should show the
<li>Marketing</li>
<li>Advertising</li>
<li>Media</li>
but its not showing here is the fiddle
http://jsfiddle.net/g9Rrn/1/
What you had:
<li>Contact</li>
<li>
<ul>
<li>Marketing</li>
<li>Advertising</li>
<li>Media</li>
</ul>
</li>
You already closed off the list element containing "Contact" before you contained the sub-list within it. What it should be:
<li>
Contact
<ul>
<li>Marketing</li>
<li>Advertising</li>
<li>Media</li>
</ul>
</li>
Related
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 have a CSS like that
.rf_re1-submenu ul li.rf_re1-submenu-finder{
background:pink;
}
and I want to change some things inside if this block is within a special ID (only then, else the above stuff should be used as default)
I therefore tried that
#target-submenu_2block >.rf_re1-submenu ul li.rf_re1-submenu-finder{
background:green;
}
But this doesn't work out, neither does this here:
#target-submenu_2block ul li.rf_re1-submenu ul li.rf_re1-submenu-finder{
background:green;
}
I'd be grateful for your answers for this specific situation but also for a general hint how to solve situations like that.
Try changing
#target-submenu_2block ul li.rf_re1-submenu ul li.rf_re1-submenu-finder
to
#target-submenu_2block .rf_re1-submenu ul li.rf_re1-submenu-finder
Snippet:
.rf_re1-submenu ul li.rf_re1-submenu-finder{
background:pink;
}
#target-submenu_2block .rf_re1-submenu ul li.rf_re1-submenu-finder{
background:green;
}
<ul>
<li>hello
<ul>
<li class="rf_re1-submenu-finder">Goodbye</li>
<li>Goodbye</li>
<li class="rf_re1-submenu-finder">Goodbye</li>
</ul></li>
<li>hello</li>
<li class="rf_re1-submenu">hello
<ul>
<li class="rf_re1-submenu-finder">Goodbye</li>
<li>Goodbye</li>
<li class="rf_re1-submenu-finder">Goodbye</li>
</ul>
</li>
</ul>
<ul id="target-submenu_2block">
<li>hello
<ul>
<li class="rf_re1-submenu-finder">Goodbye</li>
<li>Goodbye</li>
<li class="rf_re1-submenu-finder">Goodbye</li>
</ul></li>
<li>hello</li>
<li class="rf_re1-submenu">hello
<ul>
<li class="rf_re1-submenu-finder">Goodbye</li>
<li>Goodbye</li>
<li class="rf_re1-submenu-finder">Goodbye</li>
</ul>
</li>
</ul>
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>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I know dropdown menu's are created by wrapping unordered lists and list items.
How does positioning work for drop down menus?
<div class="nav block">
<ul>
<li style="border-left:1px solid black;">Home</li>
<li>About Us
<ul>
<li> Porfolio</li>
</ul>
</li>
<li>Reviews
<ul>
<li>Spellen</li>
</ul>
</li>
<li>Releases</li>
<li>Contact</li>
<li>Contact</li>
</ul>
</div>
Like this
DEMO
CSS
li {
float:left;
position:relative;
margin:0 10px;
}
li li {
float:none;
}
li li a {
white-space:nowrap;
}
li ul {
position:absolute;
top:1.1em;
left:0;
display:none;
border:1px solid red;
}
li:hover ul {
display:block;
}
First huge problem, which can be the main one : your sublist must be wrapped into a <li> tag :
<div class="nav block">
<ul>
<li style="border-left:1px solid black;" >Home</li>
<li>
About Us
<ul>
<li> Porfolio</li>
</ul>
</li>
<li>
Reviews
<ul>
<li>Spellen</li>
</ul>
</li>
<li>Releases</li>
<li>Contact</li>
<li>Contact</li>
</ul>
</div>
The UL (submenu) should be inside the LI (of the menu)
<div class="nav block">
<ul>
<li style="border-left:1px solid black;" >Home</li>
<li>About Us</li>
<ul>
<li> Porfolio</li>
</ul>
<li>
Reviews
<ul style="display:none;"> <!-- Sub menu -->
<li>Spellen</li>
</ul>
</li>
<li>Releases</li>
<li>Contact</li>
<li>Contact</li>
</ul>
</div>
the direct child selector in css(>) selects the direct descedants and passes color to them, but when it comes to text-decoration, it selects other elements too. How come?
http://codepen.io/anon/pen/dDJmE
for color i see it selects only the direct descedants, but why is not the behaviour for text-decoration correct? What am i missing?
CSS
li {
text-decoration: none;
color: black;
}
ol.numbers > li {
text-decoration: underline;
color: red;
}
HTML
<ol class="numbers">
<li> First! </li>
<li> Second!
<ul>
<li> hehe </li>
<li> huhu
<ol>
<li> nested! </li>
</ol>
</li>
</ul>
</li>
<li> Third! </li>
<li> Fourth!
<ol>
<li> oh lala </li>
</ol>
</li>
</ol>
In your markup:
<div>
<ol class="numbers">
<li> First! </li>
<li> Second!
<ul>
<li> hehe </li>
<li> huhu
<ol>
<li> nested! </li>
</ol>
</li>
</ul>
</li>
<li> Third! </li>
<li> Fourth!
<ol>
<li> oh lala </li>
</ol>
</li>
</ol>
<ol class="letters">
<li> A </li>
<li> B </li>
</ol>
The (non-specific) ol and respective li children are simply subjects of styles being applied to any text content within any ol.numbers>li. You have to override the styling the non-specified child ol and lis are inheriting. You can do this with ol.numbers>li li as a selector.
Addition
Seems I was right about text-decoration not being congruent with other text-styling mechanisms: How do I get this CSS text-decoration override to work?
You're going to have to approach this problem differently. I would recommend wrapping your text with appropriate tags (ps, spans, etc.), and addressing them specifically in the CSS to get the desired outcome.
It is due to the order that CSS applies styles. ol.numbers > li is more specific than li. So that style takes precedence.