if i have a list like this one:
<ul>
<li>
item name
<ul>
<li>
item name
</li>
<li>
item name
<ul>
<li>
item name
</li>
</ul>
</li>
</ul>
</li>
</ul>
And for example i want each "li" to display inline like its all one sentence... I need this for breadcrumbs...
I tried this:
ul li {
display: inline;
float: left;
}
But this wont work because the "ul" or "li" doesn't have a defined width so it goes under.
Any help is welcome,
Thanks!
This one works:
ul{display:inline;}
ul li{display:inline;}
ul li ul li{display:inline;}
The jsfiddle: http://jsfiddle.net/naveed_ahmad/QWshN/
Use ul ul li as the selector if you only want the nested ULs to be styled. You also probably don't need float: left.
Just having text inside of the <li> elements is making the text behave like a block-level element itself (effectively wrapping each set of text in a <p> tag). If you wrap the text in a <span>, for example, and make the span inline as well, you will get the desired result
Also, use ul, li, span as the selector instead of ul li
Edit:
In fact, if you just change your original CSS to:
ul, li {display: inline}
it will work perfectly.
You only want the outer ul to be a block level element, so to make all other elements inline elements, you can use:
/* both the inner ul's and the li's */
ul ul,
li
{
display:inline;
}
or, if you want to float them instead:
ul
{
overflow: hidden; /* make sure the uls wraps around their contents, mainly for outer ´ul´ */
}
ul ul,
li
{
float: left;
}
I think this is sexier:
ul, li {
display: inline-block
}
http://jsfiddle.net/jzVcE/
Related
How can i select the"Automobiles" text and the unordered list right after that.
Without changing the html code.
I tried selecting it with- nav ul li
also tried with- nav:first-child ul:first-child
<nav>
<ul>
<li>Automobiles
<ul>
<li>812Superfast</li>
<li>GTC4Lusso</li>
<li>488GTB</li>
<li>488Spider</li>
</ul>
</li>
</ul>
Just separately define them them:
nav ul li, nav ul li ul {
...
}
Just for information: If you are able to modify the html code, you should use classes within the elements.
So I have an unordered list like this
<ul>
<li>image.jpg</li>
<ul>
<li>name</li>
<li>description</li>
</ul>
</ul>
I want to have the image on the left side and the name and description(one below the other on the right side of the image. Is it possible to do this. I have tried setting the li > ul > li's to display block and the ul before that to a display of inline. Also have tried floats. Is there an easy way to do this?
Not sure if this is what you want, but try this in your css:
li, ul, ul ul {
float: left;
}
ul ul li {
float: none;
}
http://jsfiddle.net/Cf3EY/
I am trying to create a navigation menu with markup as follows:
<ul id="ul1">
<li>Link 1
**<div>**
<p>SOME STUFF</p>
<ul>
<li>Link 1.1<**div** class="innerdiv"></div></li>
<li>Link 1.2<**div** class="innerdiv"></div></li>
<li>Link 1.3<**div** class="innerdiv"></div></li>
<li>Link 1.4<**div** class="innerdiv"></div></li>
</ul>
</div>
</li>
.
.(WITH MORE <LI>'S OFC :))
.
</ul>
Now, I want to make the outer div visible when I hover on Link 1...This is easily done using CSS:
#navbar ul li div
{
min-width:500px;
min-height:130px;
background-color:#dfdfdf;
position:absolute;
left:0px;
top:32px;
visibility:hidden;
}
#navbar ul li:hover div
{
visibility:visible;
}
Next I want that inner div be visible only when I hover on inner links like link 1.1,1.2..
This is causing problems cause I'm using #(id)-selector taking the #navbar as base ID and this is causing the inner divs to inherit the css from outer div ...THAT IS TO SAY THAT WHEN I HOVER ON OUTER LINKS THE BEHAVIOUR OF THE INNER DIV CHANGE TOO WHICH I DON'T WANT...if u understand what I mean..
I WANT THAT OUTER DIV SHOULD BE VISIBLE WHEN I HOVER ON OUTER LINKS(LINK 1,2,3) AND INNER DIV BE VISIBLE WHEN I HOVER ON INNER LINKS(LINK 1.1,1.2,1.3)
SCREENSHOT OF THE NAVMENU
God this is confusing...
Kindly help in this respect by telling how to specifically select the inner div's or tell a workaround using JS or Jquery....currently I'm using the selectors
#navbar ul li div ul li div , and
#navbar ul li div ul li a:hover div
If your div is initially not displayed:
#navbar div {
display: none;
}
You can make them visible when the container LI is hovered:
#navbar li:hover > div {
display: block;
}
The > operator is used to select direct descendants, so here only the div elements that are immediate child nodes of the li that is currently being hovered will be made visible. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
I would just change the visibillity of the list item.
ul li ul li {
....
}
Furthermore i don't see your "navbar" id anywhere? Neither a ..
I am trying to make a drop down list by using nested Un ordered lists.
My case is i have an unordered list, which is having another unordered list inside of its li element. I had written hover for the first level li elements by using the child selector. My problem is while hovering the first level li element, the css for its hovering process is also get applied to its child li element. My question is why does the child selector selecting its descendants in my case..? and what should i do to avoid this in future.?
DEMO - Fiddle
Here is the solution below:
My question is why does the child selector selecting its descendants in my case..?
Because you have defined one part of the CSS by adding #ULHeaderMenuWrapperMenuCollection > li:hover
what should i do to avoid this in future.?
You have to protect the inheritance by adding #ULHeaderMenuWrapperMenuCollection > li:hover div ul li to your CSS. Here is the Working Solution.
#ULHeaderMenuWrapperMenuCollection > li:hover div ul li
{
color:black;
}
#ULHeaderMenuWrapperMenuCollection > li:hover div ul li:hover
{
color:orange;
}
Hope this helps.
Updated to fit to your original code
When you mouse is hover your sublist, it's still hover the main one.
I suggest you to put your <li> text in a <span> or a <a>, which makes your css simplest :
HTML
<ul id="ULHeaderMenuWrapperMenuCollection">
<li>
<span>Products</span>
<div id="DivProductsMenu">
<div id="DivProductsMenuUpper">
<ul>
<li><span>CIMS</span></li>
<li><span>VPRO</span></li>
<li><span>BIRIS</span></li>
</ul>
</div>
<div id="DivProductsMenuLower">
<ul>
<li><span>PATRON</span></li>
<li><span>DEAL</span></li>
<li><span>MEDIX</span></li>
</ul>
</div>
</div>
</li>
<li>
<span>Contact Us</span>
</li>
</ul>
CSS
#ULHeaderMenuWrapperMenuCollection li > span:hover {
color:orange;
}
JsFiddle
If I have a couple of bullet lits on a page and some lists contains normal text (no paragraph elements) and some contains links, is it possible to have no bullets on the links but bullets on the text items?
To remove all bullets I do:
#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li ,
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li,
#WebPartWPQ6 li {margin-left: -25px; list-style-type: none}
But if the item is a link I want to show the bullets. I tried with:
#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li ,
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li,
#WebPartWPQ6 li {margin-left: -25px;}
#WebPartWPQ1 li a ,#WebPartWPQ2 li a ,#WebPartWPQ3 li a ,
#WebPartWPQ4 li a,#WebPartWPQ5 li a,#WebPartWPQ6 li a,
#WebPartWPQ6 li a {margin-left: -25px; li ast-style-type: none}
Without success, any ideas?
You would have to resort to server-side preprocessing or Javascript. There is no way in CSS to style an element based on what its children elements are, or to change a parent's style from a child element's style declaration. Here's the W3 CSS2 Selector Reference and the CSS3 working draft Selector reference, and neither of them mention parent selectors.
While you can not change the styling of a list element based whatever element(s) it contains, there is a pure CSS workaround that achieves more or less the same result :
Set block as the display property of all of your list elements
Set list-item as the display property of your link elements, along with a valid value for list-style-position and list-style-type.
So instead of making your list items look like a list item when they contain a link, you're just making the links inside your list items behave like a list item.
Your bullet will have the same color as your link, but that's about the only difference between this approach and the approach you had in mind (which is impossible).
EXAMPLE CODE :
#WebPartWPQ1 li {
margin-left: -25px;
display: block;
}
#WebPartWPQ1 li a {
display: list-item;
list-style-position: inside;
list-style-type: disk;
}
<ul id="WebPartWPQ1">
<li>Item 1 (ordinary item)</li>
<li><span>Item 2 (wrapped in a "span" tag)</span></li>
<li>Item 2 (wrapped in an "a" tag)</li>
</ul>
THE FIDDLE :
http://jsfiddle.net/6kt8jhfo/5/