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>
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 want to remove the bullet point for this code. tried many ways but no luck. any help?
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
.widget ul li{ list-style-type: none;}
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
As the div container only list contact information, I'd recommend styling the elements using the wpcw-widget-contact class as it has a great fit with the context.
.wpcw-widget-contact ul {
list-style: none;
}
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
You also might be interested to look up more details about the CSS property used on this answer.
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>
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>
Hello newbie question, I'll just wanted to hover the li.about on the ul.second.. Can someone help me on this one..
<ul id="nav" class="clear">
<li id="home"></li>
<li id="about"></li>
<ul class="second">
<li><a href="www.yahoo.com">1st Link</li>
<li><a href="www.google.com">2nd Link</li>
<li><a href="www.google.com">2nd Link</li>
</ul>
<li id="gallery"></li>
<li id="before-after"></li>
<li id="loft"></li>
<li id="case"></li>
<li id="testimonials"></li>
<li id="faqs"></li>
<li id="contact"></li>
</ul>
css codes
#navigation ul#nav li#about:hover ul.second
{
background:#CCC;
padding:1px;
margin:1px;
height:200px;
color:black;
z-index:1000;
width:200px;
}
If its a drop down menu you're trying to do, then make use of the display: none; and display: block css properties.