I have a menu. And it has a dropdown. I want the same size of the parent for the dropdown also.
My HTML
<ul>
<li class="noChild"><a href="#" class="" >MY ACCOUNTS</a></li>
<li class="noChild "><a href="#" >LIBRARY</a></li>
<li class="">OUR DEPOSIT OFFERS
<ul>
<li class="dropdownSizeDn">OFFERS 1 </li>
<li class="dropdownSizeDn">OFFERS 2</li>
<li class="dropdownSizeDn">OFFERS 3</li>
</ul>
<li class="noChild">LOGOUT</li>
</ul>
jQuery
jQuery("#menu1 li").hover(function(){
jQuery(this).find('ul:first')
.css({
visibility: "visible",
display: "none",
marginLeft:"0px",
paddingLeft:"0px"})
.show(200);
},function(){
jQuery(this).find('ul:first').css({visibility: "hidden"});
});
From the above code I need to set the same width of "OUR DEPOSIT OFFERS" for all its childern("OFFERS 1 ","OFFERS 2 ","OFFERS 3"). Here I can do it with Jquery. Like
jQuery('.dropdownSizeDn').css('width',widthLi + "px");
On hover of the corresponding parent. But I would like to set it by CSS itself. Is there any way for this? I dont prefer any css3 fix. It has to be compatible with older browsers.
EDIT
I cant hard code the width of each child
.This is My css jsfiddle
You can set the width of each child in the drop-down to be the same fixed width of the parent i.e. width: 120px.
Covering all the bases since I don't know your CSS:
ul li ul, ul li ul li, ul li ul li a {
width: 100%;
}
Related
https://codepen.io/arandomcodepenuser/pen/NWjYGwo
Ok, so I have this top navbar, and the problem is that I can't change the html only the styling, because I am using a Wordpress plugin, and this navbar has block elements on the navbar, and there's one of them that has a dropdown within the element and not below, and I can't use javascript to change this, I am wondering if it's possible for the dropdown embedded within the li element to push down the other elements on the navbar when it appears on hover.
Here's the html:
<div>
<ul class="top-bar__menu">
<li id="menu-item-265276" class=""><span>Find Us</span></li>
<li id="menu-item-280208" class="">
<span>About</span>
<ul class="sub-menu">
<li id="menu-item-268209" class=""><span>About Us</span></li>
<li id="menu-item-265276" class=""><span>Find Us</span></li>
<li id="menu-item-280209" class=""><span>Our Team</span></li>
</ul>
</li>
</ul>
</div>
Here's the css styling for the dropdown menu:
.sub-menu {
display: block;
}
.sub-menu li {
clear:both;
width: 100%;
}
ul.sub-menu {
display: inline;
background-color: #fff;
max-width: 100px;
}
I am currently trying to add arrow indicators on my navigation menu for items which have submenu options.
Currently I am using this CSS:
.mainNav li > a:after {
color: #444;
content: ' ▾';
}
But this adds a dropdown arrow to every <li> regardless of if there is a submenu or not. Is there a way with just CSS to only add this arrow to items that have sub-items?
Thanks!
No. CSS has no contains child selector. You'd probably be better to just add a class to the li element. For example:
<li class="has-child">
The Link
<ul class="child">
<li>Child 1</li>
</ul>
</li>
Your CSS selector would in turn look like:
.mainNav li.has-child > a:after {
color: #444;
content: ' ▾';
}
You could have jQuery add the class for you, if that's an option:
$('.mainNav li:has(ul)').addClass('has-child');
jsFiddle Demo
CSS has no contains child selector.
However it has various sibling selectors, only-child and not(:only-child)
Since you add indicator to the anchor, use following CSS
.mainNav li>a:not(:only-child):after {
color: #444;
content: ' ▾';
}
<div class="mainNav">
<li>
The item with child
<ul class="child">
<li>Child 1</li>
</ul>
</li>
<li>
No child item
</li>
</div>
Yes you can without any jQuery : https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/
We have horizontal 1st level and 2nd level navigations. When a 1st level li is hovered over, a second level ul is displayed horizontally above the first level ul.
How do we make the second level ul remain visible when the mouse leaves the first level li? Is this possible with CSS only..??
Here's the CSS:
ul.ebene1{display:inline;}
ul.ebene1 li{display:inline; list-style-type:none; margin-right:2%;}
ul.ebene2{display:none;}
ul.ebene1 li:hover ul.ebene2{display:block; position:fixed; bottom:6%; width:80%; font-size:0.9em;}
And the HTML:
<ul class="ebene1">
<li>NAV1
<ul class="ebene2">
<li>Nav2</li>
<li>Nav2</li>
</ul>
</li>
<li>NAV1</li>
<li>NAV1
<ul class="ebene2">
<li>Nav2</li>
<li>Nav2</li>
</ul>
</li>
<li>NAV1</li>
</ul>
You can't do that with only CSS. The :hover pseudo classes is triggered when you hover the element. So when leaving the element stops the hover effect.
You could use JQuery to show the submenu.
[EDIT]
A Jquery solution would be this:
HTML
<ul class="ebene1">
<li>NAV1
<ul class="ebene2">
<li>Nav1.1</li>
<li>Nav1.2</li>
</ul>
</li>
<li>NAV2</li>
<li>NAV3
<ul class="ebene2">
<li>Nav3.1</li>
<li>Nav3.2</li>
</ul>
</li>
<li>NAV4</li>
</ul>
CSS
ul.ebene1 {
display:inline;
}
ul.ebene1 li {
display:inline;
list-style-type:none;
margin-right:2%;
}
.ebene2 {
display:none;
position:fixed;
bottom:6%;
width:80%;
font-size:0.9em;
}
JQuery
(".ebene1 li").mouseover( function() {
if( $(this).children('ul').length > 0 ) // check if a ul exists in the li
{
$('.ebene2').hide(); // hide all submenus
$(this).find('ul').show(); // show this submenu
}
});
And a DEMO.
trying to select an adjacent's child element with CSS... not really sure how to
This is the HTML structure
<ul>
<li>
<a href="#">
<span class="icon"></span>
First level
</a>
<ul>
<li>
Second level
</li>
</ul>
</li>
</ul>
I want to say that there is a menu with multiple levels. When theres a UL existing within a LI then the needs to have a dropdown/expand icon... so I thought if I use the adjacent selector I can determine if this level has kids to expand and this is what I thought would work but didn't:
ul li a ~ ul .icon {
// doesnt work
}
ul li a .icon ~ ul {
// doesnt work
}
This works but I need to target the .icon
ul li a ~ ul {
// works
}
Cheers, Dom
Building upon my comment on your question. If you have control over how the HTML for the menu is generated, a workaround would be to add an extra class to each li-element that has a sub-menu. Like this:
<ul>
<li class="has-submenu">
<a href="#">
<span class="icon"></span>
First level
</a>
<ul>
<li>
Second level
</li>
</ul>
</li>
</ul>
Then you could use a selector like this:
.has-submenu .icon {
/* Do your stuff here */
}
ul is a child of li, not the anchor. So ul li ul .
If you want to select it as a sibling, then ul li a + ul
I'm using wordpress 3.2.1 and worked on the wp_nav_menu to get a customized "Top navigation menu" that looks like this:
<ul id="nav-list">
<li>HOME</li>
<li>THE ASSOCIATION</li>
<ul class="sub-menu">
<li>
<a>WHO WE ARE</a>
</li>
</ul>
<li>CONTACTS</li>
<li>PRODUCTS</li>
<ul class="sub-menu">
<li>
<a>SHOES</a>
</li>
<li>
<a>UMBRELLAS</a>
</li>
</ul>
</ul>
the css I have for the menu is:
#nav-list{
float:left;
margin-left:290px;
}
#nav-list li
{
display:inline ;
padding:4px 18px 4px 0 ;
}
.sub-menu
{
float:left;
display:none;
}
ul#nav-list li:hover ul.sub-menu
{
background:red;
position:absolute;
top:20px;
z-index:9999;
display: block;
}
The sub-menus are by default hidden but they display on their parent's hover.Everything works fine but on the parent's hover the sub-menu is absolutely posiitoned with left=0 and I want it to be right under the parent button!How can I achieve that?
thanks
Luca
just set the parent li's position to relative; #nav-list li{position:relative}
i did it up on jsfiddle for ya, fyi i took out the margin-left on the #nav-list just so its more clear.
http://jsfiddle.net/jalbertbowdenii/deVYx/