Image hover not working..on pure css - html

<div id="headermenu">
<ul >
<li id="menu1"><img src="images/menu1.png"/></li>
<li id="menu2"><img src="images/menu2.png"/>
<ul class="submenu2">
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
</ul>
</li>
<li id="menu3"><img src="images/menu3.png" /></li>
<li id="menu4"><img src="images/menu4.png"/></li>
<li id="menu5"><img src="images/menu5.png"/></li>
</ul>
</div>
css
#headermenu ul ul {
display: none;
}
#headermenu ul{
padding:0;
margin:0;
white-space:nowrap;
}
#headermenu ul li{
width: 20%;
list-style-type:none;
display:inline-block;
margin-bottom:15px;
float:left;
left:0;
}
#menu1:hover{
background: url('images/menu1hover.png');
}
Hover is not working, I wonder how to make a list with image hover, I also want to know how to make a sub list when a li is hover. And if there is another list on sub list how to make it.. on pure css..

As you haven't given us all the information we need to solve this I will take a guess. As I said in the comments. It could be caused by the <img> sitting on the background, so when you hover you cant see the background at all.
HTML:
<div id="headermenu">
<ul>
<li id="menu1"><img src="http://img.gawkerassets.com/img/19euo1gaaiau9jpg/original.jpg"/>
</li>
</ul>
</div>
CSS:
#headermenu ul ul {
display: none;
}
#headermenu ul {
padding:0;
margin:0;
white-space:nowrap;
}
#headermenu ul li {
width: 20%;
height: 50px;
list-style-type:none;
display:inline-block;
margin-bottom:15px;
float:left;
overflow: hidden;
border: 1px solid;
}
#menu1:hover {
background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
}
Here is your code as is, the background image is changing but cannot be seen because of the <img> in front.
DEMO HERE
Now here is the same code but the <img> being removed.
<div id="headermenu">
<ul>
<li id="menu1">
</li>
</ul>
</div>
DEMO HERE
We can see that the hover does work but the <img> was coving it up.
Solutions:
Just simply set a background on each li and then a background when on hover.
CSS:
#menu1 {
background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
}
#menu1:hover {
background: url('http://img.gawkerassets.com/img/19euo1gaaiau9jpg/original.jpg');
}
DEMO HERE
You could also set the display to none for the img when on hover.
CSS:
#menu1 {
background: url('http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg');
}
#menu1:hover img {
display: none;
}
DEMO HERE
There are many more ways but these are two that will work.

You need to use either a background image, or an actual img for both before and after states. In your example, when the mouse hovers over #menu1 the background behind the menu1.png image is changed but menu1.png is obscuring it from view.

try this code
DEMO
<body> </body>
.urlImg { width: 140px; height:140px; display:block; background-image: url("http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg"); } .urlImg:hover { background-image: url('http://placehold.it/140x140'); }

Related

Remove random padding from my UL LI?

