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 ..
Related
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 have a button that will be used as a part of a navigation bar.
What I need is when a user hovers over the button, the buttons text becomes hidden, and three different links appear inside the button.
The initial button itself shouldn't have a link attached to it, just the three options that appear after it is hovered over.
Hopefully this makes sense; Here is a fiddle which might make it clearer.
<ul class="ulmenu">
<li>Test</li>
</ul>
At its simplest, I'd suggest the following:
<ul id="nav">
<li>Navigation</li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
With the following CSS:
/* default display for all 'li' elements:
*/
#nav li {
display: inline-block;
}
/* hides the 'li' elements that follow an 'li' element,
hides the 'li:first-child' when the 'ul' is hovered:
*/
#nav li + li,
#nav:hover li:first-child {
display: none;
}
/* shows the 'li' elements that follow other 'li' elements,
when the 'ul' is hovered:
*/
#nav:hover li + li {
display: inline-block;
}
JS Fiddle demo.
Edited with regard to question left by Rygh2014, in comments below:
Would this work for a vertical menu as well? I take it I would just have to switch out the inline-block?
It's absolutely possible to have a vertical menu, simply switch from display: inline-block to display: list-item:
#nav,
#nav li {
list-style-type: none;
}
#nav li {
display: list-item;
}
#nav li + li,
#nav:hover li:first-child {
display: none;
}
#nav:hover li + li {
display: list-item;
}
JS Fiddle demo.
Note that I've also set the list-style-type property to none, as with any other display property there is no marker (under Chrome, at least), whereas with list-item the glyph is there by default and, if you don't want it you have to explicitly remove it.
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
I have a drop down menu that when I rollover a dropdown appears. The only problem is the background images of my main list also shows as the background of the submenu list.
Below is my css to assign the tab background on rollover. But I am assuming that since tech the user is still rolling over that <li> the tab background shows on all the sub <li>
CSS:
#main_menu ul li:hover a {
background: url(images/right_tab_bg.png) top right no-repeat;
color: #578ba0;
}
#main_menu ul li:hover a span {
background: url(images/left_tab_bg.png) top left no-repeat;
}
Is there a way to tell the above css to only effect the parent <a> or <span>?
Be more specific with your selectors via direct descendant selector (I am assuming that the ul that is the top level list is a direct descendant of whatever #main_menu is):
#main_menu > ul > li:hover > a /* select only the parent li's a */
#main_menu > ul > li li a /* select any child li's a, excluding the top level li */
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/