I am trying to get this transparent background to work. When the nav drops down, I want the entire background of the list to be transparent and the hover to not be transparent.
UPDATE: This is my jsfiddle
Change:
ul#navigation li:hover > a
{
background:#fff;
color:#4dbaf2;
}
to:
#navigation li a:hover
{
background:#fff;
color:#4dbaf2;
}
Example: http://jsfiddle.net/Z8Cu8/5/
Updated:
Then you would also need to add this to your CSS file:
#navigation li ul li a
{
background-color:rgba(255,255,255,.5);
}
Example: http://jsfiddle.net/Z8Cu8/6/
But I'm not really sure if this is what you asked for?
Related
Hello I need help trying to change the sub nav color hover. I've tried to write code but it only changes the color or the full nav.
When I change it in my CSS it only changes the background color not the hover, and then when I tried to change the hover it changed for the full header menu and the sub nav. I want to change the hover only the the sub nav.
header li > a:hover{
color:#888888;
}
header li > a #active{
color:#888888;
}
header li ul{
overflow: hidden; display: none; background: #f9f9f9; z-index:20;
}
header li ul li a{
line-height:50px;
padding-left:30px;
width:260px;
}
header li:hover ul{
position: absolute; padding: 0; display: block; width: 200px;
}
not clear about your question. do you wanna change submenu color on hover
header li > ul > li > a:hover {background:red}
no this only changes the background to the sub nav not the hover. Here is a screen shot of the HTML. thanks everyone
Heading
I've created a rollover image menu in Dreamweaver. The days of the week are images. So is the rollover image that appears on hover. My problem is when you hover over the days of the week, the hover image pushes the text down.
I've mocked together two screen grabs showing the menu before and during it's hover (http://static.tumblr.com/2wdsnoc/FbPmx6mez/hover-example.png)
I read about z-indexes and tried making the menu have a greater number than the hover but that hasn't worked, nor did it help making the position fixed. In the end this is the only CSS I have styling the menu -
== CSS ==
#nav {
text-align:center;
list-style: none;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
text-decoration:none;
}
Here is the JSfiddle with the full javascript, html and css I've shown just one category for ease.
Thank you in advance!!
Using Javacript is overkill for what you're trying to accomplish, just use a sprite image, and manage the rest via CSS
JSFiddle Demo
HTML:
<ul>
<li class="home">Home</li>
</ul>
CSS
ul { float:left}
ul li { float:left; list-style:none; }
ul a { display:block; text-indent:-9999em; }
ul li.home { width:100px; height:50px; }
ul li.home a { background:url(http://placehold.it/100x100) no-repeat 0 0 }
ul li.home a:hover { background-position:0 -50px; }
Try this http://jsfiddle.net/r2FF7/18/
#nav li a img{
vertical-align:bottom;
}
Full page on: http://jsfiddle.net/r2FF7/18/show/
I have a nested span in a li element. I want the color of the li only to change when it is hovered over. However
#sortable li:hover:not(.ce){
background-color:#3f0;
cursor:pointer;
}
does not work. The li changes color when my cursor is over the span as well. How can I make the li only change color when it --and not the span-- is hovered over?
http://jsbin.com/alExeVO/16/edit
As your <span> is part of the <li> your code behaves as expected. A hack would be to add a hover to your span so it changes to the original color.
Give the span and the li their own hover features. Check it out.
SEE DEMO HERE
ul{
list-style-type:circle;
text-align:center;
}
ul li{
display:inline-block;
border:1px solid purple;
padding:20px;
}
ul li span{
font-size:2em;
}
ul li:hover{
background:orange;
}
ul li span:hover{
background:white;
color:black;
}
for the first time i made a jquery slider using coda slider.
but i want to customize the menu, i want a little a arrow that will show on the top of the li a when you hover it and if it's active.
How will i do that? should i use a image? or can i achieve the effect using css3?
<ul class="navigation">
<li>Sites</li>
<li>Files</li>
<li>Editor</li>
<style>
.navigation {
padding:0px;
margin-bottom:90px;
}
ul.navigation li {
list-style-type:none;
}
ul.navigation li a {
text-decoration:none;
float:left;
width:254px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:40px;
}
ul.navigation li a:hover {
background-color:#666;
/*there should be some sort of background image here or css3? */
}
.active {
/*there should be some sort of background image here or css3? */
}
<style>
ul.navigation li a:active { }
.selected:hover {
/* you can use CSS3 to make arrows or image both */
}
After analyzing, I observed, that plugin adds .selected class to that li element which is selected. So, you can also use CSS3 to make arrows by using :after and :before psuedo classes with display:none and show only on hover of .selected.
ul.navigation > li:hover > a,
ul.navigation > li > a:active,
ul.navigation > li > a.selected {
/* do whatever */
}
Just in case you have a sub menu, I used the direct descendant selector (>).
I am using the following CSS but it never shows background images in IE6. But if I remove the filter .. AlphaLoader command, then it shows with grey background.
Here is my CSS Code
.fg-block1 ul, .fg-block3 ul
{
list-style:none;
}
.fg-block1 ul li, .fg-block3 ul li
{
padding-left:28px;
background:url(images/bullet-2.png) no-repeat left top;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border-bottom:1px dotted #fff;
text-align:left;
background-position:1px 0;
line-height:16px;
padding-bottom:5px;
margin-bottom:5px;
}
.fg-block3 ul li
{
border-bottom:none;
}
.fg-block1 ul li a, .fg-block3 ul li a
{
color:#fff;
text-decoration:none;
}
.fg-block1 ul li a:hover, .fg-block3 ul li a:hover
{
color:#fff;
text-decoration:underline;
}
Try reading this :
http://www.twinhelix.com/css/iepngfix/demo/
AlphaImageLoader hack works only if you set dimensions to the parent container where you load your png as a background.
If you add width and height and display:block to your <li>'s it should be fine. Otherwise - consider different approach.
i recommend jQuery png fix. see links below
jQuery plugin
another source
I never tried the jQuery plugin, but after dealing with a lot of PNG problems in IE6 the best fix I found is by far DD Belated PNG fix. The TwinHelix fix mentioned before presented some problems for me in certain scenarios.