I have some sort of space in between my li tags I don't where it's coming from? How can i remove this?
Also, I'd like to change the color of the font to white on hover of the li
JSFIDDLE http://jsfiddle.net/omarel/tfyxL66c/
CSS
.nav_container {
text-align: center;
width:100%;
}
.nav_container ul {
/* margin-top:15px; */
margin-left:30px;
}
.nav_container ul li {
display: inline-block;
text-align: center;
padding-left:40px;
padding-right:40px;
margin:0px;
height:80px;
cursor:pointer;
}
.nav_container ul li:hover {
background-color:#08298A;
}
.nav_container a:hover {
color:#fff;
}
header {
width:100%;
margin: auto;
box-shadow:0 0 8px rgba(0,0,0,0.1);
min-width:410px;
}
.navlogo {
z-index:99;
}
.navlogo img {
width:100px;
margin:10px 10px 10px 10px;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.centerdiv {
margin:0 auto;
}
#media only screen and (min-width:700px) {
header {
max-width:1250px;
}
.container {
max-width:1250px;
}
.box2 {
width:32%;
height:300px;
float:left;
}
.box2left {
width:65%;
height:600px;
float:left;
}
}
div {
border:solid 1px #E6E6E6;
position:relative;
}
ul li {
border:solid 1px #E6E6E6;
}
HTML
<div class="navlogo floatleft">
<img src="images/logo.png" />
</div>
<div class="floatleft">
<div class="nav_container">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="floatright">
<div class="nav_container">
<ul>
<li>Profile</li>
<li>Sign out</li>
</ul>
</div>
</div>
</header>
<div style="clear:both;"></div>
Answering your second question first as the answer is shorter: use the :hover pseudo class.
EXAMPLE
li:hover a{color:#fff;}
More information on pseudo classes
To answer your first question, then; setting an element's display property to inline or inline-block will cause the white space surrounding it to be treated just like the space surrounding any other inline element.
You can workaround it in a number of ways
Remove all line breaks from within your list:
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
Use comments to hide the line breaks from the browser:
<ul><!--
--><li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li><!--
--></ul>
Use CSS to set the font-size of the parent element to 0 and then "reset" it for the child elements:
html{font-size:20px;}
ul{font-size:0;}
li{font-size:1rem;}
Alternatively, if you're not 100% set on using display:inline-block, you can use floats or flexbox instead.
To change the color of the links to white, use this css:
.nav_container ul li:hover a {
color:white;
}
However, only the text will be clickable, the li element won't be clickable. Another way to do the same thing is to apply all width/height/background styling to the link, instead of the li.
As Shaggy mentioned, to eliminate extra spacing when using inline-block you should remove all spaces in your html between your menu li items.
As for changing the link color on hover you should add the following to your css code:
.nav_container li:hover a {
color:#FFF;
}

Can not align dropdown menu along the length of the page

I need to align dropdown menu along the length of the page. I have a menu :
<ul class="nav navbar-nav menu">
<li>About the company
<img src="images/arr1.png" ></img>
<ul>
<li class="first_li">Mission</li>
<li>History</li>
<li>Vacancy</li>
<li>Best Experts</li>
</ul>
</li>
</ul>
Then I have some css styles to make this dropdown menu to be align in as I thougth right manner.But it doesn't work correctly.
.menu li{
list-style: none;
float: left;
line-height:84px;
}
.menu li:hover > ul {
display: block;
background-color: rgb(231,231,231);
position:absolute;
top:84px;
left : 0px;
width: 100%;
text-align:center;
padding:0;
z-index:1;
}
.menu .language:hover > ul {
display:block;
width:84px;
line-height:30px;
}
Part of the problem looks like you have most of your list style in the 'hover' part. Try putting that into the general menu style.

Size background list item dependent of item size

I have a unordered list as a menu.
All items have a background-color. What I want is that the width of the item does not fill the width of the list, and that the item (including the background-color) is aligned to the right in the list. I hope you understand and might have an answer.
HTML:
<ul class="menu">
<li><a class="menuitem">First</a></li>
<li><a class="menuitem">Secondwithlongertext</a></li>
<li><a class="menuitem">Thirdbitshorter</a></li>
</ul>
And CSS:
ul li a.menuitem{
background-color:#000;
color:#fff;
}
As per you requirement you have to wrap the text inside the <span>. Here is a working Demo.
Here is the HTML code.
<ul class="menu">
<li><a class="menuitem"><span>First</span></a></li>
<li><a class="menuitem"><span>Second Item with long text can come here</span></a></li>
<li><a class="menuitem"><span>Thirdbitshorter</span></a></li>
</ul>
ul {
background-color:gold;
color:#fff;
}
ul li{
background: #990000;
}
ul li a {
text-align: right;
}
ul li span{ background:black;}
ul {
background-color:#000;
color:#fff;
width: 100%;
}
ul li{
background: #990000;
width: 50%;
}
ul li a {
text-align: right;
}
This should work for you if I understand what you're asking. Sometimes I make the backgrounds different colors just to clearly be able to see what is going on.

How to align breadcrumb

I have a a breadcrumb in my subheader however the active breadcrumb appears underneath the list. I would like it so that they are both in the same line.
HTML:
<div id="breadcrumb">
<ul>
<li>Home ></li>
<li class="active">Marketing Items</li> </ul> </div>
CSS:
#breadcrumb {
font-size:11px;
background-color:#F2F2F2;
}
#breadcrumb ul {
margin:0px;
margin-bottom:0px;
margin-left:4px;
list-style: none;
background-color:#F2F2F2;
}
#breadcrumb .active {
color:#B3B3B3;
}
Here is also the jsfiddle: http://jsfiddle.net/4nRPY/
Use float:left or display: inline-block. But, with float left you have to clear the element right after that.
#breadcrumb ul li{
float: left;
}
Use display: inline-block; on your <li> tags
#breadcrumb ul li {
display: inline-block;
}
DEMO: http://jsfiddle.net/4nRPY/2/
You can this way to chive to that
li{float:left;}
Demo http://jsfiddle.net/4nRPY/3/
I prefer a pseudo element:
JSFiddle
HTML
<div id="breadcrumb">
<ul>
<li>Home</li>
<li class="active">Marketing Items</li>
</ul>
</div>
CSS
#breadcrumb ul li:after {
content:">";
padding:0 0.5em;
}
#breadcrumb ul li:last-child:after {
content:"";
padding:0;
}
Slighty less browser support but no extraneous HTML mark-up and you can change it throughout your site by changing one CSS property.

How to stop css inheritance in sub unorder list

I am trying to setup a menu with sub menu that contains ul. My question is how to remove the sub ul menu background image that inherits from the menu ul. I appreciate any help. Thanks a lot!
my html
<ul id="menuBar">
<li id="test1">test1</li>
<li id="test2">Pro1
<div class="subMenu">
<ul>
<li>sub1</li> //all li a would get the same
//backgroundimage btForTest2.jpg
// butI just want a clean background
<li>sub2</li>
<li>sub3</li>
</ul>
<ul>
<li>Volleyball</li>
<li>Walking</li>
<li>Water Shoes</li>
</ul>
</div> <!--end of submenu-->
</li>
</ul>
CSS:
#menuBar #mens a{
background:url("../images/btForTest2.jpg") no-repeat;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}
.subMenu li a{
list-style:none;
margin: 0;
padding: 5px;
width: 200px; //width is 112px not 200 px
float: left;
color:#ffffff;
text-decoration:none;
}
.subMenu li a
{
background: none;
}
if it is not sticking, you can add the !important flag
.subMenu li a
{
background: none !important;
}
Add the following to the .subMenu li a section:
background:none !important;
Edit: Opened tab before durilai answered, so I didn't see his answer...
Instead of adding another rule to overwrite the mistake, rewrite the selector on your first rule to only apply to the outer list items:
#menuBar > li > a {
background: red;
}
> means a direct descendant.