Can CSS Target An Element Adjacent To a Pseudo Class?

see: http://dev.himalayanacademy.com/readlearn

where our top navigation is under-going some changes.

We have one problem I cannot solve. The "mega-menu" panels are triggered to display as the mouse moves into the transparent are of the parent LI element...but we want them only to trigger when they are over the visible background of the a: hover element.

We have this selector on 1175 of the style sheet:

.nav-global .nav-header:hover .nav-child {
	 display: block; 	
}

Open in new window


".nav-header" is assign to a parent "li" element. The first child is an "a" element, which is styled to change on hover

 But the problem is that this selector triggers the appearance of "ul class="nav-child"  as the mouse moves into the LI area of the DOM, (which is still transparent, and wider than the child "a" selector)  before the moves into the a:hover element. What we want is to toggle .nav-child display to block when the mouse is in the visible "a:hover" element area... but try as I might I can't get anything to work. .nav-child is the first next adjacent element following the "a" element

I tried things like  
.nav-global .nav-header  a:hover + .nav-child {
	 display: block; 	
}

Open in new window


I even put the class "nav-header" inside the link like this:

<a class="nav-header" href="####" LinkText </a>

Open in new window


and then tried to do something like

.nav-global  a.nav-header:hover+.nav-child {
	 display: block; 	
}

Open in new window


or

.nav-global  a.:hover.nav-header+.nav-child {
	 display: block; 	
}
But these simply break and nav-child does not display at all.

note: there is a small JS in scripts.js that is adding  class "active" to the top link when the mouse is within nav-child, but this is not relevant to this issue... but just so you know that's happening in the background.

Open in new window


Any ideas?
BrahmanathaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Your issues most likely are from your html errors.  Start at the validator and get the errors fixed.   http://validator.w3.org/

Things like, " Stray end tag meta" or "Element ul not allowed as child of element ul in this context" or "The hgroup element is obsolete. "

Some of the not allowed errors could be cascading from an error at the top.  Get one thing fixed and see what happens.  You have 500+ errors but I would bet many are related.  

Also using the console, you have some javascript errors but those could be related to the html errors.

Get this fixed and report back and lets see what happens.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BrahmanathaAuthor Commented:
OK will look into this... I've been away for a few days and just getting back to this.

One challenge is that the supposed "professionals" we hired for this work and design seem to use <ul> freely inside other <ul> elements, as if this was perfectly OK, and this own design "feature" is causing 75% of the errors. Even one case of a div inside a UL is actually cut and past from Google embed code. why <div> would be disallowed inside another element makes no sense to me since <div> is purely an abstraction with no real presence on the page without attributes assigned to it's "presentation" properties

Other errors seem to be a matter of "policy" rather than anything that will actually break the code.  

But, not to be dismissive of your point: Clearly we have some work to do. I start by fixing the egregiously wrong issues that appear in a syntax checker...
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>why <div> would be disallowed inside another element makes no sense

It is stated in the specs http://www.w3.org/TR/html-markup/ul.html
Permitted contents #
Zero or more li elements


That does not stop people from doing something, then sharing for others to copy and they share and others copy....  and now you have many people using something that may work "today" but break later or visually work in one browser but not another.

In your case, there is a <comment></comment> tag. All they needed was the <!-- this is a comment -->. Just take out that tag OR place it inside of an li tag.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

BrahmanathaAuthor Commented:
Thanks Scott for pointing us in the right direction
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Brahmanatha,

I'm trying to help you.  I can't even begin to give you a more solid an answer until you have proper coding.  There are over 500 validation errors on your page.  

It's a lot like calling comcast to send somebody over to fix your internet. The guy comes to your house to find you have kinked and rotting cable in the wall, the end of your cables are snapped off and you just kind of wedged the cable in the socket, your router is from 2005, the computer you are using to surf the internet is from 2003 running windows xp with 500 megs of ram installed but only 300 are working.   Now, why is comcast internet slow?  Until you fix all your errors by wiring with new cable, upgrade your computer to at least windows 7 with 4 gigs of ram, and get yourself an up to date router, there could be multiple reasons why your 100Mbs service is slow.  

The same is here. You have 500+ errors.  Many of those errors could get fixed by the domino effect here you fix one thing and that takes care of 10 others.

Your code looks a little like this below.  
<p>text here <li>bullet</li></ol>

