I have a Wordpress menu with a drop down menu. The problem I'm having is when the parent page is highlighted, the below drop down items are also highlighted. This is a problem because the parent is highlighted with an image. The drop down menu needs to be highlighted with just a colours. It works fine when the parent page isn't the current page. Can anyone help with this?
#navbar li.current_page_item a {
background:url(../images/activetab.png);
width:95px;
height:30px;
}
#navbar li li.current_page_item a {
background:#e9536c;
font-size:12pt;
width:150px;
color:black;
}
I'm pretty sure that your second selector is wrong. Try this code:
#navbar li.current_page_item a {
background:url(../images/activetab.png);
width:95px;
height:30px;
}
#navbar li.current_page_item li a,
#navbar li li.current_page_item a {
background:#e9536c;
font-size:12pt;
width:150px;
color:black;
}
This will target li's that are child elements of a current page item, and second(or more)-level li's that are current page items.
Maybe you can try this
#navbar li li.current_page_item a {
background-image:none;
background:#e9536c;
font-size:12pt;
width:150px;
color:black;
}
This should disable the background image in your dropdown menu.
Or use
background: #e9536c !important;
it will override your previous css style.
Related
So, I've tried to implement a two column menu into my wordpress, using this CSS code which I’ve found on the internet:
.sub-menu-columns .sub-menu{
display:inline-block;
width:500px !important;
background-color:#FFFFFF;
}
.sub-menu-columns .sub-menu li{
width:50% !important;
}
.sub-menu-columns .sub-menu li a:hover{
color:#FFFFFF;
}
.sub-menu-columns .sub-menu li:nth-child(even){
float:right;
border-left:2px;
border-color: #404040;
}
I added .sub-menu-columns as a CSS class for the top-level-menu “Products” at which only!! the two column sub menu should be seen.
I managed to get this to work. Now is the problem, since the menu is bigger in width, that I need to move the sub-menu container to the left. I also managed to solve this issue with this code:
#mainnav ul li ul{
left:-400px;
}
Now is the only thing, that all other Menus with submenus are moved to the left too (as you can see with “Contact/Support”)
My logical approach would be to edit the previous code to:
#mainnav .sub-menu-columns .sub-menu ul li ul{
left:-400px;
}
In addition, adding border-left doesnt bring any border up.
Here is how it looks like:
And this is how it should look like:
My current custom CSS script for the menu (with double colums, moving to the left and the Bootstrap Arrow-up back to the righ which is the ::before):
.sub-menu-columns .sub-menu{
display:inline-block;
width:500px !important;
background-color:#FFFFFF;
}
.sub-menu-columns .sub-menu li{
width:50% !important;
}
.sub-menu-columns .sub-menu li a:hover{
color:#FFFFFF;
}
.sub-menu-columns .sub-menu li:nth-child(even){
float:right;
}
#mainnav ul li a{
border-left:2px;
border-color: #404040;
}
#mainnav ul li ul{
left:-400px;
border-left:2px;
border-color: #404040;
}
#mainnav ul li ul::before{
left:450px;
}
However that is not working.
Any ideas maybe? Since I've heard many people use lately jsFiddle for helping out, I'm not sure if I've done it right, but this is what I could provide for you: https://jsfiddle.net/mve1wdfd/
Website: https://xs-sol.com/
Thank you for your help!
Update: I think the main issue is that I'm unable to combine the id=mainnav with other classes and ul's, il's a:hover's and so on.
I've got a safari-specific problem with a hover effect probably related to the synthetic click vulnerability fix in iOS 8.4.1. When the user tries to click on a link there is no response.
The menu is a simple CSS-only menu. I have created a demo here: https://jsfiddle.net/baad95e3/
#menu :hover ul {
right:auto;
left:0;
}
#menu :hover ul ul {
left:-9999px;
width:160px;
padding-left:5px;
background:none;
}
#menu li ul :hover ul {
left: 170px;
right:auto;
}
#menu li ul li ul li a {
text-align:left;
color:#000;
}
#menu li ul li ul li a:hover {
color:#000;
}
What would be a good workaround without losing the hover effect.
Hacky but can work, did for me in some cases:
* { z-index: 0; }
I am in the process of making a CSS drop down menu and CSS has just thrown me a curve ball.
Problem:
When I hover over my "Tools" section, the submenu is a few pixels off my main menu.
Problem CSS:
#menubar ul li {
font:bold 12px/18px sans-serif;
display:inline-block;
position:relative;
padding:10px 35px;
/*Change this to 15px 35px;and it will work*/
background:#666;
cursor:pointer;
color:#fff;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-ms-transition:all 0.2s;
-o-transition:all 0.2s;
transition:all 0.2s;
}
I have broken it for the purpose of this question (And because I do not want to use 15px padding, I want to use 10px)
Here is a FIDDLE so you can see exactly what I am talking about if I did not explain this correctly.
I have tried Margin, Top with negative values, all sorts of other things and cannot get this to stay glued to the main menu.
Please guide me in fixing this...
EDIT
Thank you ALL... This has been solved! :) +1 for all.
Fiddle
In this CSS rule, you have this:
#menubar ul li ul {
top:48px;
}
However, you should have this:
#menubar ul li ul {
top:38px;
}
That should fix it with the existing code you have and not create any new code.
Alternatively, set it to 100% instead, as it will take the % of the ul above it, pushing it always the correct height if you change the ul's design in future.
add top:-10px; to #menubar ul li
EXAMPLE
I think the problem is in following code
#menubar ul li ul {
padding:0;
position:absolute;
top:48px; //Change this value and it will glued to upper menu
......
Just set top to 100% then it doesn't matter how big the parent is and will cope if the user resizes the text:
#menubar ul li ul {
padding:0;
position:absolute;
top:100%;
...
}
http://jsfiddle.net/65ZAv/6/
In to CSS class #menubar ul li ul you define top:48px;.
#menubar ul li ul {
top:48px;
}
try to set top:38px;.
#menubar ul li ul {
top:38px;
}
code below not working
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li:hover
{
display:inline;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
i supposed they should have been arranged themselves horizontally on hovering.
link- http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline_list
I am not sure if you are going right direction.
Do you want to rearage position of menu items when user put mouse cursor on it?
It can not work. If user put mouse on "About" item, it disapears and apperas in first line with other elements, but it loses hover state and apears back, under the cursor, so it get back hover state and move to first line again in loop....
You need to apply it to all li on hover of the ul
DEMO http://jsfiddle.net/LstNS/26/
ul
{
list-style-type:none;
margin:0;
padding:0;
}
ul:hover li
{
display:inline;
font-size:30px;
}
Though this effect is a little weird, try this way:
ul {
list-style-type:none;
margin:0;
padding:0;
}
ul:hover li { /*<<<here's the magic!*/
display:inline-block;
font-size:30px;
}
The way you've tried, you're not changing the anchor to be inline, but the list item. The problem is that you're setting the display: inline to only one "li", this is not applied to the others items. You need to make all of your "li" inline on the hover of your whole list (ul).
I'm sorry, but I don't understand your question. Are you trying to inline your links? If so, try this for your css markup..
<style>
ul { list-style-type:none; margin:0; padding:0; }
ul li { display: inline !important; }
ul li a:link, ul li a:visited { text-decoration: none; color: #1122CC; }
ul li a:hover, ul li a:active { text-decoration: underline; }
</style>
I have a simple navigation with a sub-menu on one of my main navigation items. When the user hovers over this i would like the sub-menu item to show and when you go onto the sub-menu li items the main menu link to still have the background colour 'hovered' state still active. Thing is i cant even get the sub-menu item to show!
I have tried the usual display:none and when :hovered { display:block}; but it's ignoring it.
What am u missing? Must be something so simple but cannot see in the css styling.
Here is a link to an example of how it is setup: http://jsfiddle.net/ULSsa/
here is the demo link http://jsfiddle.net/ULSsa/6/ with corrected css
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
ul#nav-1 {
width:60%;
height:46px;
border:1px solid red;
}
ul#nav-1 li {
position:relative;
display:inline-block;
*float:left;
margin-top:16px;
margin-left:-4px;
}
ul#nav-1 li a {
padding:22px 13px;
font-size:14px;
}
ul#nav-1 li:hover a,
ul#nav-1 li a:hover {
cursor:pointer;
background-color:#000;
}
ul#nav-1 li ul#sub-menu {
display:none;
position:absolute;
width:200px;
list-style:none;
left:0;
top:19px;
}
ul#nav-1 li:hover ul#sub-menu {
display:block !important;
}
ul#nav-1 ul#sub-menu li {
float: none;
margin: 0;
}
ul#nav-1 ul#sub-menu li a {
border-bottom:1px solid #dbddd4;
background-color:#f2f2f2;
width:200px;
text-align:left;
display: block;
padding:0;
padding-left:18px;
padding-top:13px;
padding-bottom:13px;
float:left;
margin:0;
}
ul#nav-1 ul#sub-menu li:hover a {
background-color:#3a3a3a;
color:#FFF;
}
Pretty easy. The submenu ul#sub-menu is not a child of the anchor element, but of the list element. You must either put the submenu inside the anchor element or check for the hover on the list element as following:
ul#nav-1 li:hover > ul#sub-menu { instead of ul#nav-1 li a:hover > ul#sub-menu {
http://jsfiddle.net/ULSsa/2/
You are using wrong selector here, it should be
ul#nav-1 li a:hover + ul#sub-menu { /* Note the + sign instead of > */
display:block !important;
}
Demo
Explanation: You are using > which will select direct child elements of a which in your case are none, so you need to use + adjacent selector to trigger the adjacent element
Just change your ul#nav-1 li a:hover > ul#sub-menu to ul#nav-1 li:hover > ul#sub-menu because the submenu it is a child of li and not of an anchor (a).
See the example by clicking here.
If you do not know, the CSS > selector means the specifically child of the element.
Updated
To maintain the link state, just do this:
ul#nav-1 li:hover a {
background-color: black;
}
See the example by clicking here.