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
Related
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
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 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 want to add some kind of thick line underneath my currently active<li> items. Problem is, I can't set it up properly. I want the line underneath to inherit the width of its respective <li> or at least to be centered ...
Here's my fiddle
Much appreciated
If you want an absolutely positioned element to inherit the width of it's parent, you need to position that parent relatively. More info here. For your situation, you need to :
Add position:relative; to .nav li
Add width :100%; left:0; and remove margin-left: -6em; on nav li.current a:after, nav li a:hover:after
FIDDLE
You seem to be adding the :after content in two places which seems excessive.
Since you only want in on active 1i you can strip down your code as follows:
CSS
nav ul {
list-style: none;
margin-top: 1.25em;
}
nav ul li {
display: inline-block;
position: relative;
}
nav li a {
color: black;
text-transform: uppercase;
text-decoration: none;
padding: 1em 1.25em;
width: auto;
}
nav li.current a, nav li a:hover {
text-decoration: underline;
}
nav li.current:after {
background-color:black;
content: "";
height: 1em;
position: absolute;
left:0;
top: 100%;
width: 100%;
}
JSFiddle Demo
I installed the anything slider on my site and I'm trying to get the navigation to be tabbed like this: http://www.echappee-laine.fr/
I updated the CSS to make the tabs but I'm pulling my hair out trying to understand what went wrong because 1) the links don't cover the entire box, and 2) now that I've done this the navigation isn't responsive. (http://beta.harvest-express.com)
Any thoughts?
/* Navigation buttons, default state */
.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a {
background: #777;
color: #000;
}
/* Navigation buttons, active state */
.anythingSlider.activeSlider .anythingControls ul a.cur,
div.anythingSlider.activeSlider .anythingControls ul a {
background-color: #7C9127;
}
/* Navigation Links */
.anythingSlider .anythingControls {
position:absolute;
top:0;
left:0px;
list-style:none;
padding:0;
margin:0;
width:235px;
z-index: 20;
}
.anythingSlider .anythingControls ul {
margin: 0;
padding: 0;
float: left;
}
.anythingSlider .anythingControls ul li {
display: block;
height: 75px;
width: 235px;
border:1px solid #ccc;
background-image: url(.../transparant.png);
}
.anythingSlider .anythingControls ul a {
font: 11px/18px Georgia, Serif;
display: inline-block;
padding: 2px 8px;
text-decoration: none;
line-height: 75px;
background-image: url(../images/default.png);
background-position: center -288px ;
background-repeat: repeat-x;
text-align: center;
outline: 0;
}
.anythingSlider .anythingControls ul a:hover {
background-image: none;
}
1) the links don't cover the entire box
You have display: inline-block set on your a tags; unless you have a specific reason why they need to be that way, I'd change that to be display: block allowing the link to expand to fill up the containing li. Alternatively you could add a width: 100% to that rule.
2) now that I've done this the navigation isn't responsive
You've got an explicit width of 235px set on the anythingControls div.