I have the following HTML structure:
<ul class="container">
<li>
<ul class="submenu">
<li>Item A</li>
<li>Item B</li>
</ul>
</li>
</ul>
Is it possible, using CSS, change the backgroung position of "option" when the mouse is over "submenu"?
I saw the CSS Referente and i tried to use ">", "+" and "~", but it doesn't work. I don't know if i am using incorrectly or if it isn't possible.
Can anybody help me please?
EDIT 1
Here is the CSS that isn't working:
a.option~ul.submenu:hover {
background-position:0 -48px;
}
According CSS Referente, in my case, the "~" selects every "ul" element that are preceded by a "a" element, but isn't working for my code.
If you could put the "option" AFTER the UL, then it will work:
<ul class="container">
<li>
<ul class="submenu">
<li>Item A</li>
<li>Item B</li>
</ul>
</li>
</ul>
And this CSS:
.submenu:hover + .option {
background-position: -20px -20px;
}
In plain english this reads: When hovering over .submenu, change the background position of the .option which comes immediately AFTER .submenu. Hope that helps.
.submenu:hover ~ .option {
background-position: -20px -20px;
}
This is the same thing as the "+" selector, except the .option does not have to come immediately behind the .submenu. For example, the "+" won't work for the following markup, but the "~" will work.
<ul class="container">
<li>
<ul class="submenu">
<li>Item A</li>
<li>Item B</li>
</ul>
<span>Some other element</span>
</li>
</ul>
The only way to get close to what you are wanting with your html structure is to put a :hover on the li. Something like:
.container > li:hover > .option {
background-position: 0 0;
}
See this fiddle which doesn't change background-position, but color. When hovering over .submenu there will also be a hover on the parent li.
I don't think this is possible using css since .option is not a child of submenu
Related
I'm trying to use :not() to ignore the .current class in the first list item.
HTML:
<ul>
<li class="current">Home</li>
<li><a href="#">Page 2</a</li>
<li>Page 3</li>
</ul>
CSS:
ul li a:not(.current){color:red}
I can't get the :not() to ignore the .current class.
I have also tried:
ul li a:not(.current a){color:red}
Fiddle
the :not applies to element in use, so apply to li which is using current in this case
plus, not sure if was a typo, but in your second li, the a was missing a < in closing tag
ul li:not(.current) a {
color:red
}
<ul>
<li class="current">Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
Your class is on the li element in your html so:
ul li:not(.current) a { color: red; }
should work.
The question pretty much explains it but I have list items I want to put a simple diamond icon before them but when I try to use ::before it ends up putting the image above instead of the same line and I can't really seem to find out how to put it right before the list icon on the same line.
Like I said the image is just a small diamond, its 5px by 5px
.list-menu::before {
content: url('../images/menu-icons/image-before.png');
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
There's no need to use the ::before pseudo-element here at all. You can just use a background image:
.list-menu {
background-image: url('http://placehold.it/16x16');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
Well, list-style-image is made for that.
Supported since IE 4.0. That should be enough I guess.
ul {
list-style-image: url('http://placehold.it/12x12');
}
<ul>
<li> Text content </li>
<li> Text content </li>
<li> Text content </li>
</ul>
Answer 2022
Nowadays you can use ::marker pseudo element
li::marker {
content: ' 🤖 '
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
I have a menu like so:
<ul class="ipro_menu">
<li>Home</li>
<li class="active-parent">Menu Item 1
<ul class="sub-menu">
<li>Subitem 1</li>
<li class="active">Subitem 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul>
The current page automatically gets the class active and if it is in a ul under the main ul (submenu), then the main ul element will get the class active-parent.
So, in the above example, we would be viewing the "Subitem 2" page, so "Menu Item 1" is given the class active-parent.
I am trying to change the font color of the active-parent ONLY- not all the submenu elements. Here's what I have:
ul.ipro_menu li.active-parent a {
color: #FF0000;
}
The problem is that this is changing not only the active-parent element, but all of the li's in the sub-menu as well.
How do I change this to only change the font color of the specific element marked active-parent?
That behavior is expected with CSS. The only way to override that style for children would be to use a separate (and more specific) style for those elements:
ul.ipro_menu li.active-parent ul.sub-menu li a {
color:#000;
}
Try putting the active-parent class on the HREF:
http://jsfiddle.net/RAkuc/
<ul class="ipro_menu">
<li>Home</li>
<li><a class="active-parent" href="/menu-item-1/">Menu Item 1</a>
<ul class="sub-menu">
<li>Subitem 1</li>
<li class="active">Subitem 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul> ​
ul.ipro_menu a.active-parent {
color: #FF0000;
}​
Use the direct children selector:
ul.ipro_menu li.active-parent > a {
color: #FF0000;
}
this will only affect direct descendants of your li element.
I am trying to get my first menu to work. I got the basics off of CSS Menu without javascript . I am trying to make it as simple as possible. I got to look close to what I want it to look (Not exactly what I REALLY want it to look like):
http://jsfiddle.net/EjXgU/2/
The main problem is submenus. They stack one below the other instead to the right of the parent menu. Also, the first level of submenus do not stack right below the line on the main menu, but within it.
Another problem I was able to notice, I want to add an rgba background-color (transparency). However, for every submenu level, the transparency changes.
I also accept any css3 tips to make it look "flashy" and fancy =)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title: css-menu-without-javascript</title>
</head>
<body>
<nav>
<ul id="menu">
<li>Home</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2 -->
<ul class="submenu">
<li>Sub-submenu 1</li>
<li>Sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4 -->
<ul class="submenu">
<li>Sub-submenu 3</li>
<li>Sub-submenu 4 -->
<ul class="submenu">
<li>Sub-sub-submenu 1</li>
<li>Sub-sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
</ul>
</nav>
</body>
</html>
CSS:
/*https://stackoverflow.com/questions/4873604/css-menu-without-javascript*/
#menu li>ul { display: none; }
#menu li:hover>ul { display: block; }
/*End of Nathan MacInnes' code*/
nav { position: relative; }
#menu> li { float: left; padding:10px; border: 1px ridge #cccccc;}
#menu a {
text-decoration:none;
font-size: 20px;
color:#191919;
padding:10px;
}
.submenu { background-color: rgba( 0,0,0,0.5 ); }
If you're wanting CSS-only drop-down menus, then check out Son of Suckerfish. It's pretty much the de facto way of achieving such.
There is a bit on using JavaScript to get around earlier version of Internet Explorer's lack of support for pseudo elements, but I think this is IE7 and below, so can probably be dropped, depending on what level of support you're wanting to have for older browsers such as IE < 7. Other browsers (Firefox, Chrome, Safari, Opera etc) will display the menu and function just fine with the CSS only.
You could try
.submenu { background-color: rgba( 0,0,0,0.25 );
margin-left: 25px;}
The transparency value is additive — a submenu within a submenu gets that added twice, so a second submenu will be less transparent. Starting with a lower value allows that to be useful.
Adding the margin displaces the text to the right, and I rather like the way each submenu "embraces" its own children.
http://jsfiddle.net/EjXgU/3/
I want to create a CSS navigation with submenus that appear when the heading tab is clicked. Here's example HTML of how I'd like to see it work:
<ul id="menu">
<li id="nav-1">Home</li>
<li id="nav-2">Menu 1
<ul id="subnav-2">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li id="nav-3">Menu 2
<ul id="subnav-3">
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
</li>
<li id="nav-4">Other tab without submenu
</li>
</ul>
I can't seem to find anything online to make this work. Any ideas?
If you don't mind using libraries I would recommend using bootstrap. It makes really easy creating menus with drop-down submenus and it comes with a default style that is quite neat. You should have a look at this:
http://twitter.github.com/bootstrap/javascript.html#dropdowns
If you need to do it on click, you'll need javascript. If you're ok with doing it on hover, you can do this:
#menu ul{
dispaly: none;
}
#menu > li:hover ul{
display: block;
}
Caveats: this will only work in IE7+. You'll also still need to position the dropdowns appropriately (absolute positioning, most likely).
Edit: Whoops! You said "click", not "hover". Sorry. I'll just leave this here in case it helps someone else.
I have an example of four techniques for pure CSS hierarchical menus from semantic markup here:
http://phrogz.net/JS/ul2menu/purecss_testsuite.html
Here's an example of a single technique:
http://jsfiddle.net/FX4Dz/1/
<nav><ul>
<li>Header 1<ul>
<li class="sub">Subhead 1.1<ul>
<li>Subhead 1.1.1</li>
<li>Subhead 1.1.2</li>
</ul></li>
<li>Subhead 1.2</li>
<li>Subhead 1.3</li>
</ul></li>
<li>Header 2<ul>
<li>Subhead 2.1</li>
<li class="sub">Subhead 2.2<ul>
<li>Subhead 2.2.1</li>
</ul></li>
</ul></li>
</ul></nav>​
nav li {
display:inline-block;
padding:0 0.4em;
height:1.4em; line-height:1.4em;
position:relative;
}
nav li ul { display:none }
nav li li { display:block; width:8em }
nav li:hover > ul {
display:block;
position:absolute;
top:1.4em; left:-1px; /* align with respect to horizontal row */
width:8em; z-index:2
}
nav li li:hover ul {
left:8em; top:-1px /* subnav menus align next to their menu item */
}
The Swimbi app generates rather clean CSS code of drop down menu. You can use the app or just copy the CSS from the demo page http://f-source.com/swimbi/demo/?menu=Apple_Blue%20Sea
http://css3menu.com/
Download this and make yourself one, then go through the code, edit, and learn