Ah ha, I've discovered the problem. Html code further down was overlapping my menu. Z-index and few tweaks solved it. See changes below. No doubt a css wizard can make further improvements, but this has put me on the road.
Many thanks to all for input.
As intended, drop down selections appears on the right of my vertical menu upon mouse hover. But they disappear as soon as I move the mouse to the right to select. Can some kind soul point out what changes I need to make in the code below to have a fully functional vertical drop down menu?
Many thanks,
LRP
My css code:
div.tools {
padding: 0 0 0 0;
}
div.tools ul {
margin: 0;
padding: 0;
width: 9em;
background: #00ab6f;
color: white;
border-radius: .3em;
}
.tools li {
position: relative;
list-style: none;
margin: 0;
}
.tools ul ul {
position: absolute;
top: 0;
left: 9em;
display: none;
}
.tools ul li a {
display: block;
text-decoration: none;
color: white;
padding: .6em;
border-radius: .3em;
}
.tools ul li:hover ul {
display: block;
z-index: 3;
}
.tools ul li ul li:hover {
display: block;
z-index: 3;
}
Note that I've found solution. See edits above.
Thanks to all.
LRP
Related
I have a menu with drop down statement on hover the problem is that when i remove the mouse it hides again, can someone help me keep the sub menu open when i click the option on the main menu?
It show´s when mouse hover but i need it to stay open even after i remove the mouse cursor.
thanks
#cssmenu > ul {
position: relative;
z-index: 999;
float: left;
border-bottom:2px solid lightblue;
}
#cssmenu > ul li {
float: left;
min-height: 0px;
line-height: 1.3em;
vertical-align: middle;
padding: 0px;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
z-index: 599;
cursor: default;
}
#cssmenu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
}
#cssmenu > ul ul li {
float: none;
}
#cssmenu > ul li:hover > ul {
visibility: visible;
border-bottom:2px solid lightblue;
color: white;
}
#cssmenu {
width: auto;
background: black;
font-size: 13px;
color:white;
top:0px;
}
#cssmenu > ul {
padding: 0 1px;
display: block;
float: none;
zoom: 1;
}
#cssmenu > ul:before {
content: '';
display: block;
}
#cssmenu > ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu ul ul {
margin: 0 10px;
padding: 0 10px;
float: none;
background: black;
border-bottom:2px solid lightblue;
border-left: 1px solid lightblue;
border-right: 1px solid lightblue;
border-top: none;
right: 0;
left: 0;
visibility: hidden;
<div id='cssmenu' style="opacity: 0.5;filter: alpha(opacity=50);align-top:0px;color:white;">
<ul>
<li class='activeM'><a class="inicio" href='#'><span>Home</span></a></li>
<li class='activeM'><a class="competencias" href='#'><span>Competências</span></a>
<ul>
<li class='active'><a class="saude" href='#'><span>Saúde</span></a></li>
<li class='active'><a class="ecosocial" href='#'><span>Economia Social</span></a></li>
<li class='active'><a class="desnvsustent" href='#'><span>Desenvolvimento Sustentado</span></a></li>
</ul>
</li>
</div>
thanks in advance.
The most recent comment seems to make this more clear that you're looking for a visual fading effect. You're right. A transition would be a good way to go.
You'll need to use opacity as well as visibility. I mocked up an example here: http://jsbin.com/cesacu/1/edit?html,css,output
You may want to play with the transition timing function or duration to get the effect you're looking for.
Edit: Thanks for the demo. It seems to have appropriate behavior at larger screen sizes, when the menu is all on one level. You're right that there's a problem when the menu goes to two levels on smaller screens.Is that the situation where you're experiencing the real problem?
I found this CodePen that shows one way to make a responsive two-level menu like this. If you need a pure-CSS menu, try searching for "responsive pure css mega menu". There look to be some other options there.
Initial answer:
I do think you'll need Javascript as Hakim said. One option would be to add classes that replace your :hover pseudo classes, then use a jQuery call to add those classes to the menu.
This example from a 2009 CSS Tricks post, tweaked for your case:
$('#cssmenu > ul li:hover > ul').hover(
function(){
$(this).children().addClass('visible');
}
)
It looks like you'll also need to add a class directly on $(this) for the #cssmenu > ul li.hover selector. You would then need another command, such as $(your-selector).click(function(){ $(this).removeClass('visible')) to make it go away again.
On a more general note, it does seem a little odd to want a sub-menu to stay open even when you leave it. Unless there's a third level menu, that is.
I have a purely .css driven menu. Currently, I have the flyout on the sub-sub menu appearing at 180px. This obviously doesn't work because as soon as menu text that exceeds 180px is entered, the submenu text is overlayed with the sub-submenu text (In the example, Highlighting Products > Entertainment Centers USA shows the problem).
The spot in the .css where I have explicitly stated the 180px width is below. I need it to be dynamic, i.e. the desired behavior is for the flyout to align with the right side of the first level vertical menu regardless of the first level submenu's width.
/* -- Appearance of second vertical dropdown menu unhovered (submenu of first level vertical menu) -- */
.rmenu li ul li:hover ul li a {
padding: 0px 0px 0px 5px;
background: #e8dec7; /*background color for submenu hovered text*/
color: #51db29; /* this is the color of the sub-sub menu text. I made the color (#51db29) 'unusual' as an example. Should be changed to something less jarring (of course) */
word-wrap: break-word;
min-width:100px;
position: relative; left: 180px; top: -35px; /* display 3rd level to the right (180px) */ /*left: 180px*/
}
The jfiddle is here:
http://jsfiddle.net/9c8wcxju/4/
Many, many thanks.....
I have simplified everything down and made this for you. You can expand on it and do what you want with it. I couldn't really work with yours, ended up deleting most of the css.
As you can see I have added class to each level of the sub-menu so it is easier to target. What I have created is what I think you wanted, I hope this puts you on the right track.
http://jsfiddle.net/9c8wcxju/5/
.rmenu ul li {
margin: 0;
padding: 0;
position: relative;
}
.rmenu ul {
list-style-type:none;
margin:0;
padding:0;
}
.rmenu li a {
display:block;
min-height: 35px;
line-height: 35px;
font-family: "Arial", sans-serif;
font-size: 18px;
color: #000000;
background-color: #e8dec7;
text-decoration: none;
white-space: nowrap;
}
.rmenu li:hover a {
background: #d6cbb0;
}
.rmenu .hidden {
display: none;
}
.rmenu .level_1 > li {
float: left;
}
.rmenu .level_1 > li a {
padding: 0 10px;
}
.level_1 > li:hover .level_2,
.level_2 > li:hover .level_3 {
display: block;
}
.level_2 {
position: absolute;
left: 0;
}
.level_3 {
position: absolute;
top: 0;
left: 100%;
}
I am having trouble with the sub-menu items at the following site. Actually the problem is with the sub-sub-menu items, i.e. the 3rd level items (I am not sure what these are actually called).
You may need front-end password to view "calzada321" (no quote marks).
http://polynovo.com.au/
As per screenshot (link below), in most browsers, the 3rd level items are squished, ie they do not display in an attractive or useful fashion on hover. I am not sure how to fix (obviously). Any help appreciated.
http://polynovo.com.au/wp-content/uploads/2014/11/Untitled-1.jpg
/* 2.3 Navigation
------------------------------------------------------------------------------*/
#navigation {
margin-bottom: 7px;
position: relative;
z-index: 2;
}
#navigation .menu-item {
float: left;
background: url(../images/common/bg_nav-separator.png) no-repeat 0 center;
position: relative;
}
#navigation .menu-item:first-child {
background: none;
}
#navigation .menu-item.has-sub-menu:hover {
background-color: #e5eaef;
}
#navigation .menu-item a {
color: #002d62;
display: block;
font-size: 15px;
/* font-weight: bold; */
padding: 18px 17px 18px 16px;
text-transform: uppercase;
}
#navigation .menu-item:first-child a {
padding-left: 3px;
}
#navigation .current-menu-item > a,
#navigation .current-page-ancestor > a,
#navigation .menu-item a:hover {
color: #c72932;
text-decoration: none;
}
#navigation .has-sub-menu .current-page-ancestor > a {
color: #002e62;
}
#navigation .has-sub-menu .current-page-ancestor > a:hover {
color: #fcb040;
text-decoration: none;
}
/* Sub-navigation */
#navigation .sub-menu {
display: none;
position: absolute;
top: 50px;
left: 0;
padding: 17px 22px 18px;
width: 155px;
background: #e5eaef;
}
#navigation .menu-item.has-sub-menu:hover .sub-menu {
display: block;
}
/* ---I added this item below made sub-sub items sit out more but still not good---*/
#navigation .menu-item.has-sub-menu:hover .sub-menu .sub-menu {
margin-left:200px;
margin-top:-35px;
display:block;
}
#navigation .sub-menu .menu-item {
float: none;
padding-left: 12px;
margin-bottom: 5px;
background: transparent url(../images/common/sprite_icons.png) no-repeat 1px -229px;
}
#navigation .sub-menu .menu-item a {
padding: 0;
font-weight: normal;
line-height: 40px;
text-transform: none;
}
There is some issue in your css code, like hovering action. first you should use direct child selector for showing the sub-menu, so the third level will remain hidden.
.menu-item:hover > .sub-menu{ display: block }
And lastly is for your problem, add styling for sub-menu starting from the third level. You just need to set the left property to 0;
.sub-menu .sub-menu{ left: 0 }
EDITED ANSWER ACCORDING TO THE CODE SNIPPET
you can change this selector which is for showing sub-menu to this
#navigation .menu-item:hover > .sub-menu { display: block }
this selector will show only direct sub-menu, not all sub-menu in one menu item. and you don't need to set margin top nor margin-left.
Next you need to add styling for third level menu, since this menu positioned on the left side.
#navigation .sub-menu .sub-menu{
left: 100%;
top : 0;
}
Since the sub-menu is absolute positioned, you just need to set the left to 100%, this will placed the third level menu sit next to the selected 2nd level menu
I have a basic CSS dropdown menu for a client on a Wordpress-based sites. It is just CSS styling, no JS, and works perfectly on desktops.
However we've realized that the menu only works intermittently on iPhones, maybe every 2 or 3 page loads, but most of the time is broken and doesn't allow any access to any of the subpages.
What happens is the dropdown menu expands on tap, as it should, but then the links in the dropdown don't work. Tapping them closes the menu and does nothing, or, since the site logo falls underneath the dropdown, acts like you tapped the logo and redirects back to the homepage.
Pressing and holding on the link in the dropdown brings up the normal link options (copy, open in new window, etc) so I know it is recognizing the link, it just doesn't want to behave normally on a single tap.
The menu works perfectly on iPads, just not iPhones (which doesn't make sense at all to me). I feel like if the issue was consistent, happening all the time across all mobile safari devices, I might be able to figure this out, but the intermittent nature of it has me stumped. Additionally, I've used pretty much an identical menu code on another client's site, and theirs is working perfectly on all devices. I've tried removing plugins, ads, other scripts on the site (like the Hellobar for example) to see if it is a conflict, but nothing seems to consistently fix the issue.
Site in question is http://www.twopeasandtheirpod.com/. See the dropdown under 'About' and 'On the Side'.
Any assistance in troubleshooting this would be greatly appreciated!
Structure of the menu is wordpress' default menu structure. CSS being used for reference:
.centeredmenu {
color: #fff;
font-size: 16px;
font-family: MergeRegular, Arial, sans-serif, Helvetica;
clear: both;
float: left;
margin: 0;
padding: 0;
width: 100%;
border: none;
font-weight: normal;
text-transform: lowercase;
z-index: 100;
position: relative;
height: 30px;
line-height: 30px;
background-color: #65b020;
}
/* Top menu items */
.centeredmenu ul {
margin: 0;
padding: 0;
list-style: none;
float: right;
position: relative;
right: 50%;
}
.centeredmenu ul li {
margin: 0 3px;
padding: 0;
float: left;
position: relative;
left: 50%;
}
.centeredmenu ul li a {
display: block;
margin: 0;
padding: 0 12px;
text-decoration: none;
color: #ffffff;
}
.centeredmenu ul li.active a {
}
.centeredmenu ul li a:hover {
color: #bbda6d;
}
.centeredmenu ul li:hover a,
.centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
color: #bbda6d;
}
/* Submenu items */
.centeredmenu ul ul {
display: none; /* Sub menus are hiden by default */
position: absolute;
margin: 0;
padding: 0;
top: 30px;
line-height: 24px;
font-size: 13px;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: lowercase;
right: auto; /*resets the right:50% on the parent ul */
width: 160px; /* width of the drop-down menus */
background-color: #65b020;
}
.centeredmenu ul ul li {
left: auto; /*resets the left:50% on the parent li */
padding: 0;
margin: 0; /* Reset the 1px margin from the top menu */
clear: left;
width: 100%;
}
.centeredmenu ul ul li:before {
display: none;
}
.centeredmenu ul ul li a,
.centeredmenu ul li.active li a,
.centeredmenu ul li:hover ul li a,
.centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
margin: 0;
padding: 7px 12px;
line-height: 1.4;
color: #ffffff;
}
.centeredmenu ul ul li a:hover,
.centeredmenu ul li.active ul li a:hover,
.centeredmenu ul li:hover ul li a:hover,
.centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background-color: #77c12e;
}
/* Flip the last submenu so it stays within the page */
.centeredmenu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}
/* Make the sub menus appear on hover */
.centeredmenu ul li:hover ul,
.centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}
you're using :hover states which are at-best buggy, and at-worst will never work on touchscreen devices. the individual browser could sometimes reinterpret it to work like an onclick, but that's a crapshoot.
instead use onmouseover and onclick for desktop, so you have the failover to onclick for touchscreen.
I am just working on a site.Here got completed everything..but almost..one thing not getting..so thought you people might help me...
Here it is please :
Here i am trying to make the dotted lines just right below the links Like this :
http://oi62.tinypic.com/2f07uy8.jpg
Here is the above image given CSS code please :
.navigation li ul li a {
color: #000;
background: none !important;
border-bottom: 1px dotted #000;
padding: 0;
display: inline-block;
}
but it's not showing up right..Here is the current image:
http://oi60.tinypic.com/es5jrq.jpg
Here is the above image given CSS code please :
.navigation li ul li a {
color: #000;
background: #e4e4e4;
height: 0;
border-bottom: 1px dotted #000;
padding: 0px;
display: inline-block;
}
You can use after class to draw a dotted line below the links and you can use letter spacing to space out the dots the way you like it.
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
}
.navigation li ul li a:after {
content: "...............................";
color: #000;
bottom: 5px;
left: 0;
}
Adjust the bottom value on the :after pasedo-class to suit your needs. Sometimes you wouldnt be able to see the line drawn by the :after pseudo class, so undo the Overflow hidden to figure out where the dotted line is.
===========================================================================================
fixes:
.navigation li ul li {
background: none;
padding: 12px 12px 6px;
float: none;
display: block;
}
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
box-shadow: none;
overflow: hidden;
padding-bottom: 10px;
}
.navigation li ul li a:after {
content: "..................................................";
color: #000;
position: absolute;
bottom: 3px;
left: 0;
letter-spacing: 2px;
}
The white line was a box shadow. You need to optimize your site, it takes ages to load.
You need to give the <a>'s a fixed height, as opposed to 0. Using 22px seems to work fine.
I looked at both of the sites and after checking the incorrect one I came to some conclusions.
a. you have way too much styling. It's just cluttering up your code. The key word here is simplifying.
b. don't use font, it has become somewhat obsolete in the last years.
c. the white line above is because you're using box-shadow with offset of 1px (in foundation.css line 478). Do you need this attribute? if not, maybe you should remove it.
d. can't find any border-bottom style anywhere in the element.