Open in new window


Any css and javascript is not going to work properly until you change it to
<p>text here</p> <ol><li>bullet</li></ol>

Open in new window


Now that the code is valid, your issues may fix on their own.  If not, we can at least identify the actual issue.

The truth is, I did give you a solution and that solution will take some work on your part.
0
BrahmanathaAuthor Commented:
Scott:  I agree that the page has very serious problems. And I do appreciate the help so far. That said, it is a bit of a challenge for us because the code was "hired out" two 1/2 years ago and we got pretty good templates like this:

http://dev.himalayanacademy.com/html/manager/templates/tmpl-kauai-general-styles.html (only 12 errors which related to one thing)

but in the course of building out the CMS to implement those templates, we seem to have introduce the mess you describe so well. I'm not trying to be dismissive... just don't have time right now. All the CSS works otherwise. But, I have taken your point to heart and we will certainly work on this. Thank you.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I'm glad you understand.  

You graded the answer a "C" with the comment, "Not really an answer, but a 'possible' ".  The main point I am trying to get across is that is really just shooting the messenger so to speak.

In the original template the only type of major errors are duplicate id's.  That is understandable in developing a template where the developer may copy and  paste content to fill in.  In your sample, the only fatal error was the duplicate id's for "radio1", "radio2" etc where your developer had radio's and buttons with the same id.    

The errors that are on the page now do not stem from the original template, they are from who or whatever generated the content or page in it's current form.    Because the page has things like unclosed tags it makes a mess and any fix you can figure out is a bandaid that will just break later.    

If this is stemming from your CMS, my bet is whatever is causing the error is only in one or two places.

Closing just one tag, could fix many errors.  If the reason tags are not closing is from your CMS, it may be just one or two  places that need to be fixed and those 500+ errors will be down to nothing or few by fixing one spot in your cms.  It is well worth taking a few hours to figure out why this is happening or you will have a hard time getting CSS and Javascript/jquery to work as expected.

Looking only at the html inside the <nav> tag, you have 15 critical errors all having to do with, "Element ul not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)"   If you take 15 minutes just on this, paste this code to your favorite text editor and go through this line by line, add indents for each part of the tree.  That will help you find the critical error and possibly back track to your cms that could be automating the navigation.
<nav class="nav-global"> 
	<ul class="nav-parent">
	<li class="nav-header"> <a href="/monastery"> Monastery </a> 
	<ul class="nav-child monastery">
	<ul class="col1">
		<li class="subhead"> Our Hawaii Center </li>
		<li> <a href="/monastery/about"> About the Monastery </a> </li>
		<li> <a href="/blog/taka"> Monastery Blog </a> </li>
		<li> <a href="/monastery/meet-the-monks"> Meet the Monks </a> </li>
		<li class="subhead"> More Info </li>
		<li> <a href="/monastery/about/faq"> FAQ </a> </li>
		<li> <a href="/info/contact"> Contact Us </a> </li>
	</ul>
	<ul class="col2">
		<li class="subhead"> Guru Lineage </li>
		<li> <a href="/monastery/lineage-philosophy"> The Teachers &amp; the Teachings </a> </li>
		<li> <a href="/monastery/lineage-philosophy/bodhinatha"> Satguru Bodhinatha Veylanswami </a> </li>
		<li> <a href="/monastery/lineage-philosophy/gurudeva"> Satguru Sivaya Subramuniyaswami </a> </li>
		<li> <a href="/monastery/lineage-philosophy/yogaswami"> About Paramaguru Yogaswami </a> </li>
	</ul>
	<ul class="col3">
	<li class="subhead"> Our Temples </li>
	<li> <a href="/monastery/temples"> Our Temples </a> </li>
	<li> <a href="/monastery/temples/kadavul"> Kadavul Hindu Temple </a> </li>
	<li> <a href="/monastery/temples/iraivan"> San Marga Iraivan Temple </a> </li>
	<li> <a href="/site/search/media_type/video/description/puja"> Festival Videos </a> </li>
	</ul>
