css inherit is getting me down - css

I am currently working on a menu that uses superfish. It is completely customizable via css but I am experiencing a very very frustrating problem.
The 2nd tier menu somehow inherits values from I-know-not-where and whatever I do to change it completely destroys the entire layout. It looks as if the text is somehow an entire line further down then it should be. The mouseover style is working as it should be however.
Another frustrating thing is that I need to move the text from the tier1 menu items to the bottom of the bar - nothing I have tried so far has moved only the text and not the entire item. If anyone has a solution for that it would be greatly appreciated as well.
you can see what I mean here: http://redaxo.witconsult.de/
it concerns the tier 2menues on menu item 2 and 5 (Leistungen & Kontakt)
here is the code I believe is responsible for the problem:
the entire code here: http://redaxo.witconsult.de/files/superfish.css
Thanks a ton!!!
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
text-indent: 7px;
}
.sf-menu a, .sf-menu a:visited {
/* visited pseudo selector so IE6 applies text colour*/
color: #333;
}
.sf-menu li { /*///////////// menu lvl 1 /////////////*/
color: #333;
width: 118px;
line-height: 85px;
font-weight: normal;
font-size: 14px;
text-decoration:none;
background: url(../images/menu/menuitem.png);
}
.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
color: #DDD;
line-height: 85px;
background: url(../images/menu/menuitem-mo.png);
}
.sf-menu li li { /*///////////// submenu lvl 2 ///////////////////*/
color: #ddd;
font-size: 12px;
top: 50px;
height: 26px;
background: url(../images/png_black40per.png);
}
.sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
color: #333;
line-height: 26px;
background: url(../images/png_white40per.png);

In response to your new problem - that the text is at the top now instead of the bottom - change the height of your anchor elements <a> and add some padding-top:
/* superfish.css line 59 */
.sf-menu a {
color:#DDDDDD;
text-indent:7px;
height: 50px; /* ADDED */
padding-top: 35px; /* ADDED */
}
/* superfish.css line 78 */
.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
color: #DDD;
height: 50px; /* CHANGED */
background: url(../images/menu/menuitem-mo.png);
padding-top: 35px; /* ADDED */
}
... if you can't edit superfish.css add a rule like this one somewhere else:
#site-content .sf-menu li a {
height: 50px;
padding-top: 35px;
}
PS Please update the question body to reflect the changes in your question ;)

Related

WordPress sub-menu items not displaying properly on hover

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

CSS-only dropdown menu doesn't always work on iPhone

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.

CSS submenu hover color issue

I have a submenu in WordPress that was set up as a list in the following way:
.sidebar .widget { margin-top:20px; margin-bottom: 0px; padding-left:20px;}
.sidebar .widget h5 {line-height: 13px; margin-bottom: 30px; font-weight: bold;font-family: 'Droid Serif', Georgia, Times, serif; }
.sidebar .widget ul li { margin-bottom: 2px;background-color:#b3b1b2;padding:6px 2px; }
.sidebar .widget ul li a { margin-bottom: 2px;background-color:#b3b1b2;color:#ffffff ;padding:6px 2px; }
.sidebar .widget ul li a:hover { margin-bottom: 2px;background-color:#dadada;color:#202e3b ;padding:6px 2px; }
.sidebar .widget ul li a:active { margin-bottom: 2px;background-color:#dadada;color:#202e3b ;padding:6px 2px; }
See the page here: http://www.mahabbanetwork.com/who-we-are/
However, I would like the hover state to change the colour of the whole "bar" to the lighter grey, i.e. the full width instead of just the text-background which it is at present. I have played around with increasing the righthand padding but it, of course, increases it relative to the length/number of characters of the text link, which is different for each link.
This site uses a pre-coded WP template so I am not sure how to amend it to achieve the desire effect without messing things up elsewhere on the site.
Help would be greatly appreciated.
Add :hover to li
.sidebar .widget ul li:hover
{
background-color:#dadada;
color:#202e3b ;
}
Add the hover state grey color to .sidebar .widget ul li:hover instead of .sidebar .widget ul li a:hover
.sidebar .widget ul li:hover
{
background-color:#dadada;
color:#202e3b ;
}

Can i use the :first-letter and the :hover selector together?

I have the first letter selector working, to change the color of the first letter but when hovering that area the color matches with the background so it becomes invisible. This is the part of code working
.nav-menu li a:first-letter {color:#b5b503;}
.nav-menu li a:first-letter {font-weight:bold;}
.nav-menu li a {
color: #fff;
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}
And this is the part where i guess i should add a .first-letter selector but cant find out how as it is already a hover selector in it
.nav-menu li:hover > a,
.nav-menu li a:hover {
background-color: #b5b503;
color: #273664;
}
Yes, you can
Example CSS :
p:first-letter {
font-size: 120%;
}
p:hover:first-letter {
color: white;
}
HTML :
<p>Hello world</p>
Demo here : http://jsfiddle.net/LRFw8/1/
For your code, you would style this in .nav-menu li a:hover:first-letter

Menu won't change when hovered in submenu

So basically i want to make my menu keep in hover state when their sub menu hovered,
i'd already try like this
but it still won't change as i want, where did i go wrong?
here's my snippet
#topmenu li li:hover a:hover{
color: #000;
text-decoration: none;
background-color: #fff;
text-shadow: 0 0 1px #000;
}
regards,
Not sure why you're hiding your sub menu with left: -999em; rather than display: none;.
Here is an updated jsFiddle: http://jsfiddle.net/JmkaM/1/ that uses display: none; and display: block; to show the sub menu.
What you want to do is display the sub menu when the user hovers a top level li. So you would do that like this li:hover ul. For your specifc CSS modify the following:
#topmenu li ul {
/* left: -999em; remove */
display: none; /* add */
}
/* add the following */
#topmenu li:hover ul {
display: block;
}
If you really need to use left for some reason then do the following:
#topmenu li:hover ul {
left: 0;
}
It will bring your sub menu back from being pushed -999em to the left. Though it might not be placed quite where you want it.
UPDATE 1
This will be the last time I help you. You need to learn that good feedback will help others help you. I understand that you are new but responding to answers with, "doesn't do what I want," does not help us or you.
I'm just guessing here at what you want based on the jsFiddle you linked to in the comments.
Here's the new jsFiddle: http://jsfiddle.net/JmkaM/2/
Below you will see the changes I made, before and after. I only highlighted the properties that I changed for brevity.
Before
#topmenu ul { /* ... */ }
#topmenu li ul {
padding-top: 0px;
padding-bottom: 0px;
}
#topmenu li li:first-child {
margin-top: 14px;
border: 0;
}
AFTER
/* added child selector '>' so only top level navigation
items have a background of red */
#topmenu > ul { }
/* set padding on all sides to 0 */
#topmenu li ul {
padding: 0;
}
/* removed whole rule - #topmenu li li:first-child */
UPDATE 2
Try this:
#topmenu > ul > li:hover {
background-color: white;
}
#topmenu > ul > li:hover > a {
color: black;
}
See this Fiddle :
http://jsfiddle.net/mSNqT/46/
This will be helpful.

Resources