I am trying to hide an element until its previous sibling is hovered over, in css (or scss rather), it looks like this:
.menu-container {
// style with flex etc...
& .menu-item-link {
// style the link...
&+.sub-menu-container {
display: none;
}
&:hover+.sub-menu-container {
display: block;
}
}
}
<ul class="menu-container">
<li class="menu-item-container">
<a class="menu-item-link">Ingredients</a>
<ul class="sub-menu-container">
<li class="sub-menu-item-container">
<a class="sub-menu-link">Fruits</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Vegetables</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Dairy</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Children</a>
</li>
</ul>
</li>
</ul>
How do I achieve this using tailwind?
You're not actually trying to target a sibling in your code, you're trying to target a child element. This is a very simple process when you just want to show a sub-menu dropdown.
Just add group to the hover trigger (.menu-item-link in your case) and group-hover:[some-display-class] to the child. This way the child will change it's display property when the parent element (or itself) is hovered.
You should change your title, also I'd recommend that you don't use Tailwind with class names like that. Please see extracting components for the recommended way to use Tailwind CSS. Of course, you are free to use it how you want but you're better off with plain old CSS if you want to use SCSS and classes like that.
Example with your structure:
<ul>
<li class="group">
<a>Ingredients</a>
<ul class="hidden group-hover:block">
<li>
<a>Fruits</a>
</li>
<li>
<a>Vegetables</a>
</li>
<li>
<a>Dairy</a>
</li>
<li>
<a>Children</a>
</li>
</ul>
</li>
</ul>
Example on Tailwind Play https://play.tailwindcss.com/dFc2zlmqDA
Related
So, i want to make an active links in navbar, but it's working only on "Pocetna" page, but not on others...this is what i've done:
<nav>
<ul>
<li class="active">Pocetna</li>
<li>Forum</li>
<li>Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
and this is in my style.css :
nav li.active{
color: #CCCCCC;
}
I'm using bootstrap...
Did you create a HTML-file for each of your navlinks?
If you did, please do the following:
1. Go to your 'Forum' HTML index file, and change the Navbar to:
<nav>
<ul>
<li>Pocetna</li>
<li class="active">Forum</li>
<li>Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
2. Then go to your 'Galerija' HTML index file, and change the Navbar to:
<nav>
<ul>
<li>Pocetna</li>
<li>Forum</li>
<li class="active">Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
Do you understand where I'm going with this? You only need to add the class="active" to your active HTML index file.
Don't touch the CSS unless you wish to change the active color of your Navbar links.
Okay so for Angular components the "restrict" and "replace" options are not present. I'm generally fine with this, but now I have the following code:
<ul class="dropdown-menu dropdown dropdown-menu-left"
aria-labelledby="dropdownMenu">
<some-component></some-component>
<li role="separator"
class="divider"></li>
<li><a> Block </a></li>
</ul>
where the <some-component></some-component> has a bunch of other <li> elements inside. But since the bootstrap css only works if the <li> is a direct child of the <ul>, the list-elements from some-component don't get styled. Any ideas what I could do as a workaround?
Situation, such a menu:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
When I hover "LANGUAGES" I need to show up the other :
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
Necessary to make it work on CSS, JQuery or without JavaScript. Here's a version does not work:
.hover_top_right_menu {
display: none;
}
It's a wrong line
.top_right_submenu: hover, hover_top_right_menu {
display: visible;
}
You have some typos in your css
by default the element .hover_top_right_menu should have display: none. When you hover the submenu then you change its display (with display: block).
.hover_top_right_menu {
display: none;
}
.top_right_submenu:hover .hover_top_right_menu {
display: block;
}
Anyway this css is based on the assumption that the language list is nested into .hover_top_right_menu element, e.g.:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
As a side notes:
Unless you need to have an action on click event, the link around "LANGUAGES" is not necessary for the example
you're using empty markup, probably for styling purpose only. If you need to have an icon just place it as a background of that list-item (or as content property of its :before pseudoelement)
I have an html menu listing that look like this:
<ul id="navlist" class="clearfix">
<li class="home"></li>
<li class="xo">About Us</li>
<li class="xoxo">People</li>
<li class="xoxoxo">Business</li>
<li class="xo">News</li>
<li class="xoxo">Careers</li>
<li class="xoxoxo">Gallery</li>
<li class="xi">Contact Us</li>
</ul>
My challenge is ensuring the CMSListMenu apply the different classes to each li.
The li could styled each by using Edit > Document Properties > Navigation tab provided in portal engine.
It exposed the css styling of each page li. You can set the link, mouseover and current page classes.
I want to select all li which not contains a tag in css:
ul.sf-menu li:not(a)
But looks like it is not working.
Need help
<ul class="sf-menu sf-js-enabled sf-shadow">
<li>
<a href="/ ">
</li>
<li> need to select this li because it is not contains a href
A
<ul style="visibility: visible; display: block">
<li>
<a href="/B-1">
</li>
<li>
B-2
</li>
</ul>
</li>
<li>
Two things
1) Your selector doesn't match the question you're asking. It currently selects every LI that is not an Anchor. This should be every LI on the page.
2) What you want can't be done with CSS right now. Your best bet would be to use some JavaScript to do this. For instance, the following jQuery would work.
$("ul.sf-menu li:not(:has(a))").doSomething()