I would like to maintain markup structure and have nested child element go full screen width to have different background color.
HTML example can be seen here (fiddle)
li {
float: left;
width: 50%;
outline: 1px solid pink
}
.section-bg-color {
display: inline-block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
}
<div class="page-bg-color">
<div class="section-bg-color">
<ul class="addon-list">
<li>
<div class="header">1 Headline</div>
<div class="hidden-content" id="1" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">2 Headline</div>
<div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div>
</li>
<li>
<div class="header">3 Headline</div>
<div class="hidden-content" id="3" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">4 Headline</div>
<div class="hidden-content" id="4" style="display: none;">Hidden content</div>
</li>
</ul>
</div>
</div>
This is what I have:
Wanted result:
The only way to make your hidden divs stretch full width is to position them absolutely, and will only work if none of the parents up to the page div are positioned. Along with this I assume you are using js to hide / show these divs, so when you show the div, you will need to add some bottom margin to the containing li to make room for the hidden content.
Here is a quick mockup of what I mean:
$('.header').hover(function() {
var title = $(this),
content = $(this).next();
content.show();
title.parent().css('margin-bottom', content.outerHeight());
},
function() {
var title = $(this),
content = $(this).next();
content.hide();
title.parent().css('margin-bottom', 0);
});
li {
float: left;
width: 50%;
outline: 1px solid pink
}
li:nth-child(odd) {
clear:left;
}
.section-bg-color {
width:50%;
display:inline-block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
position:relative;
}
.hidden-content {
position:absolute;
left:0;
right:0;
background:lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-bg-color">
<div class="section-bg-color">
<ul class="addon-list">
<li>
<div class="header">1 Headline</div>
<div class="hidden-content" id="1" style="display: none;">Hidden content 1</div>
</li>
<li>
<div class="header">2 Headline</div>
<div class="hidden-content" id="2" style="display: none;">Hidden content is shown</div>
</li>
<li>
<div class="header">3 Headline</div>
<div class="hidden-content" id="3" style="display: none;">Hidden content 3</div>
</li>
<li>
<div class="header">4 Headline</div>
<div class="hidden-content" id="4" style="display: none;">Hidden content 4</div>
</li>
</ul>
</div>
</div>
Updated fiddle
Try adding
.yourSelectorForDesiredContent {
margin-left: -100%;
background-color: yourColourCode;
}
That should pull it across the screen for you. Not the prettiest way but should achieve result you want.
It's ugly, but you can do something with negative margin and viewport units..
I've used a pseudoelement to make it stretch to the left edge.
fiddle
body {
margin: 0;
}
li {
float: left;
width: 50%;
outline: 1px solid pink
}
.section-bg-color {
display: inline-block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
}
.hidden-content {
width: calc(100vw - 40px);
margin-left: -100%;
background: orange;
padding: 2% 0%;
position: relative;
}
.hidden-content:after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: orange;
width: 3em;
margin-left: -3em;
}
<div class="page-bg-color">
<div class="section-bg-color">
<ul class="addon-list">
<li>
<div class="header">1 Headline</div>
<div class="hidden-content" id="1" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">2 Headline</div>
<div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div>
</li>
<li>
<div class="header">3 Headline</div>
<div class="hidden-content" id="3" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">4 Headline</div>
<div class="hidden-content" id="4" style="display: none;">Hidden content</div>
</li>
</ul>
</div>
</div>
EDIT
To make this work for all hidden divs you can use the nth-of-type selector on the list item.
fiddle
Try:
li {
float: left;
width: 50%;
outline: 1px solid pink
}
.section-bg-color {
//display:inline-block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
padding: 5px 10px;
}
.addon-list {
content: "";
display: table;
clear: both;
}
li {
float: left;
width: 50%;
outline: 1px solid pink
}
.section-bg-color {
display: block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
}
.clr {
clear: both;
}
<div class="page-bg-color">
<div class="section-bg-color">
<ul class="addon-list">
<li>
<div class="header">1 Headline</div>
<div class="hidden-content" id="1" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">2 Headline</div>
<div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div>
</li>
<li>
<div class="header">3 Headline</div>
<div class="hidden-content" id="3" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">4 Headline</div>
<div class="hidden-content" id="4" style="display: none;">Hidden content</div>
</li>
<div class="clr"></div>
</ul>
</div>
</div>
fiddler link is https://jsfiddle.net/e3sngy3s/8/
Related
I am trying to open and close elements by toggling a class on the click event. I am using jQuery. But on clicking, all elements get opened (which have the same class), however, I only want the one which is clicked to be opened. Here's the link to the demo page
$(function() {
$(".image-button-wrapper").addClass("photo-btn");
$(".design-layout-card").addClass("menu-plugin");
$(".design-layout-card").addClass("unactive");
$(".image-button-wrapper").click(function() {
$(".design-layout-card").toggleClass("unactive", 1000);
})
});
<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1660582617675_7984">
<div class="sqs-block-content" id="yui_3_17_2_1_1660757592153_72">
<figure class="sqs-block-image-figure image-block-outer-wrapper image-block-v2 design-layout-card combination-animation-none individual-animation-none individual-text-animation-none image-position-left image-linked sqs-narrow-width sqs-text-ready menu-plugin unactive"
data-scrolled="" data-test="image-block-v2-outer-wrapper" id="yui_3_17_2_1_1660757592153_71">
<div class="intrinsic" id="yui_3_17_2_1_1660757592153_70">
<div class="image-inset" data-animation-role="image" data-description="" id="yui_3_17_2_1_1660757592153_69">
<div class="sqs-image-shape-container-element content-fit" style="position: relative; overflow: hidden;" id="yui_3_17_2_1_1660757592153_68">
<noscript><img class="sqs-image-min-height" src="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg" alt="" loading="lazy" /></noscript>
<img class="sqs-image-min-height loaded" data-src="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg" data-image="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg"
data-image-dimensions="900x900" data-image-focal-point="0.5,0.5" alt="" loading="lazy" data-parent-ratio="333.0" style="left: 166px; top: 0px; width: 1px; height: 1px; position: absolute;" data-image-resolution="500w" src="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg?format=500w"
/>
<div class="image-overlay" style="overflow: hidden;"></div>
</div>
</div>
</div>
<figcaption class="image-card-wrapper" data-width-ratio="">
<div class="image-card sqs-dynamic-text-container">
<div class="image-title-wrapper">
<div class="image-title sqs-dynamic-text" data-width-percentage="23.3" style="font-size: max(0.75rem, 23.3%);">
<p class="" style="white-space: pre-wrap;"><strong>Johnny Walker Black Dumplings</strong></p>
</div>
</div>
<div class="image-subtitle-wrapper">
<div class="image-subtitle sqs-dynamic-text" data-width-percentage="23.3" style="font-size: max(0.75rem, 23.3%);">
<p class="min-font-set" style="white-space: pre-wrap;">Local ground pork, Johnnie Walker Black Whiskey, green onion, sesame oil, sriracha aioli, sweet soy handmade by #TheRealDumplingKing.</p>
</div>
</div>
<div class="image-button-wrapper photo-btn">
<span class="item-photo-btn"><i class="br-ico"></i></span>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
You can do it like this:
Just create a class for the selected item and remove it from everyone just before adding it again on the clicked item.
$(".list-item").on("click", function(){
$(".list-item").removeClass("active");
$(this).addClass("active");
});
ul li{
padding: 6px 15px;
list-style: none;
margin: 5px 0px;
border: 1px solid #000000;
cursor: pointer;
width: fit-content;
}
li.active{
background-color: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="list-item active">Option 1</li>
<li class="list-item">Option 2</li>
<li class="list-item">Option 3</li>
<li class="list-item">Option 4</li>
<li class="list-item">Option 5</li>
</ul>
Trying to implement a show/hide description box.
If the user clicks on the first showDesc link it opens it's description box.
Then if the user clicks the second showDesc link it opens it's description box and should close all the others which are opened.
it below :
Below is my code:
$(".showDesc").click(function () {
$(".descContainer").toggleClass("show");
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>
Your issue is because you're changing the class on all the .descContainer elements at once, not just the one related to the clicked .showDesc.
To fix this you need to use DOM traversal to get the closest('.feedContainer) then next() to get the element you want to toggle, like this:
$(".showDesc").click(function() {
var $target = $(this).closest('.feedContainer').next(".descContainer").toggleClass("show");
$(".descContainer").not($target).removeClass('show'); // hide other open elements
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>
You don't need jQuery for that, you don't even need javascript for that. Setting ids and internals links on your HTML + using the :target CSS pseudo-class will do.
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
line-height: 24px;
display:none;
}
.descContainer:target {
display:block;
}
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc" href="#1">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer" id="1">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc" href="#2">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer" id="2">
<div>Description Text</div>
</div>
</article>
</section>
</main>
I have panel content (not an accordian) setup to be hidden on page load. When a user clicks on one of the tabs, a "hidden" class is removed thus showing the panel content. Then I want to hide the content if the user clicks the tab for the open panel:
$('#section-navigation a').click(function (e) {
e.preventDefault()
if ($(this).closest("li").hasClass("active")) {
$('#section-navigation li.active').removeClass("active");
$(".tab-content").addClass("tab-content-hidden");
} else {
$(".tab-content").removeClass("tab-content-hidden");
$(this).tab('show');
}
});
This does show the panel content on first click, hide the panel content on second click of the same tab but it does not remove the "active" class from the panel content "li", and a third click on the same tab does nothing. Example here (coloured panels):
http://hawk.cloudlevel.me/
Fiddle: https://jsfiddle.net/uvvnpp0s/3/
How can I achieve my goal? I appreciate I might have gone about things in completely the wrong way, as I'm inexperienced with JS / jQuery.
Your custom tabs is conflicting with the bootstrap tabs implementation. Best would be have a custom tab implementation.
Here's a quick custom implementation - https://jsfiddle.net/nitincool4urchat/uvvnpp0s/9/
$("a[role=tab]").click(function() {
if ($(this).parent('li').hasClass('active')) {
$(this).parent('li').removeClass('active');
$(".tab-content").addClass('tab-content-hidden');
} else {
$("#section-navigation li").removeClass('active');
$(this).parent('li').addClass('active');
$(".tab-content").removeClass('tab-content-hidden');
$(".tab-content .tab-pane").hide(); //hide all
$($(this).attr('href')).show(); //show the selected one;
}
});
ul#section-navigation {
list-style-type: none;
padding: 0;
}
ul#section-navigation li {
position: relative;
float: left;
width: 25%;
padding-bottom: 15%;
overflow: hidden;
}
ul#section-navigation li > a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
border: 0;
color: #0e034f;
}
ul#section-navigation li > a,
ul#section-navigation li.active > a,
ul#section-navigation li a:hover,
ul#section-navigation li a:focus {
background: 0;
border: 0;
margin: 0;
outline: 0;
}
ul#section-navigation li > a h2 {
font-size: 24px;
margin-top: 1vw;
}
ul#section-navigation li > a p {
display: none;
}
ul#section-navigation li a div div {
position: absolute;
bottom: 0;
right: 0;
width: 15%;
}
ul#section-navigation li a div div:after {
content: "";
display: block;
padding-top: 100%;
}
ul#section-navigation li a div div div {
display: block;
width: 100%;
height: 100%;
}
ul#section-navigation li a div div div span {
display: block;
line-height: 100%;
color: #fff;
transition: 0.2s all;
font-size: 12vw;
}
ul#section-navigation li.active a div div span {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: 48% 48%;
}
.tab-content {
overflow: hidden;
max-height: 4000px;
transition: max-height .5s cubic-bezier(1, 0, .7, 1);
}
.tab-content .panel-padding {
padding-top: 2%;
}
.tab-content-close {
float: right;
font-size: 30px;
width: 30px;
text-align: center;
margin-left: 100%;
}
.learn-more-1,
.learn-more-2,
.learn-more-3,
.learn-more-4 {
overflow: hidden;
max-height: 4000px;
padding-top: 60px;
padding-bottom: 60px;
}
.tab-content-hidden,
.learn-more-hidden,
.bar-hidden {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
#link-learn-more-1,
#link-learn-more-2,
#link-learn-more-3,
#link-learn-more-4 {
position: relative;
top: -50px;
}
.learn-more .tab-content img {
width: 100%;
}
.panel-padding {
padding: 5%;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs" role="tablist" id="section-navigation">
<li role="presentation" class="gradient-white">
<a href="#panel-1" aria-controls="panel-1" role="tab">
<h2>Apprenticeships</h2>
<p>Learn more about the great opportunities apprenticeships offer</p>
<div>
<div>
<div class="bkg-blue"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-pink">
<a href="#panel-2" aria-controls="panel-2" role="tab">
<h2>Management</h2>
<p>Developing the next generation of leaders and managers</p>
<div>
<div>
<div class="bkg-pink"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-yellow">
<a href="#panel-3" aria-controls="panel-3" role="tab">
<h2>FE Teacher Training</h2>
<p>Get qualified to train and teach in the FE sector</p>
<div>
<div>
<div class="bkg-yellow"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-green">
<a href="#panel-4" aria-controls="panel-4" role="tab">
<h2>Learning Zone</h2>
<p>e-Learning on demand 24/7</p>
<div>
<div>
<div class="bkg-green"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content tab-content-hidden">
<div role="tabpanel" class="tab-pane fade in active" id="panel-1">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/apprenticeshipsbanner.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-blue"><span class="stat-number">95%</span><span class="stat-desc">of apprentices would recommend us</span>
</div>
<h2>Learn more about the great opportunities apprenticeships offer</h2>
<p>
<br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p>
Learn more
Current vacancies
</div>
</div>
<span class="bar bkg-blue"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-2">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/managementsmall.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-pink"><span class="stat-number">88%</span><span class="stat-desc">increased employee satisfaction</span>
</div>
<h2>Developing the next generation of leaders and managers</h2>
<p>
<br />Enjoy progressive, flexible learning that improves prospects, boosts careers and brings immediate value to your organisation.</p>
Learn more
</div>
</div>
<span class="bar bkg-pink"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-3">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/tutortraining.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-yellow"><span class="stat-number">95%</span><span class="stat-desc">had a positive impact on their career</span>
</div>
<h2>Inspiring training for aspiring teachers and assessors</h2>
<p>
<br />Take advantage of our accredited Level 3 and 4 qualifications for those who want to get into teaching, external assessing or internal quality control for assessments. Flexible, relevant and giving you the practical skills you need, our
courses are designed to be easy to access, and help you take the next step in your career.</p>
Learn more
</div>
</div>
<span class="bar bkg-yellow"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-4">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/1.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-green"><span class="stat-number">93%</span><span class="stat-desc">would recommend to a friend</span>
</div>
<h2>Take the first steps towards being an outstanding apprentice</h2>
<p>
<br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p>
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have created 2 menus:prod & prod2, I find when the mouse focus on prod2, the background color is changed but when the mouse focus on prod1 the background color doesn't change.
Why it doesn't change?
Styles:
ul.hMenu {
margin: 0;
padding: 0;
z-index: 1;
}
ul.hMenu > li {
margin: 0;
padding: 0;
list-style: none;
float: left;
width:140px;
}
ul.hMenu li a {
display: block;
text-align: left;
text-decoration: none
}
ul.hMenu li > div {
position: absolute;
display: none;
}
ul.hMenu div a {background: yellow;
}
div.lay1{ float:left;}
div.lay1 br{line-height:50%}
.topMenu{font:bold 12px arial;color:#169e39;text-decoration: none;}
.secondMenu{font:12px arial;color:#000000;text-decoration: none;}
.arrow_box {
position: relative;
background: red;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(149, 213, 53, 0);
border-bottom-color: red;
border-width: 13px;
left: 10%;
margin-left: -13px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 19px;
left: 10%;
margin-left: -19px;
}
Script:
function showMenu(obj){
var a=obj.children[0];
a.style.color="blue";
var div = obj.children[1];
obj.style.backgroundColor="yellow";
div.style.display="block";
}
function hideMenu(obj){
var a=obj.children[0];
a.style.color="red";
var div = obj.children[1];
div.style.display="none";
obj.style.backgroundColor="";
}
HTML:
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div><br/>
<!-- here-->
<div class="arrow_box" >
<div class="lay1">
<div>Manage Content<br> Message </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div>Manage Content<br> Message <br> Help </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
Problem In JsFiddle
I tested your code and it worked! what is your browser? please place a demo and also add this code as well
a.setAttribute('style','background-color:blue');
some browsers have incompatibility with element.style
give CSS Like this
.arrow_box{ position:absolute; white-space:nowrap}
Check this
http://jsfiddle.net/zz5XJ/2/
try the below HTML:
<body>
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div class="arrow_box" >
<div class="lay1">
<div>Manage Content<br> Message </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div>Manage Content<br> Message <br> Help </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
</body>
Please check your HTML :
Because you execute same function for both Pord or Pord2 but the Inner html is different for both li. so function showMenu() works different for both Pord or Pord2:
HTML:
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
href="javascript:void(0);">prod</a>
<div class="arrow_box">
<br />
<div class="lay1">
<div>
Manage Content<br>
Message
</div>
<br />
<br />
<div>
Manage Assignment<br>
User Inquiry</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<br />
<div class="lay1">
<div>
Manage Content<br>
Message
<br>
Help
</div>
<br />
<br />
<div>
Manage Assignment<br>
User Inquiry</div>
</div>
</div>
</li>
</ul>
Try This
UPDATED
Put <br /> before arrow_box div for both li and some change into Javascript:
var div = obj.children[2];
Javascript -
function showMenu(obj){
var a=obj.children[0];
a.style.color="blue";
var div = obj.children[2];
obj.style.backgroundColor="yellow";
div.style.display="block";
}
function hideMenu(obj){
var a=obj.children[0];
a.style.color="red";
var div = obj.children[2];
div.style.display="none";
obj.style.backgroundColor="";
}
Updated Jsfiddle
I have this div and I have set its z-index : 99999, its working fine on firefox and safari, but when I ma testing it on chrome , the footer is not the top element,
What else should I do to make it topmost element
<div id="footer" style="z-index: 99999 !important; width: 100%; height: 65px; position: fixed; bottom: 0px; ">
<div class="container">
<div class="footer-nav">
<ul>
<li>Team</li>
</ul>
<ul>
<li>Jobs</li>
</ul>
<ul>
<li><Twitter></li>
</ul>
</div>
<hr>
</div>
</div>
http://jsfiddle.net/A5jcT/2/
<div id="footer">
<div class="container">
<div class="footer-nav">
<ul>
<li>Team</li>
</ul>
<ul>
<li>Jobs</li>
</ul>
<ul>
<li><Twitter></li>
</ul>
</div>
<hr>
</div>
</div>
#footer
{
border:1px solid blue; z-index: 9999;width: 100%;
height: 65px;position: ; bottom: 0px;
}
.container
{
border:1px solid red;position:relative;z-index: -10
}
.footer-nav
{
border:1px solid green;position:relative;z-index: -20
}
it looks like you have to make other elements also positioned. Now you have the footer on top.