Im trying to change display to "block" from "none"; am I doing right? Why is not working?
#sub_1{
display: none !important
}
.cls1:hover #sub_1{
display : block !important
}
Please go to the bottom of my code in CSS! Thanks
JSFIDDLE
I have correct your code you should understand the hierarchy of HTML then write code accordantly.
#header ul li ul{ display:none;}
Your ul is not within li tag of class cls. You have closed your li and after that placed ul but acording to your css #sub_1 must be within .cls, that's why it is not working so change your html to
<li class='cls1'>item 2
<ul id='sub_1'>
<li>item A</li>
<li>item B</li>
<li>item C</li>
</ul>
</li>
Hope you understand....... let me know if there is any query
Related
How can I style only the top level li's from this example list?
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
ul.upper > li {
color:red;
}
This styles all li's which I understand because the recursive UL is inside a first level list item. Is there a simple way to style only the top level li's though? Maybe using ":not" in some way?
Edit: I realize you can overwrite the style below it using color:initial or by adding another color(and other ways) but I was wondering if there was a way to ONLY select the top level li's nicely so another style isn't needed.
So, your li are inheriting color from their ancestors, so you need to add color:initial, or color:black to override that
ul.upper > li {
color: red;
}
li {
color: initial;
}
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
You want the child combinator, ">"
.upper > li
You can define the deeply nested UL's list-items like this:
ul > li {
color:red;
}
ul ul > li {
color: #000;
}
So this can work throughout your page to identify any top-level list-items versus second-level list-items, regardless of class name. "ul ul" in CSS means "ul that is inside another ul"
Working example: https://jsfiddle.net/2Lyvp2bm/2
(I'm new, how do I add a code snippet to my answer?)
i tried making a simple css dropdown menu which is not working as expected.
the dropdown should appear when i hover the pointer on "menu1" .here is the link to the fiddle
. Moreover i am bit frustrated with this piece of css code(i think this should be the code which will give me the desired output but why it is not working)
#nav ul li:hover ul
however if i replace it with
#nav ul:hover ul
it works but not as expected.
Just add > in your code as follows:
#nav ul li:hover ul
Change into:
#nav ul > li:hover ul
When you would like to create sub menu, the structure should be like this:
<li>parent-menu</li>
<li>parent-dropdown-menu
<ul>
<li>........</li> <!--child-->
</ul>
</li>
See the little changes here: DEMO
You need to put the sub menus inside the parent li:
<div id="nav">
<ul>
<li>menu0</li>
<li class="main">
menu1
<ul>
<li class="sub">menu2</li>
</ul>
</li>
</ul>
</div>
http://jsfiddle.net/F3Qg3/39/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
How do I add bullets back to a list when I've applied list-style:none; globally?
Add a class to the list, like with-bullets, and set the list-style for that class to circle.
E.g.
CSS
.with-bullets {list-style:circle}
HTML
<ul class="with-bullets">
<li>Value 1</li>
<li>Value 2</li>
</ul>
There's also lots of other stuff you can do with list-style: http://www.w3schools.com/cssref/pr_list-style.asp
you can use pseudo css for styling the list styles which will not effect the li styles and you can give any style for the li like i have done
demo - http://jsfiddle.net/victor_007/sbmam1vj/5/
add a class for ul for which you want to change the styles
currently i have used star for list style you can use anything
ul.line-legend {
list-style: none;
}
.line-legend li {
position: relative;
}
.line-legend li:before {
content: "\2605";
color: black;
font-size: 12px;
top: 0;
position: absolute;
left: -19px
}
<ul class="line-legend">
<li>one</li>
<li>two</li>
</ul>
There are many ways to override css, here are 2 of them:
Option 1: inline css
<ul style="list-style:circle">
<li>Value 1</li>
<li>Value 2</li>
</ul>
Option 2: using !important
html:
<ul class="list">
<li>Value 1</li>
<li>Value 2</li>
</ul>
css:
.list{
list-style:circle !important;
}
For example my HTML is this
<ul>
<li>Sample 1</li>
<li>Sample 2
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3
<ul>
<li>Grandsub 1</li>
<li>Grandsub 2</li>
<li>Grandsub 3
<ul>
<li>verySub 1</li>
<li>verySub 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Sample 3</li>
</ul>
I want to use different styles on every child <UL> without defining any class or id on them.
I dont know how many child <ul> might occur inside one another so inline css will not to the job
Is this possible?
All you need is to specify each level like so:
<style type="text/css">
ul li { color: red; }
ul li ul li { color: blue; }
ul li ul li ul li { color: black; }
ul li ul li ul li ul li { color: green; }
</style>
No inline style attributes, no classes required.
Works perfectly on the HTML snippet you provided. Keep in mind, that each successive level will inherit from the one before it. That's the whole idea of the "cascading" part of CSS, but I've burned myself forgetting margins at a lower level and having things go haywire.
You can use the "Inline Styling" for each element to have different styles.
Here it is:
<ul style="property:value;">
<li>..</li>
</ul>
If you don't know how many child UL/LI's there may be inside each other, then this won't be possible in CSS.
CSS doesn't support "fuzzy logic" such as: if there are over 5 <li>'s then do something.
Javascript Is the way forward me-thinks!
It looks like you want some way of programmatically defining your style. This is not possible using CSS alone. It does not support you defining your own symbolic names, let alone attempts to do something more 'programmery'. If you were able to generate your CSS dynamically then you could use this to work out the number of levels and algorithmically define the style each time
Otherwise the alternative is to put a maximum on the level of nesting (say 20 levels) and define a style for each one like artlung suggests. Most of the time the lower level definintions won't get used, but they will be there if you need them. This isn't perfect but it's the best you can do with writing directly in CSS.
This uses jQuery, and cycles through a list of three background colours:
function nestedcolour(elements, level) {
if (elements.length > 0) {
var colour = ["#fafafa", "#fbf9ea", "#eeeeee"][level % 3];
elements.css('background-color', colour);
nestedcolour(elements.children("ul").children("li"), level + 1);
}
}
$(document).ready(function() {
nestedcolour($(".classofparentelement"), 0);
});
The .classofparentelement is not really necessary, you can use any method to find the parent element(s).
I have a menu built with <ul> and <li> tags. I want to have small separators between sections. For the separators, I just set a background color and a short height on an <li>. Looks very nice... except in IE7 where the <li> seems to refuse to change its height to be shorter than all the other <li>s in the same <ul>. I have tried different ways of affecting the height of the separator <li> (height, line-height, font-size) with no success.
I have a fix that will leave the separator height as is and color the whole background in IE 7, but that is not really the appearance I want (the separator is too big). Can anyone think of another way to control the height of an <li> tag?
Here is a sample - in IE8 toggling compatibility view will show the problem:
<style type="text/css">
.menu {
width:100px;
}
.menu ul {
list-style-type:none;
border-top: solid 1px red;
padding: 0px;
margin:0px;
}
.menu ul li {
border-bottom: solid 1px red;
padding: 0px;
margin:0px;
white-space:nowrap;
}
.menu ul li a {
font-size: 13px;
text-decoration: none;
color: black;
display: block;
padding: 3px;
}
.menu ul li a:hover {
color: blue;
text-decoration: underline;
}
.menu ul li.separator {
height:4px;
background-color:red;
}
</style>
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="separator"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
The problem is that ie6/ie7 will expand an empty element to the height of your font. You can get around this by adding font-size:0 and line-height:0 to .menu ul li.separator.
A better solution would be to add a thicker bottom border to the <li> that is before the separator.
.menu ul li.sep {border-bottom-width:6px}
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="sep">Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
Set your css for the LI to display: block;.
Maybe you should try setting your li as follows:
li{
display:block;
float:left;
height:myHeight;
clear:right;//may be necessary, can't check with IE7
}
This is what I've done with similar problems.
In addition to Daniel A. White answer you can experiment with line-height to center your text vertically and create the necessary height.
Do what was suggested in the previous posts. If these changes are causing issues in browsers other than IE, you can do the following to have only IE use them:
.selector {
prop1 : val1; /* default value for all browsers */
*prop1 : val2; /* only IE will pick this one up and it will override the initial value of prop1. */
}
This works much better than trying to do special commenting to include separate style sheets, etc.
Have you tried adding a line-height attribute to .menu ul li?
Else have you tried using horizontal rule <hr> as a separator instead? If you're using horizontal rule, you can set the margin-top and margin-bottom to 0px and see what happens. Can't guarantee it looks the same on IE and other browsers, but at least you tried. =)