</ul>
</li>
<li class="nav-header readlearn"> <a href="/readlearn"> Read &amp; Learn </a> 
<ul class="nav-child readlearn">
<ul class="col1">
	<li class="subhead"> Hinduism </li>
	<li> <a href="/readlearn/basics"> The Basics </a> </li>
	<li> <a href="/view/what-is-hinduism"> The Book: <i> What Is Hinduism? </i> </a> </li>
	<li> <a href="/readlearn/basics/fourteen-questions"> Fourteen Questions </a> </li>
	<li> <a href="/readlearn/basics/nine-beliefs"> Nine Beliefs </a> </li>
	<li> <a href="/view/dancing-with-siva"> A Contemporary Catechism </a> </li>
	<li> <a href="/readlearn/hindu-history"> Hindu History </a> </li>
	<li> <a href="/view/how-to-become-a-hindu"> How to Become a Hindu </a> </li>
	<li class="subhead"> Books </li>
	<li> <a href="/readlearn/books"> 100+ Publications On Line </a> </li>
</ul>
<ul class="col2">
<li class="subhead"> For Teachers &amp; Parents </li>
<li> <a href="/readlearn/teachers-parents"> For Teachers and Parents </a> </li>
<li> <a href="/readlearn/hindu-history"> History of Hindu India </a> </li>
<li> <a href="/site/search/file_id/_ei"> Educational Insights </a> </li>
<li> <a href="/view/hindu-history-chapter-one-lesson-plans/hindu-history-chapter-one-lesson-plans.pdf"> Lesson Plan for Teachers </a> </li>
<li> <a href="/book/what-is-hinduism/117"> Raising Children as Good Hindus </a> </li>
<li> <a href="/book/what-is-hinduism/134"> Hinduism's Code of conduct </a> </li>
<li> <a href="/book/what-is-hinduism/114"> Family Life and Culture </a> </li>
<li> <a href="http://www.hinduismtoday.com/modules/smartsection/category.php?categoryid=6"> Pub Desk: Contemporary Issues </a> </li>
</ul>
<ul class="col3">
<li class="subhead"> Practice and Daily Study </li>
<li> <a href="/livespiritually/become-student/todays-lesson"> Lesson of the Day </a> </li>
<li class="subhead"> Other Languages </li>
<li> <a href="/readlearn/other-languages"> Tamil, Gujarati, Spanish &amp; More </a> </li>
<li class="subhead"> For the Media </li>
<li> <a href="/readlearn/for-the-media"> For the Media </a> </li>
<li class="subhead"> Our International Magazine </li>
<li> <a href="http://www.hinduismtoday.com/"> Hinduism Today </a> </li>
</ul>
</ul>
</li>
<li class="nav-header looklisten"> <a href="/looklisten"> Look &amp; Listen </a> 
<ul class="nav-child looklisten">
<ul class="col1">
	<li class="subhead">Talks By Our Gurus</li>
	<li> <a href="/looklisten/gurus-talks">Satguru Speaks</a> </li>
	<li> <a href="/looklisten"> Bodhinatha's Quarterly Editorial </a> </li>
	<li class="subhead"> Video </li>
	<li> <a href="/looklisten/videos"> Monthly News Update </a> </li>
	<li> <a href="/site/search/media_type/video"> Teaching Collections </a> </li>
	<li> <a href="/site/search/media_type/video/description/puja"> Temple Fesivals </a> </li>
</ul>
<ul class="col2">
<li class="subhead"> Art &amp; Photo Galleries </li>
<li> <a href="/site/search/media_type/painting"> Art &amp; Paintings </a> </li>
<li> <a href="/site/search/media_type/slideshow"> Slideshows </a> </li>
<li> <a href="/looklisten/art-photos"> All Galleries </a> </li>
</ul>
<ul class="col3">
<li class="subhead"> Chanting &amp; Songs </li>
<li> <a href="/looklisten/chanting-songs">Audio Home</a> </li>
<li> <a href="/looklisten/chanting">Sanskrit Chanting</a> </li>
<li> <a href="/looklisten/music">Sacred Music Library</a> </li>
</ul>
</ul>
</li>
<li class="nav-header livespiritually"> <a href="/livespiritually"> Live Spiritually </a> 
<ul class="nav-child livespiritually">
<ul class="col1">
	<li class="subhead"> Become A Student </li>
	<li> <a href="/livespiritually/become-student">Study Programs</a> </li>
	<li> <a href="/livespiritually/become-student/todays-lesson">Read Today's Lesson</a> </li>
	<li class="subhead">Global Fellowship</li>
	<li> <a href="/livespiritually/global-fellowship">Introduction</a> </li>
	<li> <a href="/livespiritually/global-fellowship/our-mission">Our Mission</a> </li>
	<li> <a href="/livespiritually/global-fellowship/spiritual-path">Our Spiritual Path</a> </li>
	<li> <a href="/livespiritually/global-fellowship/core-beliefs">Our Core Beliefs</a> </li>
	<li> <a href="http://www.saivasiddhanta.org/">Members' Site</a> </li>
	<li class="subhead"> Innersearch Travel-Study </li>
	<li> <a href="/livespiritually/innersearch">Travel-Study Pilgrimage</a> </li>
	<li> <a href="/livespiritually/innersearch/next-innersearch"> Our Next Program </a> </li>
	<li> <a href="/livespiritually/innersearch/what-is-innersearch"> Past Programs</a> </li>
