I have a very good menu right here:
http://jsfiddle.net/y9jbQ/
<ul id="nav">
<li>Menu 1
<ul class="nav first">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4
<ul class="nav">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
the problem is now, let's say I want a right-arrow image, aligned to right in case when there's an other sub menu. Putting inside isn't healthy thing. I don't want to create anything to copy 's behaviour. So,
<li><div float left><div float right></li>
is not a good way.
Use a CSS Child Selector:
ul.root > li > a { /* css declarations */ }
This will only apply the rules to the direct descendants of the root ul element.
Illustration:
<ul class="root">
<li>
<!-- MATCH -->
</li>
<li>
<!-- MATCH -->
<ul>
<li>
<!-- NO MATCH -->
</li>
</ul>
</li>
</ul>
Related
I'm using SharePoint Designer and I would like to apply a custom bullet on the parent li (Desc 1 and Desc 2) of my list, but what's happening is that it is being applied on all the list items including the children li. Can someone help me with it? how it should be done correctly in CSS? Thanks.
.tab-content.content-show ul li {
list-style-image: url(/img.png);
}
.tab-content.content-show ul li > li {
list-style-image: none !important;
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li>Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li>Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
To select the direct children and not the grandchildren, you can use ">" as shown below
.tab-content.content-show div > ul > li {
list-style-image: url(/img.png);
}
And no need for 2nd class.
here is the customized css:
.tab-content.content-show div > ul > li {
background: url("https://www.kindpng.com/picc/m/313-3131657_blue-bullets-icon-png-transparent-png.png") left center no-repeat;
background-size:20px;
padding: 0 0 0 40px;
}
You were pretty close. Your CSS should look like this:
.tab-content.content-show div > ul > li {
list-style-image: linear-gradient(to left bottom, red, blue);
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li>Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li>Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
The Child Selector (>) applies the CSS rules to the direct children of the particular element.
See this related answer: https://stackoverflow.com/a/4830672/801544
Note I've used a gradient instead of an image just to show that it works, but you can use any image instead.
you should use "ul:first-child" in css:
.tab-content.content-show ul:first-child > li{
list-style-image: url(https://www.w3schools.com/cssref/sqpurple.gif);
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li>Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li>Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
Do you have access to the HTML code? If yes I would put a class on the li you are interested in.
<li class="custom-bullet">Desc 1</li>
.custom-bullet {
list-style-image: url(/img.png);
}
.tab-content.content-show ul li > li is going to match li elements that are children of li elements … which is not allowed in HTML.
Just use child combinators instead of descendant combinators in the first place.
.tab-content.content-show > div > ul > li {
list-style-image: url(http://placekitten.com/20/20);
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li class="parent">Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li class="parent">Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
You can change your css to following way
.tab-content.content-show > Div > ul > li {
color:red;
}
see the jsFiddle
As well as you can set unique class both and and set colors accessing that class like following
.html
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li class="Desc1">Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li class="Desc2">Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
.css
.tab-content.content-show .Desc1{
color:red;
}
.tab-content.content-show .Desc2{
color:green;
}
see the jsfiddle
The best way to solve this problem is to give parent list items a class attribute and you style that class.
li.parent {
list-style-image: url(/img.png);
}
.tab-content.content-show ul li > li {
list-style-image: none !important;
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li class="parent">Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li class="parent">Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
.tab-content.content-show ul li.parent {
list-style-image: url(/img.png);
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li class='parent'>Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li class='parent'>Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
How do I hide the drop-down button to the hover or click to display it? I specifically use foundation zurb plugin. Look my code:
HTML:
<ul class="menu" data-drilldown data-back-button='<li class="js-
drilldown-
back"><a class="new-back"></a></li>'style="width: 200px" id="m1">
<li>
Item 1
<ul class="menu">
<li>
Item 1A
<ul class="menu">
<li>Item 1Aa</li>
<li>Item 1Ba</li>
<li>Item 1Ca</li>
</ul>
</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li>
Item 2
<ul class="menu">
<li>Item 2A</li>
<li>Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
</ul>
The code doesn't mean much to you if you haven't used the drill dropdown foundation zurb plugin.
Without changing the HTML, which pains me, how do I only select the parent of an unordered list for CSS?
I have something like the following:
<div class="content">
<ul class="navigation">
<li>Item 1
<ul>
<li>Sub Item A</li>
<li>Sub Item B</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
I need to grab only Item 1 for altering it's CSS. I've attempted things like:
ul li a - won't work because it will grab Item 2
ul li a - won't work because it will grab Item 2
ul.navigation li - won't work because it will grab Item 2
ul:first-child - won't work because it will hit Item 1 and Sub Item A
Any thoughts?
You can do it like this:
.navigation > li:first-child > a {color: red}
<div class="content">
<ul class="navigation">
<li>Item 1
<ul>
<li>Sub Item A</li>
<li>Sub Item B</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
Or like this:
.navigation > li:first-of-type > a {color: red}
<div class="content">
<ul class="navigation">
<li>Item 1
<ul>
<li>Sub Item A</li>
<li>Sub Item B</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
Below is my snippet. First, I have two different link which triggered a drop down sub menu when hovered. Now the problem is, If you hover on the "First menu" (this is a fixed position), its drop down sub menu does not overlap like the second drop down sub menu from the second menu, it contains itself to its parent which seem's ugly, any ideas, help, clues, suggestions, recommendations to fix this please?
a{text-decoration:none;color:#000000;}
ul,li{list-style:none;padding:0px;}
#menu{overflow-y:auto;overflow-x:hidden;max-height:50px;background:#ededed;color:#ffffff !important;padding:15px;position:fixed;width:300px}
.sub_menu{
position:absolute;
z-index:99999999999;
background:red;
padding:15px;
color:#000000;
display:none;
}
.d_menu a:hover + .sub_menu{display:block !important;}
#menu2{overflow-y:auto;overflow-x:hidden;max-height:50px;background:#ededed;color:#ffffff !important;padding:15px;margin-top:50px;}
<div id="menu">
<ul class="d_menu">
<li>
This is first menu, this has a fixed position
<ul class="sub_menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
<li>sub menu 5</li>
<li>sub menu 6</li>
<li>sub menu 7</li>
<li>sub menu 8</li>
<li>sub menu 9</li>
<li>sub menu 10</li>
</ul>
</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div>
<br>
<br>
<div id="menu2">
<ul class="d_menu">
<li>
This is second menu, this has a static position
<ul class="sub_menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
<li>sub menu 5</li>
<li>sub menu 6</li>
<li>sub menu 7</li>
<li>sub menu 8</li>
<li>sub menu 9</li>
<li>sub menu 10</li>
</ul>
</li>
</ul>
</div>
You just have to remove overflow-y and overflow-x and it will work :
a{text-decoration:none;color:#000000;}
ul,li{list-style:none;padding:0px;}
#menu{max-height:50px;background:#ededed;color:#ffffff !important;padding:15px;position:fixed;width:300px}
.sub_menu{
position:absolute;
z-index:99999999999;
background:red;
padding:15px;
color:#000000;
display:none;
}
.d_menu a:hover + .sub_menu{display:block !important;}
#menu2{overflow-y:auto;overflow-x:hidden;max-height:50px;background:#ededed;color:#ffffff !important;padding:15px;margin-top:50px;}
<div id="menu">
<ul class="d_menu">
<li>
This is first menu, this has a fixed position
<ul class="sub_menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
<li>sub menu 5</li>
<li>sub menu 6</li>
<li>sub menu 7</li>
<li>sub menu 8</li>
<li>sub menu 9</li>
<li>sub menu 10</li>
</ul>
</li>
</ul>
</div>
<br>
<br>
<div id="menu2">
<ul class="d_menu">
<li>
This is second menu, this has a static position
<ul class="sub_menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
<li>sub menu 5</li>
<li>sub menu 6</li>
<li>sub menu 7</li>
<li>sub menu 8</li>
<li>sub menu 9</li>
<li>sub menu 10</li>
</ul>
</li>
</ul>
</div>
How can I place a div in between two list items, adding a margin on both sides?
Here is the layout I am trying to achieve: Link to Image
Below is the code I am trying to use to make this happen.
<div id="logo">
Logo Image
</div>
<div id="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Is there a way to do this without adding individual styles to the 2nd and 3rd list items? That's the only way I can think of doing this.
Get rid of the <div>, and give the <li> that you would want the <div> in its class:
http://jsfiddle.net/charlescarver/jTYnW/
<div id="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li id="logo">
Logo Image
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
You can try with this code
<ul>
<li>
<div>test</div>
</li>
<li>
<div>test</div>
</li>
<li class="specific">
<div>test</div>
</li>
<li>
<div>test</div>
</li>
</ul>
Adjust css to div