i tried making a simple css dropdown menu which is not working as expected.
the dropdown should appear when i hover the pointer on "menu1" .here is the link to the fiddle
. Moreover i am bit frustrated with this piece of css code(i think this should be the code which will give me the desired output but why it is not working)
#nav ul li:hover ul
however if i replace it with
#nav ul:hover ul
it works but not as expected.
Just add > in your code as follows:
#nav ul li:hover ul
Change into:
#nav ul > li:hover ul
When you would like to create sub menu, the structure should be like this:
<li>parent-menu</li>
<li>parent-dropdown-menu
<ul>
<li>........</li> <!--child-->
</ul>
</li>
See the little changes here: DEMO
You need to put the sub menus inside the parent li:
<div id="nav">
<ul>
<li>menu0</li>
<li class="main">
menu1
<ul>
<li class="sub">menu2</li>
</ul>
</li>
</ul>
</div>
http://jsfiddle.net/F3Qg3/39/
Related
In my css file I have
.myclass > ul > li > a {
display:inline;
list-style-type:none;
}
both this style properties display and list-style-type are not working within "a" tag. However they are working if placed within "li" which does not serve the purpose because I want links which are aligned horizontally. Please advise what can be done.
<div class="myclass">
<ul>
<li>About Us </li>
<li>About Us </li>
<li>About Us </li>
</ul>
</div>
It looks like you're targeting the wrong elements here - essentially <a> has a list-style-type of none and is inline already anyway, so you're not seeing anything happen. list-style-type is something that will affect the <li> rather than the <a>:
.myclass > ul > li {
display: inline;
list-style-type: none;
}
To help make this a little clearer, you could also try adding a property that would have a visible impact on your <a> elements, like color:
.myclass > ul > li > a {
display:inline;
list-style-type:none;
color: hotpink;
}
Then you'll see that your selector was working - it just wasn't having any impact.
How can I style only the top level li's from this example list?
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
ul.upper > li {
color:red;
}
This styles all li's which I understand because the recursive UL is inside a first level list item. Is there a simple way to style only the top level li's though? Maybe using ":not" in some way?
Edit: I realize you can overwrite the style below it using color:initial or by adding another color(and other ways) but I was wondering if there was a way to ONLY select the top level li's nicely so another style isn't needed.
So, your li are inheriting color from their ancestors, so you need to add color:initial, or color:black to override that
ul.upper > li {
color: red;
}
li {
color: initial;
}
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
You want the child combinator, ">"
.upper > li
You can define the deeply nested UL's list-items like this:
ul > li {
color:red;
}
ul ul > li {
color: #000;
}
So this can work throughout your page to identify any top-level list-items versus second-level list-items, regardless of class name. "ul ul" in CSS means "ul that is inside another ul"
Working example: https://jsfiddle.net/2Lyvp2bm/2
(I'm new, how do I add a code snippet to my answer?)
Is there any way to style this list using pure css so all elements above my cursor will be highlighted ?
<ul>
<li>first</li>
<ul>
<li>first.first</li>
<ul>
<li>first.first.first</li>
<li>second.second.second</li>
<li>third.third.third</li>
</ul>
<li>second.second</li>
<li>third.third</li>
</ul>
<li>second</li>
<li>third</li>
</ul>
I want to style this list this way: When I hover cursor over "second" everything will be highlighted expect third. When i go over third.third everything will be highlighted expect second and third etc...
I was able to achieve something very similar as described here
css :hover effect on current and previous elements
however I want something slightly different
Thanks
We can't go back, but we can go forward with ~, so we can highlight everything and turn off highlight for everything after current element.
ul li:hover {
background: red;
}
ul li:hover ~ li,
ul li:hover ~ li li {
background: none;
}
JSFiddle
I'm having a list of images and below the name of the person belonging to the image as an UL. When hovering on the name then a sentence to belonging to the person will be displayed.
So it looks like this
<ul>
<li>
Name
<ul>
<li></li>
<li class="slogan1">some kind of sentence</li>
</ul>
</li>
<li>
Name 2
<ul>
<li></li>
<li class="slogan1">some kind of sentence</li>
</ul>
</li>
</ul>
That works fine so far. I want now that the child UL Element of the first LI Element is being displayed initally when the page is opened and not only on the hover event. I was working around with :first-child but didn't had any success.
The current relevant CSS part looks as follows.
ul li ul{
display: none;}
ul li:hover ul{
display: block;}
ul li:hover ul li a{
background: #009EE3;
height:10px;}
ul li:hover ul li.slogan1 a{
background: #009EE3;
height:45px;
width:958px;
position:absolute;
left:0px;
padding-top:5px;
line-height:130%;}
For additional reference and to view the current implementation Link to page
Any help, tipps, hints are highly appreciated...many thanks...
first-child was the right idea, just add:
ul li:first-child ul {
display:block;
}
JSFiddle
I'm experimenting here with Pseudo-classes and trying to something I would usually do with a style class. I have a unordered list with multiple sub unordered lists and so on.
I want to only make sure the first level of li tags are been set to float left.
Here is my html
<body>
<div id="MainMenu">
<ul id="nav">
<li>Home</li>
<li>
About
<ul>
<li>The Product</li>
<li>Meet The Team</li>
</ul>
</li>
<li>
Contact
<ul>
<li>
Business Hours
<ul>
<li>Week Days</li>
<li>Weekends</li>
</ul>
</li>
<li>Directions</li>
</ul>
</li>
</ul>
</div>
</body>
I tried a style like this.
body {
font: 13px/160% Trebuchet MS,Arial,Helvetica,Sans-Serif;
margin:0;
padding:0
}
#nav{
list-style:none;
font-weight:bold;
width:100%;
}
#nav li{
float:left;
margin-right:40px;
position:relative;
}
The issue with this is, its saying all li descendants of id nav get set to float left. Now I only want the first level li tags to float to left and all the other level li tags to be ignored. Please don't answer by saying use a class name for all the top level li tags. I already am aware I could approach it like this. What I'm after is to learn some of the Pseudo-classes and how they may help me in this approach.
For example I need something that is like #nav li:first-child{ .... } But this is only going to give me the first li in the top ul list. I want all the top level children of the ul list and ignore the second level li tags and so on. Is there a Pseudo-classes that can accomplish this.
Thanks
you can use #nav > li this matches all elements that are the immediate li children of #nav.
More info here and here.
A demo: http://jsfiddle.net/9M6p2/
A good approach would be:
#nav li { float: left; }
#nav li li { float: none; }
You could use #nav li like you already do and #nav li ul or #nav li ul li to style the second level LI-Elements.