I am new to CSS. I want to apply background color for div. But the div height is zero. div has child elements too.
Here is my code. I added float to that ul,li elements.I searched so many sites I applied clear to the div ,but its not changing.
<div id="menulinks">
<ul class="dropdown">
<li>
projectCategoraization
<div id="submenu_pc">
<ul class="submenu">
<li>dgfdg</li>
<li>tutyu</li>
<li>ert45</li>
<li>7y56uty</li>
</ul>
</div>
</li>
</ul>
</div>
style
#submenu_pc {
width:240px;
display:none;
position:absolute;
}
.dropdown {
float:left;
}
.dropdown li {
float:left;
list-style:none;
}
.submenu {
position:absolute;
}
.dropdown ul li {
float:none;
}
script is
$(function(){
$(".dropdown li").hover(function(){
//alert("soumya");
$(this).addClass("hover");
$('#submenu_pc').css('display', 'block');
});
});
.submenu has position: absolute which means its parent has a height of 0. Remove position: absolute and assign a background color to the parent; that should do it.
jsFiddle
Adding background color to the UL with class of submenu
.submenu
{
background-color:aqua;
}
Add this CSS and remove the script completely!
#menulinks{
overflow:hidden;
background: red; // choose your color
}
#submenu_pc {
width:240px;
display:none;
}
.dropdown li:hover #submenu_pc{
display: block;
}
.dropdown {
float:left;
}
.dropdown li {
float:left;
list-style:none;
}
.dropdown ul li {
float:none;
}
Related
The following css style be like this:
ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
#foo li {
list-style:none;
margin-bottom:25px;
}
ul li img {
cursor: pointer;
}
The ul li has included:
<ul id="foo" class="row">
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
</li>
</ul>
Is it possible to change #ul from id into class ? I tried be like this:
ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
li.bar {
list-style:none;
margin-bottom:25px;
}
ul li img {
cursor: pointer;
}
<ul id="" class="row bar">
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
</li>
</ul>
It works but there's something wrong that I think it's not working as well.
Since your li tag doesn't have the .bar class it can't work.
If you want to style the li change the css to:
.bar li {
list-style:none;
margin-bottom:25px;
}
or
if you want to style the ul change the css to:
ul.bar {
list-style:none;
margin-bottom:25px;
}
With your css code you style a li tag with the .bar class.
Try this instead
ul.bar li{
list-style:none;
margin-bottom:25px;
}
Or this
.bar li{
list-style:none;
margin-bottom:25px;
}
I want to implement a navigation menu on my website. I need to highlight a parent list item after click on its child menu item. This is Working, if it is a single file. I include it in all files. My problem of the below code is, when I click on a child menu item, its parent menu item is highlighted till the loading time. After loading completely, Highlighted color is disappearing. Clicking on the menu item which has no child, is also not highlighted.
Any help would be greatly received.
Thanks. My website link is www.theiab.org/IABPHP.
HTML:
<html>
<head>
<script>
$(document).ready(function () {
$('#menu-wplook-main-menu').find('li a').click(function () {
//e.preventDefault();
$('#menu-wplook-main-menu').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});
</script>
<style>
#menu-wplook-main-menu li a.active{
color:#e53b51;
}
</style>
</head>
<body>
<p class="site-title"><img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind"></p>
<nav class="navigation"id="nav">
<ul id="menu-wplook-main-menu" class="parent" >
<li class="menu-item"><div id="whoWeAre">WHO WE ARE</div>
<ul class="sub-menu"id="sub-menu1">
<li class="sub-menu-item1"id="sub-menu-item1"><div id="subMenuItem1">ABOUT FOUNDER</div></li>
<li class="sub-menu-item2"id="sub-Menu-Item2"><div id="subMenuItem2">ABOUT IAB</div></li>
<!--<li class="menu-item ">TEAM IAB</li>-->
</ul>
</li>
<li class="menu-item">WHAT WE DO
<ul class="sub-menu"id="sub-menu2">
<li class="sub-menu-item3 ">EDUCATION</li>
<li class="sub-menu-item4">CAREER & SKILL TRAINING</li>
<li class="sub-menu-item5">RESIDENTIAL SERVICES</li>
<li class="sub-menu-item6">SUPPORT SERVICES</li>
<li class="sub-menu-item7">EMPLOYMENT</li>
</ul>
</li>
<li class="menu-item">AWARDS & RECOGNITION</li>
<li class="menu-item">NEWS & EVENTS</li>
<li class="menu-item">CONTACT</li>
</ul>
</nav>
</body>
</html>
CSS:
nav {
float:right;
padding:38px 0 0;
}
nav li {
position:relative;
display:inline-block;
}
nav ul li a {
color:#a0a0a0;
font-weight:bold;
}
nav li a:hover {
color:#e53b51;
text-decoration: none;
}
nav li:hover .sub-menu{
visibility:visible;
opacity: 1;
transition: all 1s ease;
}
ul.sub-menu {
visibility:hidden;
opacity:0;
transition: visibility 1s linear 0.5s,opacity 0.5s linear;
position:absolute;
top:27px !important;enter code here
left:0px;
z-index:5000;
list-style:none;
margin:0;
padding: 0 !important;
width: auto;
min-width:150px;
box-shadow:0 0px 8px rgba(0,0,0,0.2);
background:#fff;
}
ul.sub-menu li {
width:100%;
float:left;
border-bottom: 1px solid #ccc;
margin: 0 !important;
line-height:100%;
padding: 10px 0px !important;
}
ul.sub-menu li:last-child {
border-bottom: none;
}
nav ul.sub-menu li a {
padding:0px 12px;
height: auto;
font-size:13px !important;
display: block;
}
ul.sub-menu li:hover {
border-top:none !important;
background: #f9f9f9;
}
You need to change this:
nav li a:hover {
color:#e53b51;
text-decoration: none;
}
To this:
nav li:hover a {
color:#e53b51;
text-decoration: none;
}
That way when you hover over the list-item (li), the anchor (a) will be changed. The way you had it, you needed to hover over the ANCHOR ITSELF for the hover state to be activated. Now hovering over the list-item will activate the changes.
Hi I'm new to Javascript and since there is no onclick for css I need a little help.
This is my html:
<div id="dropnav">
<ul>
<li><a>Navigation</a>
<ul>
<li>Home
</li>
<li>Paintings
</li>
<li>Contact
</li>
<li>Bio
</li>
</ul>
</li>
</ul>
</div>
and this is my css:
#dropnav {
position:relative;
z-index:100;
top:-60px;
left:18%;
background-size:18%;
}
#dropnav ul {
padding:0px;
margin:0px;
}
#dropnav ul li {
display:inline;
float:left;
width:68.5%;
list-style-type:none;
border-style:solid;
border-width:1px;
font-family:arial;
height:50px;
}
#dropnav ul li a {
background-color:#808080;
color:#FFFFFF;
text-decoration:none;
line-height:50px;
display:block;
padding-left:36.2%;
width:63.8%;
}
#dropnav ul li a:hover {
background-color:#666666;
}
#dropnav ul li ul li {
width:99.8%;
}
#dropnav ul li ul li a{
background-color:#666666;
}
#dropnav ul li ul li a:hover {
background-color:#333333;
}
#dropnav ul li ul {
visibility:hidden;
}
#dropnav ul li:onclick ul {
visibility:visible;
}
Now I need the :onclick to work so if you could fix it that would be great. Thanks for your help
One way to change visibility onclick is by adding an event attribute to your html tag:
onclick="this.style.visibility='hidden';"
For example, here is your navigation bar with disappearing links:
<div id="dropnav">
<ul>
<li><a>Navigation</a>
<ul>
<li>Home
</li>
<li>Paintings
</li>
<li>Contact
</li>
<li>Bio
</li>
</ul>
</li>
</ul>
</div>
Drop this (it's useless):
#dropnav ul li:onclick ul {
visibility:visible;
}
Add This:
#dropnav ul li.open ul {
visibility:visible;
}
JS:
$('#dropnav ul li').click(function(){
$(this).addClass('open');
});
Just adding a class, which can be further dealt with in plain CSS. This way your application won't be bound by any strict laws.
You can do this with pure css3 by abusing the :not pseudo class. For example you can trigger an animation after an onclick has happened.
Click
<style>
#btn:not(:active) {
/* now keep red background for 1s */
transition: background-color 1000ms step-end;
}
#btn:active {
background: red;
}
</style>
Try it - http://jsfiddle.net/WG4Sf/
Here is a good article on CSS click events and if you should use them. http://www.vanseodesign.com/css/click-events/
You can do something like this
<html>
<head>
<script type="text/javascript">
function change()
{
document.getElementById("d").style.visibility="hidden";
}
</script>
</head>
<body>
Click Me<br/>
<div id="d">This is just example</div>
</body>
</html>
Try this:
$('#dropnav ul li').click(function() {
$(this).parent().css('visibility','visible');
})
try this.
:active is ur required css property
WORKING SAMPLE
I have just changed the visibility property for my convinience. U can change it to what u need exactly.
Hello I am working on a project, which I need to use anchor tag with text and images for this I have used ul tag, but the problem is I want to right align the image and left align the text inside LI.
here is my code
<div class="button-no-record">
<ul>
<li><span>ADD NEW</span><img src="images/add_enabled.gif"></li>
</ul>
and the css
.button-no-record ul {
display:table-cell;
vertical-align:middle;
}
.button-no-record li{
list-style-type:none;
display:inline-block;
margin-top:10px;
margin-left:5px;
vertical-align:middle;
line-height:29px;
height:29px;
width:103px;
border-radius:8px;
background:#e4e4e4;
color:black;
font-family:Arial;
font-size:.9em;
font-weight:bold;
}
.button-no-record a span {
width:100px;
overflow:hidden;
margin-left:4px;
color:black;
vertical-align:middle;
}
.button-no-record a img{
vertical-align:middle;
}
I want output like this
My Text [Image]
My [Image]
but currenty it is
My Text [Image]
My [Image]
Change it to:
.button-no-record a span {
display: inline-block;
[...]
<span> is an inline-element, and so width won't apply for it. When you set it to display: inline-block;, it will apply.
This is because the <span> tag is an inline-element by default.
You can change this by adding
.button-no-record a span {
display: inline-block;
/* dirty IE7 hack (only if needed) */
*display: inline;
zoom: 1;
}
.button-no-record ul li span
{
float: left;
width: 200px;
}
.button-no-record ul li img
{
float: right;
}
Use the above style.
Use float: left and float: right
.button-no-record a span {
width:100px;
overflow:hidden;
margin-left:4px;
color:black;
width:40px;
vertical-align:middle;
float: left;
}
.button-no-record a img{
vertical-align:middle;
float: right;
}
demo
HTML
<img id="image" src="images/add_enabled.gif">
CSS
#image {
float:right;
}
add display:block to .button-no-record a span
Also why have you decalred two widths in .button-no-record a span
ok, first, what i need to obtain,
The years 2011,2010,showreels where not visible until you hover PORTFOLIO (but in an iphone its when you first click, but that doesn't matter now)
now, the HTML; just a simple UL with sub UL's
<div id="nav">
<ul>
<li>PORTFOLIO
<ul class="left">
<li>2011</li>
<li>2010</li>
<li>SHOWREELS</li>
</ul>
</li>
<li>LOCATIONS
<ul class="left">
<li><img src="/img/westlich.png" alt="Westlich-t" /></li>
<li><img src="/img/sudlich_pink.png" alt="Sudlich-t" /></a></li>
<li><img src="/img/sudlich_orange.png" alt="Sudlich-t" /></a></li>
</ul>
</li>
<li>TEAM</li>
<li>JOBS</li>
<li>KONTAKT</li>
</ul>
</div>
now, the CSS
#nav ul{
}
/*Elemento del men� de navegaci�n, ejemplo: kontact*/
#nav ul li{
float:left; clear:both; height:40px;
}
#nav ul li a{ color:#000;background:#fff;width:auto;padding: 10px;margin-bottom: 4px; font-weight:bold;}
#nav ul li ul{
width:100%;
display:block;
float:left;
clear:both;
z-index:100;
margin-bottom:100px;
}
/*Sublista del men� de navegacion, de la izda; por ejemplo, portfolio*/
#nav ul li ul.left{
float:left;
}
/*Sublista del men� de navegacion, de la izda; como Locations*/
#nav ul li ul li{
width:100%;
}
#nav ul li ul li a{
width:auto;
color:#fff;
background-color:#000;
}
now, the Javascript; making the sub UL visible when the parent LI is hover
function menu_desplegable(){
$("#nav ul li ul").css({display: "none"}); // Opera Fix
$("#nav ul li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function() {
menu_desplegable();
});
as you can test here the dropdown effect works, but it doesn't move next <li>; for example if you hover porfolio you can see the sublist underneath the rest of the <li>'s and I need them to move,
how can i Solve this? I guess i can fix it with only CSS but i'm very lost. Specially because it doesn't even respect the higher z-index :S
Change 4 things:
Use .show() and .hide() instead of .css({visibility: "hidden"}). The latter will hide the element but reserve space for it on the page, resulting in whitespace. You want .show() and .hide() because these use display: none which hides the element and removes the space it takes up on the page.
Remove this style declaration:
#nav ul li
{
height: 40px;
clear: both;
float: left;
}
Remove the bottom margin style definition from the subnav ul (#nav ul li ul).
Add display: inline-block; to #nav ul li a.
That fixes it: http://jsfiddle.net/gilly3/3QffD/2/
But you could really clean up your css a lot (looking at the css from your link). Most of those styles are unnecessary and only make debugging harder. In particular I see a lot of float, clear, and width: 100% that are unnecessary or even detrimental. Try to avoid those unless you are sure you need to.
Here's my version with most of the css removed: http://jsfiddle.net/gilly3/3QffD/
You are restricting your height on #nav ul li which is preventing it from growing. I'll paste a jsfiddle in a second.
This is actually achievable without Javascript by simply using the :hover selector in CSS. Here's an example:
http://jsfiddle.net/ebiewener/7d7sr/
However, the real cause of your problem is this bit of your CSS:
#nav ul li{
float:left; clear:both; height:40px;
}
By giving the li a fixed height of 40px, the page doesn't move the following li tags down when you hover over it, because it is still considering them to be 40px. So, instead of making your #nav ul li {height:40px}, apply that 40px to the height of the anchor tag it contains: #nav ul li a {height:40px}. This will allow the height of the containing li to expand when it's child ul is shown.