hi friends i want to applay css on children element when hove on parent element like.
<html>
<head></head>
<style>
.nav_menu{
width:100%;
}
.nav_menu ul{
list-style-type:none;
list-style:none;
}
.nav_menu ul li{
display:inline-block;
padding:10px 20px;
background:#000000;
margin-left:10px;
}
.nav_menu ul li a{
text-decoration:none;
color : #FFFFFF;
}
// i alread try to write .nav_menu ul li:hover + a or
//.nav_menu ul li:hover, a
.nav_menu ul li:hover ~ a{
background : #FFFFFF;
color : #000000;
}
</style>
<body>
<div class='nav_menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
</ul>
</div>
</body>
</html>
i want hover on the li tag when change the background of li tag and with the change color of a tag.
i don't know how to change children element css to hover on parent element.
please help.
thank you
li:hover a {
color: red;
}
li:hover {
background: green;
}
also, sometimes you might need to add this to a
.nav_menu a {
display: inline-block;
}
Related
I am trying to create a menu as follows. When hover the menu item, it should be animate the height from bottom to top. So I positioned anchor tag absolute and gave bottom 0. When anchor tag is positioned absolute, It does not show menu properly.
css is as follows.
#navigation
{
position:relative;
float:right;
margin-top:55px;
padding-right:45px;
}
#navigation ul
{
text-decoration:none;
list-style:none;
display:inline;
position:relative;
padding:0px;
height:30px;
margin:0px;
}
#navigation ul li
{
position:relative;
float:left;
}
#navigation ul li a
{
position:absolute;
bottom:0px;
padding:10px 5px;
width:79px;
display:block;
text-decoration:none;
background-color:#1c1c1c;
color:rgb(255,255,255);
/*margin:2px;
margin-bottom:0px;*/
text-align:center;
font-family:Tahoma;
/*position:relative;*/
font-size:15px;
}
html is as follows.
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div>
http://jsfiddle.net/90up4hz2/
demo - http://jsfiddle.net/victor_007/90up4hz2/1/
the issue is because of position:absolute for the li and position:relative the width becomes 0 try adding fixed with for li
#navigation ul li {
position:relative;
float:left;
height:30px;
width:89px;
}
http://jsfiddle.net/L0r493ag/2/
I created this for you, dont use ul li or just add the follow css to them or to any object
.boxhead
{
color: #afaeae;
text-decoration: none;
font-size: 17px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
background:#000000;
padding-left:10px;
padding-right:10px;
height:50px;
}
.boxhead:hover
{
color: #7d7d7d;
}
and then
<div id="navigation">
<a class="boxhead" href="index.php">Home</a>
<a class="boxhead" href="about-us.php">About Us</a>
<a class="boxhead" href="products.php">Products</a>
<a class="boxhead" href="contact-us.php">Contact Us</a>
</div>
I was hoping if you can help me with my little problem. I am just updating one of my developers style sheets. I am a beginner in CSS so I am having difficulties adding the second level submenu in it.
Here's the link DEMO PAGE
This is my HTML
<div id="sidebar"><i class="icon icon-home"> </i>Dashboard<ul style="display: block;">
<li class="active"><i class="icon icon-home"></i> <span>Dashboard</span> </li>
<li> <i class="icon icon-signal"></i> <span>Charts & graphs</span> </li>
<li><i class="icon icon-th"></i> <span>Tables</span></li>
<li><i class="icon icon-fullscreen"></i> <span>Full width</span></li>
<li class="submenu"> <i class="icon icon-th-list"></i> <span>API</span> <span class="label label-important">4</span>
<ul>
<li>
boom
<ul>
</ul>
</li>
<li>% of National Roads Paved</li>
<li>Process</li>
<li>Regional Profiles</li>
</ul>
</li>
</ul>
</div>
and this is my CSS
/* Top user navigation */
#sidebar{ width:100%; background:#252125; position:absolute; clear:both; top:62px;}
#sidebar > ul{ margin:0px; padding:0px; width:100%; display:block; z-index:999;}
/*Border right sidebar */
#sidebar > ul > li { list-style-type:none; float:left; display:block; margin:0px; border-right:1px solid #464652; position:relative; padding:10px; cursor:pointer}
/*Border right */
#sidebar > ul > li a{ padding:12px 0;}
#sidebar > ul > li:hover ul { display:block;}
/*#sidebar > ul > li:hover { background-color:#41bedd;} */
/*On hover menu */
#sidebar > ul > li:hover { background-color:#464652;}
/*On hover menu */
#sidebar > ul > li:hover a{ background:none;}
/*Modules color */
#sidebar > ul li ul { margin:0px; padding:0px; display:none; z-index:999; position:absolute; left:0px; top:40px; background:#464652; min-width:200px;}
/*Modules color */
#sidebar > ul li ul li { list-style-type:none; margin:0px; font-size:12px;line-height:30px; }
#sidebar > ul li ul li a { display:block; padding:5px 10px; color:#fff; text-decoration:none; font-weight:bold; }
/*Modules color on hover */
#sidebar > ul li ul li:hover a{ background-color:#5A5A69;}
/*Modules color on hover*/
#sidebar > ul li span { cursor:pointer; margin:0px 2px 0 5px; font-weight:bold; color:#fff; font-size:11px; }
#sidebar > ul li a i{ background-image: url("../img/glyphicons-halflings-white.png"); margin-top:4px; vertical-align: top;}
I know this post has been posted from different threads. I really cant understand them. Hope you understand. Thanks in advance.
First of all, in your sample HTML, you don't have any lis in your tertiary level. Put some in there.
As for your CSS, it's presently set up to handle the showing and hiding of UL's below the top level one on hover. We need to get more specific so that it excludes the 3rd level--as well as then get more specific to and add a second level hover style.
Where you have this:
#sidebar > ul > li:hover ul { display:block;}
Change it to this:
#sidebar > ul > li:hover > ul { display:block;}
The first will show ALL child ULs of the LI on hover. The latter will show only the direct child of the LI on hover.
Now we need to add a trigger for the 3rd level:
#sidebar > ul > li > ul > li:hover > ul { display:block; top: 0; left: 200px}
While we're at it, we included a new set of positioning so that it appears to the right of the current hover rather than below (which would cover up the second level navigation.
Working example: http://jsfiddle.net/wS9t3/
I want a navigation like structure in the header of my page, so I decided I'd use an inline list however the result it is producing is not what I imagined. It is placing the elements on 3 separate lines.
Element 1 Element 2 Element 3
The above is what I am aiming to achieve, however currently I get,
Element 1
Element 2
Element 3
This is my CSS and HTML snippets:
CSS
#nav li {
display: inline;
}
HTML
<ul id="nav">
<li><button id="left_nav"><</button></li>
<li><div id="day">Monday</div></li>
<li><button id="right_nav">></button></li>
</ul>
Thanks.
Use inline-block instead of inline, you can also use this by float...
By Inline-block,
#nav li {
display: inline-block;
}
By Float,
#nav {
overflow:hidden;
}
#nav li {
float:left; margin-right:10px;
}
Try using the following:
#nav li {
list-style: none;
float: left;
margin-right: 5px;
}
Add this to the CSS for your LI's...
li{ display:inline; }
Use
#nav li {
display: inline-block;
}
Demo: Fiddle
use float:left or float:right aligns side by side
#nav li {
float:left;
}
You have buttons and div inside li give width to div and button that will work.
Because div is block level element and its use all the width of page if you not assign fixed width.
OR
apply float: left; to li that will work too.
The structure is different for different users.
Check the link: http://jsfiddle.net/wWyMW/1/
<div id="nav">
<ul>
<li>
Element <span>1</span>
<div class="clr"></div>
</li>
<li>
Element <span>2</span>
<div class="clr"></div>
</li>
<li>
Element <span>3</span>
<div class="clr"></div>
</li>
</ul>
<div class="clr"></div>
</div>
And The CSS:
*{ matgin:0; padding:0}
ul, li{ list-style:none}
a{ text-decoration:none}
.clr{ clear:both;}
#nav{margin:auto; width:960px;}
#nav ul li{ float:left; margin-left:10px}
#nav ul li:first-child{ margin-left:0}
#nav ul li a{ display:block; background:#f00; color:#0F0; line-height:30px; text-align:center; width:70px; padding:0px 10px; font-weight:bold;}
#nav ul li a span{ display:block; float:right;}
Add this CSS:
#navigation ul
{margin:0px; padding:0px;}
#navigation ul li
{display:inline; height:30px; float:left; list-style:none; margin-left:15px;}
First of I am new to CSS and don't seem to understand how classes interact with id's, thats why I can not get the following menu to work.
<div id="navmenu">
<ul>
<li>Home</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
This is my CSS:
#navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#navmenu li {
width:114px;
text-align:center;
float:left;
}
#navmenu ul li a {
text-decoration:none;
color: white;
background: #CE140B;
}
#navmenu a {
padding-top:4px;
padding-bottom:4px;
display:block;
width:100%;
}
#navmenu ul li a:hover {
color: #CE140B;
background: white;
}
This changes background and foreground color when the mouse is hovered over a menu item.
Now i wanted to add an active class to this, so that when I am on the Home page, the Home menu item looks the same as when it is hovered. The following code does not work.
I have tried changing the menu to this:
<li><a class="active" href="#">Home</a></li>
and also
<li class="active">Home</li>
and my CSS to:
#navmenu ul li a:hover a:active {
color: #CE140B;
background: white;
}
and
#navmenu ul li a:hover li:active {
color: #CE140B;
background: white;
}
Neither works. Thanks for your help on getting this to work.
Either
li.active:hover {
}
Or
a.active:hover {
}
Should work
In firefox (this doesnt work at all in IE6) i have this code
<div class="menu">
<ul class="nav">
<li>Home</li>
<li>Software
<ul>
<li>Blah</li>
<li>Blah3</li>
<li>Blah</li>
</ul>
</li>
<li>Code Samples</li>
<li>Resume</li>
</ul>
</div>
using this css
ul.nav li:hover,
.nav a:hover
{
background-color:#606060;
color: white;
}
I have the menu text ("software") become white while the background becomes grey. However when i move my mouse down to the menu item the background continues to be grey but the next is no longer white! why? how can i fix this?
This should work:
ul.nav li:hover,
ul.nav li:hover a,
{
background-color:#606060;
color: white;
}
I'm not sure why but apparently you have to select the a element directly to change its color, otherwise it will be ignored.
Could be other rules interfering with your CSS, can't say without seeing everything. I recommend using Firebug to look at calculated CSS and CSS rules to see if it's doing what you expect.
You'd have to rework your css but if you are doing a basic menu submenu you can get it all working in IE and FF by wrapping the submenu in your 'a' tag.
<div class="menu">
<ul class="nav">
<li>Home</li>
<li><a href="software.html">Software
<ul>
<li>Blah</li>
<li>Blah3</li>
<li>Blah</li>
</ul>
</a>
</li>
<li>Code Samples</li>
<li>Resume</li>
</ul>
</div>
Some CSS which shouldn't require JS to to work in IE6. Not tested but should work. Note you also need to add styling and positioning for the subnav, but this still shows the basics.
.menu ul li a {
color: blue;
}
.menu ul li a ul {
display: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li a:hover ul {
display: block;
}
.menu ul li a:hover ul li {
}
.menu ul li a:hover ul li a {
color: black;
}
.menu ul li a:hover ul li a:hover {
color: red;
}
Then for each submenu you want after the first menu just add
.menu ul li a:hover ul li a ul {
display: none;
}
.menu ul li a:hover ul li a:hover ul {
display: block;
}