I'm using a menu in wordpress, using wp-menu.
it generates my menu automaticaly. I can then customize my menu with css.
I'm trying to customize separatly my first level li, and all the sub level li.
for example, I've would like to apply a padding left of 20 px in my first level, and no padding in the sub level.
In this case, I've added this code to add content after the 3rd element of my first level menu, but it is added alors to all my sub level menu...
ul#menu-menu_top li:nth-child(3):after{content:" | ";color:yellow}
here is my CSS :
.menu-menu_top-container{background-color: #1C2336}
ul#menu-menu_top, ul#menu-menu_top ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu-menu_top li, ul#menu-menu_top ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
ul#menu-menu_top li:nth-child(3):after{content:" | ";color:yellow}
/*Link Appearance*/
ul#menu-menu_top li a {
text-decoration: none;
color: #fff;
padding: 5px;
display:inline-block;
padding-left: 20px;
}
ul#menu-menu_top li {
position: relative;
}
ul#menu-menu_top li ul.sub-menu {
display:none;
position: absolute;
left: 0;
width: 100px;
}
ul#menu-menu_top li ul.sub-menu li a{background-color: white;color:#1C2336;width:300px;}
ul#menu-menu_top li ul.sub-menu li a:hover{background-color: #1C2336;color: white}
ul#menu-menu_top li:hover ul.sub-menu {
display:block;
}
and a jsfiddle with my html :
http://jsfiddle.net/JpqNs/
can anybody help me with this ?
thanks a lot
This can be simply solved by using the > CSS selector. For example, if you had the following code:
<ul class="layer1">
<li>
Link
</li>
<li>
Link
</li>
<li>
<ul class="layer2">
<li>
Link
</li>
<li>
Link
</li>
</ul>
</li>
</ul>
You can use the CSS .layer1>li{YourStylesHere} to only affect the li elements that are direct children of your layer1 <ul>. This will not affect children of children, such as the <li> elements of your layer2 <ul>
Related
This question already has answers here:
CSS multiple selectors without comma
(2 answers)
CSS Sibling Selector w/ Hover
(4 answers)
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed 4 years ago.
I m trying to get my head around CSS.
I found a navigation menu that I would like to use but some things aren't working yet and there are a lot of things that confuse me.
is there a reason why li is two times in this part of the code ?
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
and this part I don't understand at all.
does this mean hover state for only a selector or does it mean hover state for ul, li and a selectors ?
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
I have been following the css tutorial from w3schools but I didn't see anything that explains the things I don't understand.
Full code is here
/*horizontal navigation style*/
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
li ul li {
display: block;
float: none;
}
It means it will target all the <li> elements which are inside li ul..The css are always applied to the last selector in the expression. See example below
Stack Snippet
li {
color: blue;
}
li ul li {
color: red;
}
<ul>
<li>Menu
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
</ul>
ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
Here you are applying same styling to two elements using ,(comma) separator...
1: using + i.e adjacent sibling selector...it separates two selectors and matches the second element only if it immediately follows the first element, means here <a> and .hidden sholud be both adjacent elements.
2: is .hidden:hover means it will work only when you hover only .hidden element.
.hidden {
display: none;
}
ul li a:hover+.hidden {
display: inline-block;
background: red;
}
<ul>
<li><a>Hover Here</a><span class="hidden">hidden</span></li>
</ul>
Isn't that hard to understand, just see it as 'items' that are separated by white spaces ' ', it means, that each word separated by a space, it's an item. Then, see that the first item is the 'parent' item, and it's immediately right item is it's child (or inner item), and so on.
So, in your first example:
li ul li {
display: block;
float: none;
}
you have li, then ul, and then li again, it means that it is looking for all li tags inside an ul tag, which it is inside an il tag itself (reading from right to left). It would be something like:
<li>
<ul>
<li>this is the selected item</li>
<li>this is the selected item</li>
<li>this is the selected item</li>
</ul>
</li>
For the later case, it's the same, the only difference is the use of subclasses selectors (like hover), and the comma. When using the comma it means that you're going to add a new group of selectors, it means that the selectors separated by comma aren't in any way related between them. So you have two groups:
ul li a:hover + .hidden
and
.hidden:hover
the first one means "select all the items with .hidden class, that are immediately children(+) of an 'a' tag which is being hovered, and this 'a' tag must be inside a li tag, and this later inside a ul tag"
it would be something like:
<ul>
<li>
<a>
<span class="hidden" >this part is selected if mouse hovers</span>
<span class="hidden" >this don't cause it's not an immediate child </span>
<a>
</li>
</ul>
And finally the second case it's simpler, it says (remember, read from right to left) "select all items being hovered by mouse and with hidden class". If we use the above example:
<ul>
<li>
<a>
<span class="hidden" >this part is selected if mouse hovers</span>
<span class="hidden" >this part is selected TOO if mouse hovers </span>
<a>
</li>
<li class="hidden">
this part is selected TOO if mouse hovers
</li>
</ul>
Hope I explained well myself
li ul li {
display: block;
float: none;
}
this code means there is two list one of them includes the other
first, li is the parent and the term 'ul li' is the sublist from it
the first li is the basic menu and the other is the dropdown
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
this code means there are two cases of hover
once when hovering on "ul li a" which is part of a list
and other on his siblings '.hidden' which refer to it here by using "+" assignment
I am having trouble with a pop-out menu behaving different in Chrome than in IE or Firefox.
Here is the HTML
<body>
<ul>
<li>Level One
<ul>
<li>Level Two Item One</li>
<li>Level Two Item Two
<ul>
<li>Level Three</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
Here is the css
ul {
padding: 0px;
list-style-type: none;
}
li {
background-color: blue;
}
a:link {
text-decoration:none;
color: #0000ff;
margin: 5px 0px 5px 0px;
background-color: cyan;
display: inline-block;
width: 200px;
}
li {
position: relative;
}
li > ul {
display: none;
}
li:hover > ul, li.sfhover > ul {
left 100%;
top 0;
position: absolute;
display: inline-block;
}
li:hover > ul li, li.sfhover > ul li {
background-color: #33ff33;
width: 200px;
position: relative;
}
In Firefox and IE Level Three pops out to the right of Level Two Item Two. In Chrome Level Three pops out below Level Two Item Two.
I know it has something to do with making the link a block element, but I want the link to display as an inline-block. Also, I cannot change the HTML. It is coming from a CMS (I have simplified it to illustrate the problem)
Any suggestions would be appreciated.
You've got a couple of colons missing from your CSS, specifically this rule: li:hover > ul, li.sfhover > ul
left 100%; should beleft:100%; and top 0; should be top:0;
I'm a relative newbie and I'm having trouble following the css for my nav. I need to do 2 things:
1) run my sub menu inline
2) hide my sub-sub nav, and show it inline as well.
Here is the test site: http://gbetza.mydomain.com/webservice2/test/Basso56/test/home.html
Here is the CSS: http://gbetza.mydomain.com/webservice2/test/Basso56/test/css/style%20-%20Copy.css
I'm having trouble understanding which class I need to adjust as well as how.
Thank you
Copy + Paste from a similar answer of mine.
I have created a really simple implementation of this. It is barebones so that you can get a real easy look at the basic concept.
In the fiddle here: http://jsfiddle.net/WS3QQ/2/
HTML - Note how the sub-menus are nested
<div id="nav">
<ul>
<li>Top Menu
<ul>
<li>Sub-Menu</li>
<li>Sub-Menu</li>
<li>Sub-Menu</li>
</ul>
</li>
<li>Top Menu</li>
<li>Top Menu</li>
<li>Top Menu</li>
</ul>
</div>
CSS - note how you can easily target the sub-menus (#nav li li). By default the sub-menu li is hidden (display:none). When the li is hovered over, the sub menu li is shown (display:block).
#nav ul { list-style-type: none; margin: 0; padding: 0; }
#nav li { float: left; }
#nav li li { clear: left; display: none; }
#nav li:hover li { display: block; }
#nav li:hover a { background: #111; }
#nav li a { background: #333; padding: 10px; display: block; color: #FFF; font-weight: bold; text-decoration: none; }
#nav li a:hover { background: #3914AF; }
I'm new to CSS and I'm trying to make a menu where the sub-list is only visible (and takes up space) on hover-over.
I've found the visibility:collapse; property, but that only masks the sub-list and leaves a big gaping gap in my vertical menu.
Here's what I've got so far, but I'm not sure how to implement the expandable sub-menu on hover over:
CSS:
nav a {
text-decoration: none;
color: white;
font-family: 'Roboto', sans-serif;
}
nav ul {
list-style-type: none;
}
nav ul li ul {
visibility: collapse;
}
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gear
<ul>
<li>P1</li>
<li><a href="p2.html">P2>/a></li>
<li><a href="p3.html">P3/a></li>
<li>P4</li>
<li>P5</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
Any help you can offer is much appreciated
You can use Pseduo-selectors to target the sub-list when you hover over the parent list.
Here's the Fiddle
All you need is this:
nav ul {
position:relative;
list-style-type: none;
background-color:#eaeaea;
}
nav ul li ul {
position:absolute;
display:none;
left:60px;
background-color:#CCC;
}
nav ul li:hover ul {
display:block;
}
This targets the sublist when the parent is hovered over, and overrides the display:none; command
HTML CODE:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gear
<ul>
<li>P1</li>
<li>P2</li>
<li>P3</li>
<li>P4</li>
<li>P5</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
CSS CODE:
nav a {
text-decoration: none;
color: white;
font-family: 'Roboto', sans-serif;
}
nav ul {
list-style-type: none;
}
nav a{
color:#000000;
}
nav ul li >ul {
display: none;
}
nav ul li:hover >ul {
display:block;
}
JSFIDDLE DEMO
Instead of using visibility: collapse; use display:none property because once you use visibility property there a space exist always.
you should try like this.
nav ul li >ul {
display:none;
}
nav ul li:hover >ul {
display:block;
}
A working Demo http://jsbin.com/xivogawu/1/edit
The visibility property only hides an element without changing the layout (i.e. leaving gaps like you've noticed). Also, the collapse value only effects table rows and columns.
The best way to achieve your goal is to use the display property; try this instead:
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
}
I tried solving this using some tips from this site but it doesn't seem to work for me. I have a website http://apartmanimikzaton.com/paintball/index.php, and I want to create a drop down menu like from the navigation.
EDIT: I didn't add it right now, but the thing I want to get is drop down menu text on hover.
This is my navigaton:
<ul class="navigation">
<li id="navigation-1"> O nama </li>
<li id="navigation-2"> Oprema </li>
<li id="navigation-3"> Tereni
<ul>
<li> Lokacija 1 </li>
<li> Lokacija 2 </li>
</ul>
</li>
<li id="navigation-4"> Galerija </li>
<li id="navigation-5"> Cjenik </li>
<li id="navigation-6"> O Paintballu </li>
<li id="navigation-7"> Teamovi </li>
<li id="navigation-8"> Webshop </li>
</ul>
And this is my css:
.navigation {background: url(images/layout/navigation.jpg) no-repeat; width: 980px; height: 57px; margin: 0 0 10px 0; padding: 0;}
.navigation li, .navigation a {height: 57px; display: block;}
.navigation li {float: left; text-indent: -9999em; position: relative;}
.navigation ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display:none; /* hide it */
}
.navigation li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
I'm doing something wrong so any tips would be appreciated.
I took the time to analyze your code, and here's what I can help you with for now.
First of all, insert these styles into your CSS:
ul.navigation li ul{
background: none repeat scroll 0 0 #000000;
display:none;
padding: 0;
position: absolute;
top: 57px;
width: 117px;
z-index: 6;
}
On the following styles:
.navigation li {
float: left;
position: relative;
text-indent: -9999em;
width: 100%;
}
The text-indent: -9999em; is affecting the text of the drop down menu you want to insert. I suggest you remove it. If you don't wish to display the text over your menu icons, you can simply do it like this on your link:
I don't think this approach will work:
.navigation li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Try this instead and see if it works:
.navigation li:hover ul{
display:block;
}
That should at least help you a bit, can't really tell if that's what you are intending to do. Give a response if you manage to accomplish what you wanted.
Cheers,
Artur Balestro
Remove this:
.navigation li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
And Add this
.navigation li:hover ul{ /* show it when mouse is over the parent list item */
display:block;
}
There are some unnecessary styles in there that need cleaning up, but if you're wanting a quick fix:
.navigation > li:hover > ul,
.navigation > li:hover > ul > li,
.navigation > li:hover > ul > li > a {
text-indent: 0;
display: block;
z-index: 999;
background: #fff;
}