</ul>
<ul class="col2">
<li class="subhead"> Monastic Life </li>
<li> <a href="/livespiritually/monastic-life/how-to"> How To Become A Monk </a> </li>
<li> <a href="/book/merging-with-siva/289"> Song of the Sannyasin </a> </li>
<li> <a href="/view/holy-orders-of-sannyas">Monastic Vows</a> </li>
<li> <a href="/monastery/meet-the-monks">Meet The Monks</a> </li>
<li class="subhead">Hinduism's Code Of Conduct</li>
<li> <a href="/book/what-is-hinduism/134">Introduction</a> </li>
<li> <a href="/view/yogas-forgotten-foundation">Yoga's Forgotten Foundation</a> </li>
<li> <a href="/site/search/tags/ethics/coverage/children">Children's Books On Good Conduct</a> </li>
</ul>
<ul class="col3">
<li class="subhead">Home Worship</li>
<li> <a href="/livespiritually/home-puja">Introduction</a> </li>
<li> <a href="/looklisten/chanting">Ganesha Puja</a> </li>
<li> <a href="/site/search/media_type/song/deity/ganesha">Bhajans</a> </li>
<li> <a href="http://www.minimela.com/index.php?main_page=index&amp;cPath=82">Puja Supplies</a> </li>
<li class="subhead"> Meditation </li>
<li> <a href="/livespiritually/meditation">Tools For Meditation</a> </li>
<li> <a href="/book/merging-with-siva/68">Beginning To Meditate</a> </li>
<li> <a href="/book/merging-with-siva/176">The Fine Art Of Meditation</a> </li>
<li> <a href="/livespiritually/meditation/color">Color Meditation</a> </li>
</ul>
</ul>
</li>
<li class="nav-header visit"> <a href="/visit">Visit</a> 
<ul class="nav-child visit">
<ul class="col1">
	<li class="subhead">Plan Your Visit</li>
	<li> <a href="/visit/virtual-tour">Take A Virtual Tour</a> </li>
	<li> <a href="/visit/plan-your-visit">Public Guided Tours</a> </li>
	<li> <a href="/visit/cruise-passengers">Cruise Passengers</a> </li>
	<li> <a href="/visit/directions">How To Get Here</a> </li>
	<li> <a href="/visit/dress-and-guidelines">What To Where</a> </li>
	<li> <a href="/visit/lodging">Where To Stay</a> </li>
	<li> <a href="/visit/dining">Where To Eat Vegetarian</a> </li>
</ul>
<ul class="col2">
<li class="subhead"> Pilgrimage</li>
<li> <a href="/visit/come-on-a-pilgrimage">Guide For Hindu Visitors</a> </li>
<li> <a href="/monastery/temples/kadavul">Daily Puja</a> </li>
<li> <a href="/visit/meeting-bodhinatha">Meet the Satguru</a> </li>

</ul>
<ul class="col3">
<li class="subhead">Other Areas</li>
<li> <a href="/visit/missions/mauritius/ssc-mauritius">Our Center in Mauritius</a> </li>
<li> <a href="/visit/meet-us-when-we-travel">Meet Us When We Travel</a> </li>
<li> <a href="http://www.minimela.com/">Our Online Store</a> </li>
</ul>
</ul>
</li>
</ul>

Open in new window

The reason it is important is because you are trying to use javascript and css to get to a selector and traverse down the tree.  If the tree is broken because of the rendered html, then working with js and css will be very difficult to work with.

