I am creating a topmenu for a webpage, and with scripting, the sub menus pops up on hover. I have also taken measures to not let the menu grow too far to the right, by if needed let it grow in the other direction. This picture clarifies:
I do this by adding the class "to-the-left" to the sub sub menu.
Now, why is some menu items of the parent on top of my sub sub menu? You can read "Item 3" below "Sub sub item 2" which should not be possible.
I have tried to add z-index to the sub sub menu without succeeding.
http://jsfiddle.net/VK7Mt/
<!doctype html>
<html>
<head>
<style type="text/css">
div.top-menu
{
width: 920px;
margin: 0 auto;
}
div.top-menu ul.topmenu
{
margin: 0;
height: 41px;
background: #ccc;
padding: 0;
position: relative;
}
ul.topmenu li
{
list-style: none;
float: left;
padding: 12px 19px;
min-height: 17px;
position: relative;
}
ul.topmenu ul
{
width: 190px;
position: absolute;
top: 41px;
left: 0;
margin: 0;
padding: 0;
background: #dddddd;
border: #c4c4c4 1px solid;
}
ul.topmenu ul li
{
float: none;
padding: 3px 6px 3px 13px;
}
ul.topmenu a
{
color: #333;
text-decoration: none;
}
ul.topmenu ul li a
{
display: inline-block;
font-weight: normal;
width: 90%;
}
ul.topmenu ul li:hover
{
background: #3399cc;
}
ul.topmenu ul ul
{
left: 100%;
top: 0;
}
ul.topmenu div
{
cursor: pointer;
}
.topmenu-sub-item > .item
{
padding-left: 6px;
}
.topmenu-sub-item > .item > a
{
margin-top: 3px;
margin-bottom: 3px;
}
ul.topmenu ul ul.to-the-left
{
left: -100.5%;
}
</style>
</head>
<body>
<div class="top-menu">
<ul class="topmenu">
<li class="topmenu-root-node">
root item
<ul class="topmenu-submenu-container">
<li class="topmenu-sub-item">
<div class="item">
item 1
</div>
</li>
<li class="topmenu-sub-item nonempty">
<div class="item has-submenu">
<a class="topmenu-hassubmenu" href="/item2">item 2</a>
</div>
<ul class="topmenu-submenu-container to-the-right">
<li class="topmenu-sub-item nonempty">
<div class="item has-submenu">
<a class="topmenu-hassubmenu" href="/subitem1">Sub item 1</a>
</div>
<ul class="topmenu-submenu-container to-the-right">
<li class="topmenu-sub-item nonempty">
<div class="item has-submenu">
<a class="topmenu-hassubmenu" href="/subsubitem1">Sub sub item 1</a>
</div>
</li>
<li class="topmenu-sub-item">
<div class="item">
Sub sub item 2
</div>
</li>
<li class="topmenu-sub-item">
<div class="item">
Sub sub item 3
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="topmenu-sub-item">
<div class="item">
Item 3
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="top-menu" style="margin-top: 170px">
<ul class="topmenu">
<li class="topmenu-root-node">
root item
<ul class="topmenu-submenu-container">
<li class="topmenu-sub-item">
<div class="item">
item 1
</div>
</li>
<li class="topmenu-sub-item nonempty">
<div class="item has-submenu">
<a class="topmenu-hassubmenu" href="/item2">item 2</a>
</div>
<ul class="topmenu-submenu-container to-the-right">
<li class="topmenu-sub-item nonempty">
<div class="item has-submenu">
<a class="topmenu-hassubmenu" href="/subitem1">Sub item 1</a>
</div>
<ul class="topmenu-submenu-container to-the-left">
<li class="topmenu-sub-item nonempty">
<div class="item has-submenu">
<a class="topmenu-hassubmenu" href="/subsubitem1">Sub sub item 1</a>
</div>
</li>
<li class="topmenu-sub-item">
<div class="item">
Sub sub item 2
</div>
</li>
<li class="topmenu-sub-item">
<div class="item">
Sub sub item 3
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="topmenu-sub-item">
<div class="item">
Item 3
</div>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
This is because the order of the elements matters: elements that come later in code, are on top of the previous elements.
In your case, the subsubs are a part of the main Item 2 >> are BELOW the afterwards following Item 3.
You can override this using z-index for the sub-menu (not the subsub):
ul.topmenu ul {
...
position:absolute;
z-index:999;
...
}
updated fiddle: http://jsfiddle.net/VK7Mt/3/
Add z-index to:
ul.topmenu ul ul.to-the-left {
z-index: 100;
}
That way you are saying that you want that ul to be in front of other elements. It had position absolute so it needed some z-index.
JSFIDDLE
Related
I have a dynamic mega menu that shows the first tier of submenus but I'm trying to make it so that the second tier show up when an element in the 1st tier is hovered over. currently both tiers and showing up taking up a lot of space.
I found a post on here saying to use this layout:
.child{ display:none; }
.parent:hover .child{ display:block; }
It's kind of tricky with the css I have:
child = .new-menu .dropdown-submenu .dropdown-menu.burt
parent = .dropdown-menu.burt .new-menu .dropdown-submenu > a
I tried this but it's not working:
.new-menu .dropdown-submenu .dropdown-menu.burt{
display: none;
}
.dropdown-menu.burt .new-menu .dropdown-submenu > a:hover .new-menu .dropdown-submenu .dropdown-menu.burt {
display: block;
}
Targeting these specific elements seems tricky and the only way I could get them specifically was the mess I have above. Maybe I can target these elements a better way, or another way of making this work?
Update
Here is the html structure, it's kind trick, it's from Americommerce and it uses 'Merge Codes' that supply the dynamic data
This is the main structure:
<ul class="nav navbar-nav">
<ac:layoutarea id="Item">
<ac:visibilityarea id="phDDLink">
<li class="dropdown">
$$TEXT$$
<ac:visibilityarea id="phSubMenu">
<ul class="dropdown-menu mm2">
<div class="row"> $$SUBMENU$$</div>
</ul>
</ac:visibilityarea>
</li>
</ac:visibilityarea>
<ac:visibilityarea id="phNoDDLink">
<li>
$$TEXT$$
</li>
</ac:visibilityarea>
</ac:layoutarea>
</ul>
This is the structure of the sub-menus:
<ac:layoutarea id="SubItem">
<ac:visibilityarea id="phDDLink">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<li class="dropdown-submenu">
$$TEXT$$
<ac:visibilityarea id="phSubMenu">
<ul class="dropdown-menu burt" id="">$$SUBMENU$$</ul>
</ac:visibilityarea>
</li>
</div>
</ac:visibilityarea>
<ac:visibilityarea id="phNoDDLink">
<li class="greg">
$$TEXT$$
</li>
</ac:visibilityarea>
</ac:layoutarea>
Update 2
HTML from inspector
<ul class="dropdown-menu mm2">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<li class="dropdown-submenu"> <a class="sub-link" href="/store/c/software.aspx" target="">Software</a>
<ul class="dropdown-menu burt">
<div class="new-menu">
<li class="dropdown-submenu"> Products
<ul class="dropdown-menu burt">
<li class="greg"> Product 1 </li>
</ul>
</li>
</div>
</ul>
</li>
</div>
</ul>
Update 3
I added a class to the first <a> and then added this css:
.new-menu .dropdown-submenu .dropdown-menu.burt {
display: none;
}
.sub-link:hover .new-menu .dropdown-submenu .dropdown-menu.burt {
display: block;
}
It hides the elements but showing them on hover still doesn't work
.sub-link{
display: block;
}
.new-menu{
display: none;
}
.greg
{
display: none;
}
<li class="dropdown-submenu"> <a class="sub-link" href="/store/c/software.aspx" target="">Software</a>
<ul class="dropdown-menu burt">
<div class="new-menu">
<li class="dropdown-submenu">
<a href="/office-2019.aspx" target="">
Products
</a>
<ul class="dropdown-menu burt">
<li class="greg">
<a href="/product1.aspx" target="">Product 1
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
Your HTML structure is not clear so I tried to create my own and try to recreate your problem
have a look
.new-menu{
display: none;
}
.dropdown-submenu{
display: none;
}
.dropdown-menu{
display: none;
}
.mainParent:hover .new-menu{
display: block;
}
.mainParent:hover .dropdown-submenu{
display: block;
}
.mainParent:hover .dropdown-menu{
display: block;
}
<a class="mainParent">
Link
<div class="new-menu">
<div class="dropdown-submenu">
<div class="dropdown-menu burt">
Application Menu
</div>
</div>
</div>
</a>
If each element having a property to hide, then each element class have to make visible on parent element hover.
If you are facing some kind of nested DOM CSS problem, you can see this running code snippet
.sub-link{
display: block;
}
.new-menu{
display: none;
}
.greg
{
display: none;
}
.dropdown-submenu:hover a{
color: red !important;
}
.dropdown-submenu:hover .burt{
display: block;
color: red !important;
}
.dropdown-submenu:hover .new-menu{
display: block;
color: red !important;
}
.new-menu:hover .burt{
display: block;
}
.new-menu:hover .greg{
display: block;
}
.new-menu:hover a{
display: block;
color: black !important;
}
<li class="dropdown-submenu"> <a class="sub-link" href="/store/c/software.aspx" target="">Software</a>
<ul class="dropdown-menu burt">
<div class="new-menu">
<li class="dropdown-submenu">
<a href="/office-2019.aspx" target="">
Products
</a>
<ul class="dropdown-menu burt">
<li class="greg">
<a href="/product1.aspx" target="">Product 1
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
You can always add another class for your child elements and to your parent element.
<html>
<head>
<style>
.f-red {color:red;}
.childEl{
display:none;
}
#parentEl {padding: 5px; border-style: solid;}
#parentEl:hover > .childEl {display:block}
</style>
</head>
<body>
<div id="parentEl">
<h1 class="childEl f-red">Child</h1>
</div>
</body>
</html>
<style type="text/css">
#parent:hover #abc{
display: block ;
}
</style>
The :hover in this is not working
The following was the code used. Whenever the mouse hovers over #parent #abc should be displayed. But this it is not happening so.
<a class="w3-bar-item w3-button" id="parent">LIK2</a>
<ul style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none" id="abc" class="w3-bar-block">
<li class="w3-bar-item w3-button">Link1 </li>
<li class="w3-bar-item w3-button">Link1</li>
<li class="w3-bar-item w3-button">Link1</li>
</ul>
please can someone figure out the problem.
EDIT:
Entire code
<div class="w3-dropdown-hover" style="width: 50%;">
<button class="w3-button">SomeButton</button>
<div class="w3-bar-block w3-black w3-dropdown-content " id="xyz" style="width: 100px; ">
<a class="w3-bar-item w3-button">LIK1</a>
<div style="margin:0px; padding: 0px; position: relative;" id="parent">
<a class="w3-bar-item w3-button">LIK2</a>
<ul style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none" id="abc" class="w3-bar-block">
<li class="w3-bar-item w3-button">
Link1
</li>
<li class="w3-bar-item w3-button">
Link1
</li>
<li class="w3-bar-item w3-button">
Link1
</li>
</ul>
</div>
<a class="w3-bar-item w3-button">LIN3</a>
</div>
</div>
because you set inline style for #abc and never let you set other style in head , you should set #abc style in a head , like this :
CSS:
<style type="text/css">
#abc {
list-style-type: none;
margin: 0px;
margin-left: 100px;
position: absolute;
top: 0px;
padding: 0px;
background-color: green;
display: none;
}
div#parent:hover > ul#abc {
display: block;
}
</style>
HTML :
<div id="parent">
<a class="w3-bar-item w3-button">LIK2</a>
<ul id="abc" class="w3-bar-block">
<li class="w3-bar-item w3-button">Link1 </li>
<li class="w3-bar-item w3-button">Link1</li>
<li class="w3-bar-item w3-button">Link1</li>
</ul>
</div>
Use adjacent sibling selector(+) or general sibling selector(~) to select the siblings. Check below snippet for reference. Check here for more details about Combinators selectors.
#parent:hover ~#abc{
display: block !important;
}
<a class="w3-bar-item w3-button" id="parent">LIK2</a>
<ul style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none" id="abc" class="w3-bar-block">
<li class="w3-bar-item w3-button">Link1 </li>
<li class="w3-bar-item w3-button">Link1</li>
<li class="w3-bar-item w3-button">Link1</li>
</ul>
try like this, you can give appropriate ids as you needed to do so.
li:hover ul{
display: block !important;
}
<ul style="" id="abc" class="w3-bar-block">
<li>
LIK2<br>
<ul id="inner" style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none">
<li class="w3-bar-item w3-button">Link1 </li>
<li class="w3-bar-item w3-button">Link1</li>
<li class="w3-bar-item w3-button">Link1</li>
</ul>
</li>
</ul>
hope this helps
How do I center an unordered list that is divided with an image inside?
I want to achieve that the unordered list is one row, centered and also the image inside is centered so that the image divides the rest of the list in two halves (topnav-left and topnav-right).
My HTML:
<ul class="nav">
<div class="topnav-left">
<li class="">
<a class="toggle-nav" data-no-turbolink="true" href="Women">Women</a>
</li>
<li class="">
<a class="toggle-nav" data-no-turbolink="true" href="Men">Men</a>
</li>
<li class="">
Stores
</li>
<li class="">
Lifestyle
</li>
</div>
<div class="nile-logo" style="">
<li>
<img alt="Logo" src="http://img.logospectrum.com/dec/dummy-logo.jpg">
</li>
</div>
<div class="topnav-right">
<li class="">
<a class="toggle-account-nav" data-no-turbolink="true" href="/de/account">My Account</a>
</li>
<li>
<div class="cart">
<a href="/de/cart">
Warenkorb
</a> </div>
</li>
<li>
<a html="{:class=>"open-wishlist"}" href="/de/wishlist">WUNSCHLISTE</a>
</li>
<li class="language">
<a class="language" href="/en/pages/imprint">EN</a>
<a class="language" href="/fr/pages/imprint">FR</a>
</li>
</div>
</ul>
My CSS:
ul.nav { text-align: center; }
ul.nav li { display: inline-block; }
Here a codepen: demo
Try to use display:flex; add this to add this,
ul {display:flex;justify-content: space-around;list-style-type: none;}
ul.nav li { flex:1; text-align: center; } /* Edit from comment by Paulie_D
Working DEMO
You mean like this?:
http://codepen.io/anon/pen/pENYLZ
ul.nav li {
display: block;
}
Or like this?:
http://codepen.io/anon/pen/mAOoKN
ul.nav {
margin: 0 auto;
width: 200px;
position: relative;
}
ul.nav li {
display: block;
}
I'm creating a Twitter Bootstrap main nav and sub nav with a drop down menu on the main nav. The problem is that I can never get the drop down menu to be shown above the sub nav. Here is the HTML:
<div class="mainnav navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Settings
</a>
<ul class="dropdown-menu">
<li><a>test 1</a></li>
<li><a>test 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="subnav navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a>foo</a></li>
<li><a>bar</a></li>
</ul>
</div>
</div>
</div>
CSS:
.subnav {
top: 40px;
}
.mainnav .dropdown-menu {
// how can I show this menu above the subnav???
}
Never mind, figured this out myself.
.subnav {
top: 40px;
z-index: 1020; // make z-index smaller than .mainnav
}
JsFiddle Link:
http://jsfiddle.net/j2pCX/1/
Give z-index a try:
.subnav {
position: absolute;
top: 40px;
z-index: 10;
}
.mainnav .dropdown-menu {
position: absolute;
z-index: 20;
}
I have created a site-map using the following HTML:
<ul class="main-menu">
<li>
<div>
Menu Item 1
<ul class="actions">
<li>
<a
title="Collapse"
href="#"
class="icon icon-bullet-toggle-minus"
>Collapse</a>
</li>
<li>
<a
title="Add to Favourites"
href="#"
class="icon icon-award-star-add"
>Add to Favourites</a>
</li>
</ul>
</div>
<ul class="child-nodes">
<li>
<div>
Menu Item 1's First Child
<ul class="actions">
<li>
<a
title="Open"
href="#"
class="icon icon-page"
>Open</a>
</li>
<li>
<a
title="Add to Favourites"
href="#"
class="icon icon-award-star-add"
>Add to Favourites</a>
</li>
</ul>
</div>
</li>
<li>
<div>
<a href="#">A menu item with a really long name that is
eventually going to wrap over and break my styling</a>
<ul class="actions">
<li>
<a
title="Open"
href="#"
class="icon icon-page"
>Open</a>
</li>
<li>
<a
title="Add to Favourites"
href="#"
class="icon icon-award-star-add"
>Add to Favourites</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<div>
Menu Item 2
<ul class="actions">
<li>
<a
title="Expand"
href="#"
class="icon icon-bullet-toggle-plus"
>Expand</a>
</li>
<li>
<a
title="Add to Favourites"
href="#"
class="icon icon-award-star-add"
>Add to Favourites</a>
</li>
</ul>
</div>
</li>
<li>
<div>
Menu Item 3
<ul class="actions">
<li>
<a title="Open" href="#" class="icon icon-page">Open</a>
</li>
<li>
<a
title="Add to Favourites"
href="#"
class="icon icon-award-star-add"
>Add to Favourites</a>
</li>
</ul>
</div>
</li>
</ul>
and the following CSS:
.main-menu {
list-style: none;
padding: 0;
width: 405px;
}
.main-menu div {
padding: 5px;
}
.main-menu div a {
color: #036;
padding: 5px;
padding-left: 0;
text-decoration: none;
}
.main-menu .actions {
float: left;
margin: 0;
margin-right: 3px;
padding: 0;
}
.main-menu .actions li {
display: inline;
list-style: none;
}
.main-menu .actions a {
outline: none;
padding: 0;
text-indent: -9999px;
}
.main-menu .child-nodes {
list-style: none;
padding-left: 41px;
}
.main-menu .space {
margin-top: 16px;
}
The issue is that as soon as the text of a menu item becomes wider than the 405 pixel width of the menu, the item no longer wraps correctly.
Instead of the text flowing underneath the "actions" list, the text flows over the "actions" list.
I want to have something similar to:
[some icon] [another icon] item text
that wraps around
But instead I get:
item text that wraps
[some icon] [another icon] around
If you would like to see the problem in action, here's an example of the issue.
Any ideas?
If I understand correctly what you want to achieve, then you must simply remove float: left; from .main-menu .actions:
.main-menu .actions {
margin: 0;
margin-right: 3px;
padding: 0;
}
Is this the desired result?
The first thing I notice is that the <a> tag comes before the <ul class="actions"> tag. Have you tried reversing the order of the tags?
I currently can't try it out, but if you want the icons to appear before the text, I'd order the tags the same way. Not sure if this will solve the issue, though.
Edited to add: I just run a quick test. Changing
<A href="http://robertwhittaker.com/example/#">A menu item with a really long name that is
eventually going to wrap over and break my styling</A>
<UL class="actions">
<LI>
<A title="Open" href="http://robertwhittaker.com/example/#" class="icon icon-page">Open</A>
</LI>
<LI>
<A title="Add to Favourites" href="http://robertwhittaker.com/example/#" class="icon icon-award-star-add">Add to Favourites</A>
</LI>
</UL>
to...
<UL class="actions">
<LI>
<A title="Open" href="http://robertwhittaker.com/example/#" class="icon icon-page">Open</A>
</LI>
<LI>
<A title="Add to Favourites" href="http://robertwhittaker.com/example/#" class="icon icon-award-star-add">Add to Favourites</A>
</LI>
</UL>
<A href="http://robertwhittaker.com/example/#">A menu item with a really long name that is
eventually going to wrap over and break my styling</A>
seemed to solve your problem (if I understood it correctly).
With help from RegDwight and Anne Schuessler, I think I have now solved this issue.
The first step was to swap link and the "actions" list around so that it now appears as:
<div>
<ul class="actions">
<li>
<a class="icon icon-page" href="#" title="Open">Open</a>
</li>
<li>
<a
class="icon icon-award-star-add"
href="#"
title="Add to Favourites"
>Add to Favourites</a>
</li>
</ul>
Menu Item
</div>
From there it was just a case of slightly adjusting the CSS so that the link text was always inline instead of wrapping underneath the "actions" menu.
The complete CSS is as follows:
.main-menu {
list-style-type: none;
padding: 0;
width: 405px;
}
.main-menu div {
padding: 5px 5px 5px 46px;
}
.main-menu div a {
color: #036;
text-decoration: none;
}
.main-menu .actions {
float: left;
margin: 0 3px 0 -41px;
padding: 0;
}
.main-menu .actions li {
display: inline;
list-style-type: none;
}
.main-menu .actions a {
outline-style: none;
text-indent: -9999px;
}
.main-menu .child-nodes {
list-style-type: none;
padding-left: 41px;
}
.main-menu .space {
margin-top: 16px;
}
It was just a case of padding the container div by the width of the "actions" list and then giving the "actions" list a negative left-margin of the same value.