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
Related
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/
I'm learning how to build pure CSS drop-down menus, and I'm seeing a weird issue. I've searched and haven't found anything useful.
If you hover over the Blog link, you'll see "Case Studies" split in half with, "Case" on one line and "Studies" on the next line.
I' ve checked my HTML and it looks fine. It's been a long day so maybe I'm missing something obvious. :o
I have this so far:
<nav class="p-nav">
<ul>
<li>About</li>
<li>Showcase</li>
<li>Services</li>
<li>Blog
<ul>
<li>Case Studies</li>
<li>Tutorials
<ul>
<li>CSS</li>
<li>Javascript</li>
<li>Playground</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
#import url(http://fonts.googleapis.com/css?family=Lato:300, 400);
.p-nav li {
position: relative;
}
.p-nav ul ul {
display: none;
position: absolute;
top: 100%;
}
.p-nav ul li {
float: left;
}
.p-nav a {
display: block;
font: 300 100%/70px"Lato", sans-serif;
padding: 0 30px;
}
.p-nav ul li:hover > ul {
display: block;
}
Here is the link to the code: http://jsfiddle.net/6CwYh/20/
Can anyone explain why it's doing that, and how I can fix it?
TIA.
Cause of space "problems" it places those two words on two lines.
If you don't like that you can add white-space:nowrap;to the <li>so it want wrap, have a look at the fiddle: http://jsfiddle.net/6CwYh/21/
.p-nav li {
position: relative;
white-space:nowrap;
}
There is simply not enough space for the text to fit, which is why it is wrapping. Give the 2nd level ul a width, like 350px.
http://jsfiddle.net/6CwYh/24/
Also, make sure you use direct descendant operators (>) I've added some in the above link.
If I target #something ul li That actually will target all uls and all lis in #something even if they're nested.
This was causing the items in the dropdowns to float, which caused further problems.
/* Better selectors */
#something > ul {}
#something > ul > li {}
#something > ul > li > ul {}
#something > ul > li > ul > li {}
make it wider:
nav ul li{
width:200px;
}
and its fixed
I want to change color of a li element on hover,
<ul id="sitemap">
<li>a
<ul>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</li>
</ul>
here is the css code :
#sitemap li:hover{
background:#eee;
}
When I hover on any child li of a i.e b,c.. f it also changes background color of parent(a). How can I change the bg-color of only current li element on hover, there can be li at 3rd level also so what could be the general solution..
Simply add ul to your selector, and it will be fine
#sitemap ul li a:hover {
background:#eee;
}
The reason it wasn't working before is because it was targeting the top level li, so everything below it was apart of that li. Therefore, when the submenu was hovered, all of the block was highlighted
Fiddle
Add > into your css so that it has to be a direct descendant.
#sitemap ul > li > a:hover {
background:#eee;
}
For more information check out http://www.w3.org/TR/CSS2/selector.html#child-selectors
i need only first 'li' element with gray background color. But first 'li' of each 'ul li' my background color gray is applying. Background color should apply only for the first li(My Example).
http://jsfiddle.net/fX9Gy/
Can anybody please solve the prob. Thanks
Give class to your parent UL. Write like this:
HTML
<ul class="parent">
<li>one</li>
<li>one
<ul>
<li>two</li>
<li>two</li>
<li>two</li>
</ul>
</li>
<li>one</li>
</ul>
CSS
.parent > li:first-child{background-color:#ccc}
Check this for more http://jsfiddle.net/fX9Gy/27/
Add this on the end of your css:
ul li ul li:first-child{background-color:transparent}
Or give the element an id:
<li id="first">one</li>
#first {background-color:#ccc}
** EDIT **
You could try this css:
ul li{color:red}
ul li > ul li{color:blue}
li {background-color:#ccc}
ul ul li {background-color:transparent}
li + li {background-color:transparent}
Either make the selector more specific:
ul li ul li:first-child{background-color:transparent}
Or add a class to the UL And select the first child there:
ul.nested li:first-child{background-color: #fff;}
... <li>one
<ul class="nested">
<li>two</li>
...
http://jsfiddle.net/Kyle_Sevenoaks/fX9Gy/15/
hi please see the updated css i hope this will work
ul li{color:red}
ul li > ul li{color:blue}
ul li:first-child{background-color:#ccc}
ul li ul li:first-child {background:none;}
http://jsfiddle.net/fX9Gy/23/
You can try this.
li {color:gray}
ul ul li {color:red}
li + li {color:red}
This will work in browsers down to ie 7 aswell
If you don't want to add class or id something, then you have to use jquery. but you need to add class name for ul.
but without jquery, using CSS you need to add one more line for ul which is inside li,
ul li ul li:first-child{ background-color:white; }
Updated fiddle. Added a class to parent ul
http://jsfiddle.net/fX9Gy/26/
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.