I was wondering is it possible to display the links contained in the nav element with the id value of sub-menu when I hover over the link with the id of more-subs using just CSS? If so how?
<nav id="main">
<ul>
<li>More</li>
</ul>
</nav>
<nav id="sub-menu">
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</nav>
You cannot travel up the DOM in css - only down (thus cascading).
If you can't change your html markup you will have to use a javascript solution to make this work.
Otherwise if you can change your html do it like this: http://jsfiddle.net/JdZUx/15/ (edited code in case you want to have multiple dropdowns)
<nav id="main">
<ul>
<li>
More
<ul class="sub-menu">
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
</ul>
</nav>
#main .sub-menu {display:none;}
#main li:hover .sub-menu {display:block;width:200px;background:#ccc;}
Note: This is just basic code - if you want it to be crossbrowser compatible you will have to optimize and add some more rules. also :hover in IE6 is supported only on <a> element
check this tutorial, i think it will help you.
https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/
try use something like:
#more-subs #sub-menu{
display: none;
}
#more-subs:hover #sub-menu{
display: block;
}
Is this helps you?
Related
There´s my code below, now I´m trying to know if there is some CSS property to inform users that there is a sub menu in my <li>test</li>. Is it possible?
<section id="menu-container">
<nav id="menu">
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
<li>test
<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
<li>item d</li>
</ul>
</li>
</ul>
</nav>
</section>
CSS:
#menu {width:960px; height:auto; margin:0 auto 0 auto;}
#menu ul {list-style-type:none;}
#menu ul li {float:left; height:46px;line-height:46px; font-weight:300;}
#menu ul li a {text-decoration:none;color:#ccc; display:block; margin-right:5px; height:46px; line-height:46px; padding:0 5px 0 5px;font-size:20px; }
Just for the record it is possible without JS:
What I did is to specify a styling for child ul-elements nested within an li.
The sub-ul is not visibility:hidden as in the previous example, the child elements are.
So here you go:
http://codepen.io/anon/pen/ufGdm
#Paulie_D I used your code as basic and just changed some parts.
There is no CSS property that detect a child element.
However it's simple enough to do with JQuery...in fact there are an number of ways with JQ
Here's one.
JQuery
(function($) {
$("nav > ul").addClass("top-level");
$(".top-level li:has(ul)").addClass("parent");
})(jQuery)
Codepen Demo
I am trying to recreate this nav menu in css - but I am having a hard time with getting bit rows to justify to each other correctly.
I'm not sure is formatting it as an li element is best - or should I try JS Buttons.
Any advice is appreciated.
I tried to put a picture up - but it doesn't look like a have enough reputation ponts - but just imagine all the buttons aligned justified.
I have a JS fiddle up here
<nav id="access" class="group" role="navigation">
<ul id="two">
<li>Home</li>
<li>About Us</li>
<li>PRODUCTS</li>
<li>EDUCATION</li>
<li>HISTORY</li>
<li>ALUMNI</li>
</ul>
<ul id="one">
<li>THE PHILLAPINES</li>
<li>INFORMATION</li>
<li>GERMANY</li>
<li>LONDON</li>
<li>Contact Us</li>
</ul>
</nav>
http://jsfiddle.net/mjkessel/jK26n/2/
For #access ul li add float: left; and for #one li and #two-li replace margin-right with margin-left and now try to combine. If you want to have all li with the same width set width for #access ul li
Could some one explain me how CSS drop downs works?
I've seen alot of them, most of them has the > selector,
My question is:
How can you make CSS dropdown with the > selector?
I looked towards a lot of tutorials and never understood what does the > do and how does it connects with the HTML classes\Ids.
Could someone explain me that, part by part?
Thank you.
It is used to select direct children.
Consider following markup
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
A selector of #container > ul will only target the uls which are direct children of the div with an id of container.
It will not target, for instance, the ul that is a child of the first li.
For this reason, there are performance benefits in using the child combinator.
HTML:
<ul class="menu">
<li>
<span>menu 1</span>
<ul>
<li><a href="#" >Sub 1-1</a></li>
<li><a href="#" >Sub 1-2</a></li>
<li><a href="#" >Sub 1-3</a></li>
</ul>
</li>
<li>
<span>menu 2</span>
<ul>
<li><a href="#" >Sub 2-1</a></li>
<li><a href="#" >Sub 2-2</a></li>
<li><a href="#" >Sub 2-3</a></li>
</ul>
</li>
</ul>
css:
ul.menu>li{ /*Only direct children*/
float:left;
width: 60px;
}
ul.menu li ul{
display:none; /*not visible*/
}
ul.menu li:hover ul{
display:block; /* visible when hovering the parent li */
}
Explanation is in the css.
Demo:
http://jsfiddle.net/FH7Z3/
The > operator in CSS means that following expression must be a direct child.
For example, div span matches SPAN elements which are descendants of a DIV element, but div > span only matches SPAN elements which are a direct child of a DIV.
http://www.w3schools.com/cssref/sel_element_gt.asp
see this the > is a child selector. Rather than referencing to all the descendents we want to address only the direct descendents. View it as wanting to select only the children but not grand children or any further.
I have the following HTML code:
<div>
<ol class="sortable">
<li id="list_1" class="nob"><div>A</div>
<ol>
<li id="list_2"><div>1</div></li>
<li id="list_3"><div>2</div></li>
<li id="list_4"><div>3</div></li>
<li id="list_5"><div>4</div></li>
</ol>
</li>
<li id="list_6" class="nob"><div>B</div>
<ol>
<li id="list_7"><div>1</div></li>
<li id="list_8"><div>2</div></li>
</ol>
</li>
</ol>
</div>
I want the output to be as :
|A|1|2|3|4|B|1|2|
Can anyone help me write the CSS for the same?
Thanks.
Basic solution:
.nob, .nob div, .nob ol, .nob li { display: inline; /* or inline-block */ }
Use inline if you don't need to control vertical margins. Otherwise you should consider using inline-block.
.sortable li, .sortable li div, .sortable li ol {
float:left;
}
I have this list :
<ul class="topnav" id="topnav">
<li><span>community</span>
<ul class="level1">
<li><span>Commun1</span>
<ul class="level1">
</ul>
</li>
</ul>
</li>
<li><span>Events</span>
<ul class="level1">
<li><span>Event1</span>
<ul class="level1">
<li><span>Event2</span>
<ul class="level1"></ul>
</li>
</ul>
</li>
</ul>
</li> the the first ul under community and the first ul under Events
</ul>
I need to access only the first ul with the class level1 Im using In each ul I need to access only
.topnav li > ul
{
//code here
}
I've updated my code still can't access the only the fi
Use like this:
#topnav li:first-child ul
{
// your style
}
See the working demo : http://jsfiddle.net/bqBdn/4/
Note: Your HTML code is little bit buggy, So correct it as I did in this demo. Use proper tagging for ul, li inside main liThanks!
it works for me: jsfiddle demo
ul.topnav li > ul {
color:blue;
}
Try this:
#topnav li ul:first-child
from here
.topnav li > ul.level:first-child
will access only the first ul with a .level class at the first level after the li.
This is because your html is wrong. You can't have an <li /> as a child of another <li />. The browser is correcting the mistake - bringing all the <ul />'s under the initial one to the same level. Your css is working, your html is the problem.
Are you able to change this?