When you move the mouse over image thumbnails, i.e. all images in ul .thumbs, you should see a small box which shows the text in the span embedded in the image link. This does not happen. Why and how do I fix it ?
http://jsfiddle.net/raj4dev/hbyg43d9/3/
html
<body>
<div id="container">
<h1>css slide show</h1>
<ul class="thumbs">
<li><img src="img/thumb1.jpg"><span>Img 1</span></li>
<li><img src="img/thumb2.jpg"><span>Img 2</span></li>
<li><img src="img/thumb3.jpg"><span>Img 3</span></li>
</ul>
<ul class="slides">
<li class="first" id="slide-1"><img src="img/slide1.jpg"></li>
<li id="slide-2"><img src="img/slide2.jpg"></li>
<li id="slide-3"><img src="img/slide3.jpg"></li>
</ul>
</div>
</body>
css
*{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
}
body{
background: #465c8f url(../img/bg-image.jpg) repeat-x;
font-family: 'Arial', 'sans-serif';
}
#container{
width: 718px;
overflow: hidden;
margin: 40px auto;
}
h1{
color: #fff;
text-align: center;
margin-bottom: 20px;
}
ul.thumbs li{
float: left;
margin-bottom: 10px;
margin-right: 9px;
}
ul.thumbs a{
display: block;
position: relative;
width: 85px;
height: 55px;
border: 4px solid transparent;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;/*remove underlines*/
text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15);
}
ul.thumbs img{
border: #333 solid 4px;
}
ul.slide{
overflow: hidden;
clear: both;
border: #333 solid 4px;
}
ul.slides, ul.slides li, ul.slides a, ul.slides img{
width: 705;
height: 350px;
position: relative;
}
ul.thumbs li a:hover span{
position: absolute;
z-index: 101;
bottom: -30px;
left: -22px;
display: block;
width: 100px;
height: 25px;
text-align: center;
border-radius: 3px;
}
This is a clever approach to creating a slide show that does not require JavaScript or jQuery, rather nicely done.
There was a typo in one of your class names in the CSS and that was creating some confusion (change ul.slide to ul.slides).
I guessed that what you wanted to do was display the span on hover, which means that to begin with, the span need to be hidden using display: none, and I added a new CSS rule for ul.thumbs li a span to correspond with ul.thumbs li a:hover span. (Note, you could also use :hover on li instead and get a similar effect.)
I also altered how the floated elements are styled. If you add overflow: auto to ul.thumbs, all the floats are contained within the parent block and you can then add the bottom margin to the parent ul instead of the li, which is more advantageous in some designs, your can decide.
For the thumbnail images, see ul.thumbs img, I set the height to 100% and let the thumbnails scale to fit the inherited height (from li) and use vertical-align: top if you want to remove the whitespace below the images.
I also set the with on the li instead of the a, but the distinction really depends on the details of our design.
For the most part, your CSS is good as is. The only missing concept was the initial hiding of the span so that it can appear on hover.
Note: I did not pay much attention to the width of the span and its exact positioning. If you have a lot of text (like a caption), the width of 100% will not be enough (I set it that way to make it fit in the li container). You can change it as you see fit.
*{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
}
body {
background: #465c8f url(../img/bg-image.jpg) repeat-x;
font-family: 'Arial', 'sans-serif';
}
#container{
width: 718px;
overflow: hidden;
margin: 40px auto;
}
h1{
color: #fff;
text-align: center;
margin-bottom: 20px;
}
ul.thumbs {
border: 1px dotted white; /* for demo only... */
overflow: auto;
margin-bottom: 10px;
}
ul.thumbs li{
float: left;
width: 85px;
height: auto;
margin-right: 9px;
border: 1px dotted white; /* for demo only... */
}
ul.thumbs a {
display: block;
position: relative;
border: 4px solid transparent;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;/*remove underlines*/
text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15);
}
ul.thumbs img{
vertical-align: top; /* if you need to remove whitespace below image */
height: 100%;
border: #333 solid 4px;
}
ul.slides { /* fix typo in class name */
overflow: hidden;
clear: both;
border: #333 solid 4px;
}
ul.slides, ul.slides li, ul.slides a, ul.slides img{
width: 705;
height: 350px;
position: relative;
}
ul.thumbs li a span { /* Need to provide a default styling for the span... */
position: absolute;
bottom: 0px;
left: 0px;
display: block;
width: 100%;
height: auto;
text-align: center;
border-radius: 3px;
background-color: white;
display: none;
}
ul.thumbs li a:hover span {
display: block;
}
<div id="container">
<h1>css slide show</h1>
<ul class="thumbs">
<li><img src="http://placehold.it/60x60"><span>Img 1</span></li>
<li><img src="http://placehold.it/60x60"><span>Img 2</span></li>
<li><img src="http://placehold.it/60x60"><span>Img 3</span></li>
</ul>
<ul class="slides">
<li class="first" id="slide-1"><img src="http://placehold.it/240x120"></li>
<li id="slide-2"><img src="http://placehold.it/180x120"></li>
<li id="slide-3"><img src="http://placehold.it/120x120"></li>
</ul>
</div>
Your hover styles work fine, but you have ul.slides on top of ul.thumbs, so the :hover action isn't being passed to your anchor.
In the future, please share the relevant pieces of code in your question on StackOverflow for posterity and searchability.
Just add z-index: 2; to your ul.thumbs a css like coryward said your link is underneath something so you can't hover over it you need to bring it to the top so you can hover on it.
Related
I'd like to do something like this image:
ul menu li tags
Should I use a double tag for every element?
For example:
<ul class="menu">
<div class="outside"><li class="inside">Firefox</li></div>
<div class="outside"><li class="inside">Chrome</li></div>
<div class="outside"><li class="inside">Opera</li></div>
</ul>
Or maybe a double li tag?
I have tried in CSS the linear-gradient property, but with just one tag, and as I want to get the same result like in the image, it seems to me that there has to be two different tags with different background colors and the one with the black color just has to have a higher z-index property.
I'm quite new and a bit bad at design and styling, so I just can thank you so much in advance for your help!
You can use the pseudo element ::before to create the left colored side
Note, the div's you used is invalid as a direct child of an ul, so I removed them
ul.menu {
display: flex;
list-style: none;
padding: 0;
}
ul.menu li {
margin: 0 5px;
}
ul.menu a {
position: relative;
display: inline-block;
width: 120px;
background: black;
color: white;
padding: 4px 0 4px 10px;
text-decoration: none;
text-align: center;
}
ul.menu a::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
background: gray;
width: 10px;
}
<ul class="menu">
<li>Firefox</li>
<li>Chrome</li>
<li>Opera</li>
</ul>
Or a left border
ul.menu {
display: flex;
list-style: none;
padding: 0;
}
ul.menu li {
margin: 0 5px;
}
ul.menu a {
position: relative;
display: inline-block;
width: 120px;
background: black;
color: white;
padding: 4px 0;
text-decoration: none;
text-align: center;
border-left: 10px solid gray;
}
<ul class="menu">
<li>Firefox</li>
<li>Chrome</li>
<li>Opera</li>
</ul>
You can use linear-gradient, just place both values of the gradient to be at the same point (ex: gray 10%, black 10%) so they split the background at that point.
Side Note: You should also remove the outter divs around your li tags, because they are not valid inside ul element.
ul.menu {
list-style: none;
display: flex;
}
ul.menu li.inside {
background: linear-gradient(to right, gray 10%, black 10%);
margin-left: 5px;
padding: 5px 5px 5px 20px;
width: 120px;
display: block;
box-sizing: border-box;
}
li a {
color: white;
}
<ul class="menu">
<li class="inside">Firefox</li>
<li class="inside">Chrome</li>
<li class="inside">Opera</li>
</ul>
I am trying to create the navigation as per the picture below, where the text is centered aswell as the icon, but the text is left aligned to the icon. The link needs to be the width of its container, this also needs to be responsive:
How do you go about this?
CODEPEN DEMO HERE
HTML
<ul class="mobile-home-section">
<li>PROPERTY</li>
<li>FUTURE PLANNING</li>
<li>COMMERICAL</li>
</ul>
CSS
.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158
}
.mobile-home-section li {
background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
background-repeat: no-repeat;
background-position: 0 10px;
padding-left: 50px;
}
.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 0;
display: block;
border-bottom: 1px solid white;
}
EDIT Changed the code to make it responsive
If i was you, I would not place the icon for the link as a background image. I would place the icon as an image inside of the link tag.
HTML
<div class="container">
<ul class="mobile-home-section">
<li>
<a href="#">
<span><img src="img2.jpg">PROPERTY</span>
</a>
</li>
<li>
<a href="#">
<span><img src="img2.jpg">FUTURE PLANNING</span>
</a>
</li>
<li>
<a href="#">
<span><img src="img3.jpg">COMMERICAL</span>
</a>
</li>
</ul>
</div>
CSS
.container {
background: #273F87;
}
ul.mobile-home-section {
display: block;
list-style-type: none;
padding: 0px;
}
ul.mobile-home-section li:nth-child(2) {
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
ul.mobile-home-section li a {
display: block;
color: #fff;
padding: 0px;
font-family: serif;
margin: 0px auto;
text-decoration: none;
}
ul.mobile-home-section li a span img {
width: 50px;
height: 50px;
padding-right:20px;
display: inline-block;
vertical-align: middle;
}
ul.mobile-home-section li a span {
padding: 10px 0px;
width: 230px;
display:block;
margin: auto;
}
Updated JSfiddle
As others have said, it's going to be easier using an image. The most important thing to know is that not all display: values support vertical alignment - my go-to is display: inline-block, but if you're using flexbox it might be more convenient to use display: flex
Depending on context, I typically use one of these three solutions:
Adjacent inline blocks
CSS tables
A pseudoelement with a background image
Here are examples of each of those.
Notes:
For the table solution, the <li> loses its bullet and gets an auto width (it's as wide as its contents) - depending on your context, you might want to add on a width: 100% to #or-another li
For the background image solution, if the image isn't necessarily the same size as the container you'll want to use background: no-repeat center center; -webkit-background-size: cover; background-size: cover; background-image:url(...);
In all three cases, we're accounting for the possibility that either of the elements could be the taller one. If you know the image is always going to be taller than the text, you could target #or-another span instead of #or-another li > *, and you could drop #one-more li span {...} entirely
#one-way li > * {
display: inline-block;
vertical-align: middle;
}
#or-another li {
display: table;
}
#or-another li > * {
display: table-cell;
vertical-align: middle;
}
#one-more li span {
display: inline-block;
vertical-align: middle;
}
#one-more li:before {
content:'';
width: 200px;
height: 200px;
display: inline-block;
vertical-align: middle;
background:url('https://placehold.it/200x200');
}
<ul id="one-way">
<li>
<img src="https://placehold.it/200x200" alt="" />
<span>1</span><!-- or div or p or what have you -->
</li>
</ul>
<ul id="or-another">
<li>
<img src="https://placehold.it/200x200" alt="" />
<span>2</span>
</li>
</ul>
<ul id="one-more">
<li>
<span>3</span>
</li>
</ul>
Add a text-align: center; in the .mobile-home-section class to make them align to the center and remove the padding-left: 50px; under .mobile-home-section li class. And these two CSS will become:
.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158;
text-align: center;
}
.mobile-home-section li {
background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
background-repeat: no-repeat;
background-position: 0 10px;
}
You can see the demo here.
Try just editing the paddings and background-position.
.container {
width: 600px;
}
.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158
}
.mobile-home-section li {
background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
background-repeat: no-repeat;
background-position:50% 15px;
padding-left: 50px;
}
.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 50%;
display: block;
border-bottom: 1px solid white;
text-align:left;
}
UPDATE try this
.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 0 20px 50%;
display: block;
border-bottom: 1px solid white;
text-align: left;
}
Update the padding of .mobile-home-section li a
The selectors could use some love, but here is my codepen:
<div class="container">
<ul class="mobile-home-section">
<li><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>PROPERTY</span></span>
</li>
<li><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>FUTURE PLANNING</span></span>
</li>
<li><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>COMMERICAL</span></span>
</li>
</ul>
.container {
width: 600px;
}
.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158
}
.mobile-home-section li {
margin: 0;
padding: 0;
}
.mobile-home-section li a {
display: block;
height: 3em;
}
.mobile-home-section li a > span {
display: block;
width: 55%;
padding: 0;
margin: 0 auto;
text-align: left;
}
.mobile-home-section li a > span > span {
line-height: 2em;
font-size: 1.4em;
position: relative;
top: -0.4em;
}
.mobile-home-section li span img {
margin-right: 0.75em;
height: 2.6em;
position: relative;
top: 0.2em;
}
.mobile-home-section li a {
border-bottom: 1px solid white;
color: white;
display: block;
font-family: 'Times New Roman';
font-size: 1.2em;
padding: 0;
text-align: center;
text-decoration: none;
}
http://codepen.io/anon/pen/PZwvZz
I would like add a border-bottom that displays when I hover over it with the mouse. I want it to override the border underneath so it looks like it changes colour. An example of this can be found here http://www.formaplex.com/services (in the nav bar)
Here is a jsfiddle https://jsfiddle.net/ey006ftg/
Also, a small question: does anyone know why there is a small gap in-between the the links (can be seen when hovering from link to link) and how to get rid of it.
Thanks
Just add this to your css:
nav a {
border-bottom: solid transparent 3px;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/ey006ftg/1/
You can use a negative margin to overlay the border below, as shown:
nav {
border-top: 1px solid grey;
border-bottom: 3px solid black;
width: 100%;
font-size:0;
}
nav ul {
width: 1056px;
margin: 0 auto;
text-align: center;
width: 1056px;
}
nav ul li {
display: inline-block;
width: 17%;
}
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
}
nav a:hover {
color: orange;
transition: 0.2s;
border-bottom: solid orange 3px;
margin-bottom: -10px;
}
a {
color: black;
text-decoration: none;
outline: 0;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
As for fighting the inline gap, seeing as you defined a font-size later for the a tag, I would just add a font-size:0, which I added to nav in the above Snippet.
fiddle demo
Simply set your default border to transparent - change color on hover
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: solid transparent 3px; /* add this! */
transition:0.3s; /* or even this :) */
}
Try this fiddle
To set border-bottom the way you want, you have to add border to anchor tag like this:
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid black;
}
and to make sure the space between menu items is gone use a little fix adding negative margin to your li tags inside menu like this:
nav ul li {
display: inline-block;
width: 17%;
margin-right: -4px;
}
I am semi-new to web development and am currently working on a webpage with a fixed top navbar. I have my logo in the center of a list and my links outside it. I would like the links to be vertically centered. I will include a screenshot and the code. Maybe you can help me? Thanks a lot! I appreciate your time.
Screenshot of Navbar
HTML:
<div class="header">
<div class="table">
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Before & After</li>
<li><img src="photos/logo.png"> </li>
<li>Portfolio</li>
<li>Facebook</li>
<li> <script src="js/email.js"></script>
</ul>
</div>
</div>
</div>
CSS:
#font-face {
font-family: offbeat;
src: url(offbeat.woff);
font-weight: normal;
font-style: normal;
}
body {
margin: 0 auto;
padding: 0;
background: rgb(209,202,178);
}
.header {
background: rgb(175,166,135);
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: fixed;
top: 0px;
z-index: 2;
border-bottom: 1px solid rgb(102,102,102);
}
.table {
display: table;
float: left;
left: 50%;
width: 1150px;
height: 100px;
line-height: 100px;
overflow: auto;
position: absolute;
}
.logo img {
z-index: 4;
position: relative;
left: 50%;
}
.navbar {
float: left;
right: 48.5%;
position: relative;
}
.navbar li {
display: inline;
padding: 0px;
margin: 0 auto;
width: 100%;
margin-right: 40px;
text-shadow: 1px 1px rgb(115,109,88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
white-space: nowrap;
overflow: auto;
}
.navbar a {
text-decoration: none;
color: rgb(255,255,255);
text-align: center;
border-bottom: 1px solid;
border-color: rgb(255,255,255);
padding: 10px;
margin: 5px;
white-space: nowrap;
}
.navbar a:hover {
background-color: rgb(135,127,99);
}
I would look to use line-height to achieve this. Set the height on the parent container .navbar to 100px then set a line-height of 100px on the .navbar li.
This will mean the link text is always in the centre of the navbar. To ensure the logo was in the centre I would add vertical align middle.
As a bonus I would look to implement box-sizing it greatly helps with layouts that use padding.
#font-face {
font-family: offbeat;
src: url(offbeat.woff);
font-weight: normal;
font-style: normal;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0 auto;
padding: 0;
background: rgb(209, 202, 178);
}
.header {
background: rgb(175, 166, 135);
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: fixed;
top: 0px;
z-index: 2;
border-bottom: 1px solid rgb(102, 102, 102);
}
.navbar {
margin: 0;
padding: 0;
text-align: center;
}
.navbar ul {
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
padding: 0px;
margin-right: 40px;
text-shadow: 1px 1px rgb(115, 109, 88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
line-height: 100px;
vertical-align: middle;
}
.navbar img {
vertical-align: middle;
}
.navbar a {
text-decoration: none;
color: rgb(255, 255, 255);
text-align: center;
border-bottom: 1px solid;
border-color: rgb(255, 255, 255);
padding: 10px;
margin: 5px;
white-space: nowrap;
}
.navbar a:hover {
background-color: rgb(135, 127, 99);
}
<div class="header">
<div class="navbar">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Before & After
</li>
<li>
<img src="http://placehold.it/50x50">
</li>
<li>Portfolio
</li>
<li>Facebook
</li>
<li>
<script src="js/email.js"></script>
</ul>
</div>
</div>
I edit your base code as you used a lot of needed positioning techniques. Please compare with your code.
try adding this to your css
.navbar ul
{
display:inline;
vertical-align:middle;
}
Let the ul padding:20px 0px; direct the center vertically and text-align:center direct your center horizontally. Also use inline-block so that you can give your entire li focus for menu linking purposes
here is your problem solved FIDDLE
p.s. Your main problem is you are using way too much css. This is not supposed to be such a hard implementation and you definitely do not need absolute positioning, but fixed positioning. The rest is just colors.
If you need to give more padding to the top so they look closer to the bottom, use the padding property to distribute the padding as needed (i.e. padding: 40px 0px 5px) etc.
Here is a common saying we have...Use "absolute" only when "absolutely" necessary ;)
heres how i did it.
core change on css:
.navbar {
display:table;
margin: 15px auto;
}
.navbar li {
line-height:70px;
display: block;
padding: 0px;
float:left;
margin: 0 auto;
margin-right: 40px;
text-shadow: 1px 1px rgb(115,109,88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
white-space: nowrap;
}
simplified html:
<div class="header">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Before & After</li>
<li><img src="http://img1.wikia.nocookie.net/__cb20120630091052/farmville2/images/0/0f/Google-Logo.png" height=70px /></li>
<li>Portfolio</li>
<li>Facebook</li>
</ul>
<script src="js/email.js"></script>
</div>
http://jsfiddle.net/4a8dkz3n/
i messed around a bit on jsfiddle so it might be a bit different,
but basically i gave display:table to so that i can give "margin:0 auto;" to it
and used 'line-height' to vertical alignment of the list menu.
also simplified the code a bit.
I have this select that is behaving strange on IE9.
First of all links that should open wiki page not working only on IE9 browser and second problem is on hover, why when cursor pass over help and log off the icon is overridden by hover background color?
<ul id="main">
<li class="username" tabindex="1" > <a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">LogOff</li>
</ul>
</li>
</ul>
CSS:
ul#main {
color: gray;
width: 120px;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
border-top: 1px solid #f2f2f2;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:green;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
Fiddle: http://jsfiddle.net/RwtHn/1455/
I can at least help you with the Icon issue. The issue is that you are overidding the background with a color. You can have a color or a background image. Not both. You will need to either have a different image in the background that is essentially the same but with different colors, do without the image when you hover or do without the color when you hover.
I'm sorry I can't be more helpful with the IE problem. I sincerely hate IE for things like this.
EDIT: This is something that you can do as mentioned in the comment below
.logoff:hover{
background: #f4f4f4 url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png");
height: 25px;
}
Thanks ANeves for this information. I learnt something here too.
OK, for the overridden icon issue credits goes for "ANeves",
but you may use below CSS for preventing extra code lines:
#main > li > ul > li:hover
{
background-color: #f4f4f4;
}
for the IE9 clicking issue, just add below CSS:
#main ul:hover
{
display: block;
}
and that's it
thanks to http://www.cssplay.co.uk/menus/cssplay-click-click.html
On hover you are overriding the background property. Since this property has both the colour and the image, you are overriding the image as well.
Set only the colour, then:
.help:hover{
background-color: #f4f4f4;
}
.logoff:hover{
background-color: #f4f4f4 ;
}
http://jsfiddle.net/RwtHn/1456/