I'm trying to style my wordpress sub-menu with CSS to show only when a user hovers the "Color" menu item but I haven't succeed so I need some help please.
Here's how my menu looks like at this state:
The sub-menu shows all the time and there is a weird space after the "Color" menu item. Also, the sub-menu items are displayed one after another and not one below other like a drop-down menu should be.
Could you please help me out?
I'm aware that there are some similar questions to this one but they were of no help.
EDIT: added current CSS menu code that I have in my style.css
nav.main { float: left; }
nav.main li { float: left; margin-right: 11px; }
nav.main li.last-child { margin-right: 0; }
nav.main li a {
color: #7A0018;
display: block;
font-size: 13px;
padding: 50px 7px 22px 7px;
text-decoration: none;
}
nav.main li a:hover { background: #fbf6dc; }
nav.main li.current-menu-item a { background: #fbf6dc; }
where is css for your child list items ? you haven't use display property for those sub-menu which should be done none first then only on hovering them you have to change display property 'block'.
You have given margin-right property 11px; where as ul on default also occupies some margin.
Can you also provide your html frame (code)?
Related
My Dropdown-Menu Background only appears when hovering over the Dropdown sites, but I want it to appear all the time.
My Site is: http://bellezza-ribelle.blogspot.de/
There are Dropdowns on "Meine Bücher", "Rezensionen" and "Challenges" but the background only shows on the first Dropdown-Tabs, which makes it difficult the read the other ones, if you don't hover over them.
How can I make the Background appear on the drop-down-tabs with only hovering over die "Main"-Tabs (Meine Bücher, etc.)?
Add this to your CSS:
#nav1 ul ul li {
background-color: #f3f3f3;
}
You can also have more "air" by using padding for the li:
#nav1 ul ul li {
background-color: #f3f3f3;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
Looks like you might have a little issue with your max-height # .tabs-inner .widget ul on Line 255. Maybe setup a different max-height on :hover?
i making a navigation with wordpress. i want to make a navigation like this
http://www.technikonus.lt/en (vertical navigation in the left). there are parent and submenu items...
I do not know what I have a problem. With css or should I change something in wordpress menu walker.
That's what I get now: Its ok with parent items
But with sub-items i have a trouble because dont know how to align li items when appears sub-menu items:
<li>
<ul><li></li></ul>
</li>
so this is how looks like my menu now http://jsfiddle.net/Yu8fg/
DEMO
CSS
.menu li {
background: url('img/li_bullet.png') 16px no-repeat;
list-style: none;
border-bottom: 2px solid #e6e6e6;
width: 190px;
display: block;
}
.menu > li{
padding-left: 32px;
}
as css inherits by children from parent so padding-left: 32px; was applying to submneu li as well so by using ">" selector we have limited it apllication only to .menu li and wont apply to submenu li
Is there a way to change the css property for example of a box when an element (inside the ) is hover?
for example if I have:
<table>
<tr><td><a>.....</td></tr>
</table>
I want to change the property of the container td when the link a has the mouse over. Is it possible?
Sorry, I have not explained well.
I have a , not a table...it was only an example....
I have
<ul>
<li><a>.....
in my css I have:
#navigation li a {
text-decoration: none;
color: #333;
text-transform: none;
}
#navigation li:hover {
color: white;
background-color: #333;
}
#navigation li a:hover {
color: white;
background-color: #333;
}
but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...
Instead of
#navigation li a:hover {
try
#navigation li:hover a {
but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...
That's because you're putting the hover on the link itself. If you want the link to react when you mouse over the li, simply change where you put the hover pseudo-class:
li:hover a {
color: #d2d2d2;
}
This basically says "when the li is hovered, the link inside it should change to these styles."
Alternatively, you can add padding to the link (ex - padding: 5px), making its reaction field larger. So:
li a {
display: block; /* Required to make it honor padding. */
padding: 10px;
}
li a:hover {
color: #d2d2d2;
}
As long as you don't have your li elements set to a larger size than the a element (via height, width, margin, and/or padding), then the li will "shrink-wrap" the a and be the same size as the total size of the link.
You cant change a property of a parent element, but you can trigger a hover event on the parent td itself:
table td:hover {
background-color: red;
}
You could add display: block to the anchor element which would make the anchor fill the li... Depending on indentation on the ul etc etc..
li a { display: block; }
I'm creating a Inbox in which there will me a asp menu on the side and Inbox on the center. I need to change the font color to red and make it bold when I see a new row from the database. I have used adding on the menu item.
If Not Hovered it looks like this.
If Hovered It Has to look like this.
But the problem is that when I hover on the text it looks like the image shown above, but if I hover slightly on the top or bottom of the menuItenm (Inside the Menu Item but not on Text), Then This looks like this.
CSS used For Menu Item.
.Menu ul li a {
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;}
.Menu ul li a:hover{
background-image: none;
color: white;
background: #424242;}
Here is the code I used to change The color and set the font to bold From server side.
Menu1.Items[0].Text = "<div class='inboxno' >" + "Inbox (" + (i + 1) + ")" + "</div>";
Here is the CSS class of inbox.
.inboxno{
background-image: none;
color: Red;
font-weight:bold;}
.inboxno:hover{
background-image: none;
color: white;
background: #424242;
font-weight:bold;}
I think I understand the problem. It is, that a <DIV> is created around the inbox Text inside the Menu Item and It has the Css inboxno. But the Menu Item has padding and When I place mouse on the padding Area then the inboxno:hover class is not being applied to the Div.
I think one of the solutions to this problem is, if I could access the .Menu ul li a class from .inboxno:hover class I will remove the Padding Property and Set the Same padding property in the .inboxno:hover class.
But I don't know how to access the .Menu ul li a class from .inboxno:hover class.
Can you Help me??
Not sure if you're just asking about the hover or not but try doing
.Menu ul li:hover a {
background-image: none;
color: white;
background: #424242;
}
I removed
background: url(none);
in my stylesheet because of load performance Why Firebug pretends that my stylesheet is calling my xmlrpc?
The problem is that it now causes some glitch on css list.
Any idea how to fix this ?
Thanks.
Update: picture below
http://reboltutorial.com/wp-content/themes/minaflow/glitch.png
Tried to put background: none as suggested but didn't solve the problem/
ul.sidebar_list li ul li ul {
margin: 0px;
padding: 0px!important;
float: left;
width: 100%;
list-style-type: none;
background: none;
}
Referring to your other question I assume you mean the background image on your list items within the sidebar. You have to explicitly declare that you don't want a background image on the inner list items inside the list of widgets in your sidebar.
See line 370 of your styles.css and add background-image:none; as shown:
ul.sidebar_list li ul li {
background-image:none;
}
Good luck with your blog!