I'm stuck.
I want to change the background in submenu-third through :nth-child. Because I want that the only first 2 block(:nth-child(-n+2)) have background:blue, but I become that all .submenu-third have background:blue.
How do I add styles for only the first two blocks?
<nav>
<ul class="topmenu">
<li>
home
<ul class="submenu">
<li>menu second level 1</li>
<li>menu second level 2
<ul class="submenu-third">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</li>
<li>menu second level 3</li>
<li>menu second level 4</li>
<li>menu second level 5
<ul class="submenu-third">
<li> 5 third level</li>
<li> 5 third level</li>
<li> 5 third level</li>
</ul>
</li>
<li>menu second level 6</li>
<li>menu second level 7</li>
<li>menu second level 8
<ul class="submenu-third">
<li>8menu the third level</li>
<li>8menu the third level</li>
<li>8menu the third level</li>
</ul>
</li>
<li>menu second level 9</li>
<li>menu second level 10
<ul class="submenu-third">
<li>10menu the third level</li>
<li>10menu the third level</li>
<li>10menu the third level</li>
</ul>
</li>
</ul>
</li>
<li>company</li>
<li>company</li>
<li>company</li>
</ul>
</nav>
.submenu-third:nth-child(-n+2){background: blue;}
.submenu li a:nth-child(2n){color: red;}
you can add class to the first Element using javascript and asign css style to it.
document.querySelector(".submenu-third").classList.add("secondClass");
.secondClass li:nth-of-type(-n+2){background-color: blue;}
<nav>
<ul class="topmenu">
<li>
home
<ul class="submenu">
<li>menu second level 1</li>
<li>menu second level 2
<ul class="submenu-third">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</li>
<li>menu second level 3</li>
<li>menu second level 4</li>
<li>menu second level 5
<ul class="submenu-third">
<li> 5 third level</li>
<li> 5 third level</li>
<li> 5 third level</li>
</ul>
</li>
<li>menu second level 6</li>
<li>menu second level 7</li>
<li>menu second level 8
<ul class="submenu-third">
<li>8menu the third level</li>
<li>8menu the third level</li>
<li>8menu the third level</li>
</ul>
</li>
<li>menu second level 9</li>
<li>menu second level 10
<ul class="submenu-third">
<li>10menu the third level</li>
<li>10menu the third level</li>
<li>10menu the third level</li>
</ul>
</li>
</ul>
</li>
<li>company</li>
<li>company</li>
<li>company</li>
</ul>
</nav>
Related
I know there are a lot of similar solutions.. This one almost works :)
I have an unsorted list:
<ul id="Tree" class="sub-menu">
<li class="folder">First level
<ul class="sub-menu">
<li>File 1.1</li>
<li class="folder">Second level
<ul class="sub-menu">
<li>File 2.1</li>
<li>File 2.2</li>
<li class="folder">Tretji nivo
<ul class="sub-menu">
<li>File 3.1</li>
<li>File 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
And the jQuery:
$('.folder').click(function(event) {
event.stopPropagation();
$(this).find('>.sub-menu').slideToggle();
});
Click on .folder works as desired. The problem is that the slideToggle is triggered on all li elements. So if I click on a li > a element the file is downloaded but the ul is toggled also. I want to prevent toggle when I click on an element that has no direct ul child.
You could add the folder class to the level text instead of the whole li tag :
$('.folder').click(function(event) {
event.stopPropagation();
$(this).next('.sub-menu').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="Tree" class="sub-menu">
<li><span class="folder">First level</span>
<ul class="sub-menu">
<li>File 1.1</li>
<li><span class="folder">Second level</span>
<ul class="sub-menu">
<li>File 2.1</li>
<li>File 2.2</li>
<li><span class="folder">Tretji nivo</span>
<ul class="sub-menu">
<li>File 3.1</li>
<li>File 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
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.
I need to come as close to the example below, using only html. I can get the top level numbered list and the next level of bullet points, but can't figure out how to get the most-indented level of bullet points.
If it can be done, please tell or point me to correct syntax. Thanks!
I've had to use "_"s to get the formatting to look right in the preview.
Top level point
_• A subsidiary point
___• Sub point
_• Next subsid. point
Next top level point
if I understood your question, I think this is what you are looking for: jsfiddle
<ol>
<li>List item one</li>
<ul>
<li>Subitem 1</li>
<ul>
<li>Sub-Subitem 1</li>
</ul>
<li>Subitem 2</li>
</ul>
<li>List item two with subitems:</li>
</ol>
I guess this may help
<ol>
<li>Outer 1
<ul type="disc">
<li>Inner 1
<ul type="disc">
<li>Sub Inner 1 </li>
</ul>
</li>
<li>Inner 2</li>
</ul>
</li>
<li>Outer 2</li>
</ol>
try this
<ol>
<li>item 1</li>
<li>item 2
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3
<ul>
<li>sub-Subitem 1</li>
<li>sub-Subitem 2</li>
</ul>
</li>
</ul>
</li>
<li>item 3</li>
<ol>
<li>
Top level point
<ul style="list-style: disc;">
<li>
A subsidiary point
<ul style="list-style: disc;">
<li>Sub point</li>
</ul>
</li>
<li>Next subsid. point</li>
</ul>
</li>
<li>Next top level point</li>
How's this? Should be exactly what you described.
http://jsfiddle.net/hqtj1cvL/7/
Is this what you looking for??
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
<ul>
<li>one</li>
<li>two</li>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<li>three</li>
</ul>
<li>four</li>
</ol>
This is my scenario
(JsFiddle Link at the end of page)
I want to center the buttons "Home", "Categories", "Work", ecc ecc inside the same bar.
In other words, now is on left side; I want to center it.
<nav id="menu-wrap">
<ul id="menu">
<li>Home</li>
<li>
Categories
<ul>
<li>
CSS
<ul>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
</ul>
</li>
<li>
Graphic design
<ul>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
</ul>
</li>
<li>
Development tools
<ul>
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
</ul>
</li>
<li>
Web design
<ul>
<li>Item 41</li>
<li>Item 42</li>
<li>Item 43</li>
<li>Item 44</li>
</ul>
</li>
</ul>
</li>
<li>
Work
<ul>
<li>
Work 1
<ul>
<li>
Work 11
<ul>
<li>Work 111</li>
<li>Work 112</li>
<li>Work 113</li>
</ul>
</li>
<li>
Work 12
<ul>
<li>Work 121</li>
<li>Work 122</li>
<li>Work 123</li>
</ul>
</li>
<li>
Work 13
<ul>
<li>Work 131</li>
<li>Work 132</li>
<li>Work 133</li>
</ul>
</li>
</ul>
</li>
<li>
Work 2
<ul>
<li>
Work 21
<ul>
<li>Work 211</li>
<li>Work 212</li>
<li>Work 213</li>
</ul>
</li>
<li>
Work 22
<ul>
<li>Work 221</li>
<li>Work 222</li>
<li>Work 223</li>
</ul>
</li>
<li>
Work 23
<ul>
<li>Work 231</li>
<li>Work 232</li>
<li>Work 233</li>
</ul>
</li>
</ul>
</li>
<li>
Work 3
<ul>
<li>
Work 31
<ul>
<li>Work 311</li>
<li>Work 312</li>
<li>Work 313</li>
</ul>
</li>
<li>
Work 32
<ul>
<li>Work 321</li>
<li>Work 322</li>
<li>Work 323</li>
</ul>
</li>
<li>
Work 33
<ul>
<li>Work 331</li>
<li>Work 332</li>
<li>Work 333</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
http://jsfiddle.net/uHuHE/
Just assign text-align: center; to #menu ul a
Demo
Side Note: If you want to be over specific with the nested level text alignment, you can always use > selector so say for example you want to align the text in 1st drop down level, than you can simply use
ul#menu > li {
/* Targets main menu items */
}
ul#menu > li > ul > li > a {
/* Targets 1st level dropdown */
}
And so on...
As you commented, you wanted to center the main menu items, than use #menu-wrap in the place of #menu {} declaration, assign some fixed width to your #menu and than use margin: auto;
Demo 2
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>