To demonstrate, here is just your broken nav html with your nav css http://jsbin.com/yowoxa/1/edit?html,output.  Now, hover over "Monastery" and you will see that the hover starts where you are calling transparent or before you actually appear to get to the link.

Now, head over to http://jsbin.com/yowoxa/3/edit?html,output where I have stripped out only the html for the Monastery and fixed one error (you can't have a UL tag inside of another as I first pointed out. It is part of the spec.  If you want another UL, it must be inside of an LI).  

This is the stripped down code
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://dev.himalayanacademy.com/assets/css/style-new-nav.css" type="text/css" media="screen, projection" />
  <meta charset="utf-8">
  <title>padas</title>
</head>
<body>
<nav class="nav-global"> 
	<ul class="nav-parent">
	  <li class="nav-header"> <a href="/monastery"> Monastery </a> 
	    <ul class="nav-child monastery">
	      <!-- ***can't have ul inside of ul*** <ul class="col1"> -->
		  <li class="subhead"> Our Hawaii Center </li>
		  <li> <a href="/monastery/about"> About the Monastery </a> </li>
		  <li> <a href="/blog/taka"> Monastery Blog </a> </li>
		  <li> <a href="/monastery/meet-the-monks"> Meet the Monks </a></li>
		  <li class="subhead"> More Info </li>
		  <li> <a href="/monastery/about/faq"> FAQ </a> </li>
		  <li> <a href="/info/contact"> Contact Us </a> </li>
	  </ul>
     </li>
</ul>
</nav>
</body>
</html>

Open in new window

This time, you will see that the hover effect works exactly as expected without changing anything to your css or javascript.  

Now head over to the validator http://validator.w3.org/ and paste in the code directly above.  Notice, no errors.  

The fact is, my solution I provided you to fix your errors, is the solution.  

I would say you need to spend a little time and go through your navigation rendered  html and fix the rest in order to get your desired visual output.
0
BrahmanathaAuthor Commented:
Awesome!  Can I change the grade?  unclosed tags are clearly just wrong... I will get those fixed asap.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Yes, thank you.  Just click the request attention link just under your original question and a moderator will assist.
0
BrahmanathaAuthor Commented:
OK, your prodding has worked :-) I'm "biting the bullet" and heading into the CMS to hunt down all the gremlins. The nav was easy... add <li> wrappers and changed CSS to:

.nav-child > li > ul.col2 {
position:absolute;
top: 11px;
left:250px;
}

.nav-child > li > ul.col3 {
position:absolute;
top: 11px;
left:500px;
}

Open in new window


and everything looks good *but*  even your stripped down sample still has the original issue

http://jsbin.com/yowoxa/3/edit?html,output

as you move the mouse toward the next to parent navigation item, it's child panel "display:block" switches on *before* you actually enter the head nav item area.

Meanwhile I'm back to the CMS and digging into the errors top to bottom... wish me luck.

Fixing nav got us down from 522 to 507 errors

http://dev.himalayanacademy.com/readlearn
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That's because your navigation now validates!  

You may need to do some over all adjustments with your nav since it seems like you are doing this with all css.

You have
media="screen, projection"
.nav-global .nav-parent > li {
  color: #8c3945;
  padding: 0 22px;
  height: 40px;
}

Open in new window


That is adding 22px of clickable space to the left and right because padding becomes part of the element where margin does not.   Changing this to margin will partially do the trick.  That does mean you will have to play with the ul.nav-child padding/margin as well.

It is a lot easier to work on when the html is good.
0
BrahmanathaAuthor Commented:
Outstanding. Original question is solved! And learning about the fact that padding is part of the element is really a key... I did request attention, asked my comment be changed to ""Thanks Scott, you got us pointed in the right direction" and upgrade from C to A

Now.. I must not rest on these little laurels as there's still 507 errors to fix, but I have taken you persistent push to heart and thank you for that.  I may not finish today I promise not to just put it on the shelf... as you say.. it's only going make things harder in the future.

I appreciate your focus on this, really! Aloha from Kauai! if I had a postal address I would send something...

Cheers

check it out now

http://dev.himalayanacademy.com/readlearn

.nav-global .nav-parent > li {
	color: #8c3945;
	margin: 0 22px;
	height: 40px;
}

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That's awesome!  Thank very much for the kind words and follow up.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.