The sub categories in my menu are always visible, even though their display is set to none. What am I doing wrong?
http://codepen.io/MrAxlee/pen/QwyVMJ
<header id="header">
<!-- Logo -->
<h1 id="logo">MrAxlee</h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li>Home
<ul>
<li>Intro</li>
<li>What I do</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</li>
<li>Blog</li>
<li>Tutorials
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</nav>
</header>
And the CSS
#nav ul li ul {
display:none;
}
#nav ul li:hover > ul {
display:block;
}
"il" is not "li" :-)
this woks great:
#nav ul li ul {
display:none;
}
#nav ul li:hover > ul {
display:block;
}
he also had troubles with FTP but now all is OK for him.
You have a typo in your css
#nav ul il ul {
display:none;
}
It should be #nav ul li ul :)
Check out This You misspell LI in
#nav ul il ul {
display:none;
}
http://jsfiddle.net/yufrfueo/
Related
I have a navbar that contains a menu nested 3 times. So I have a div with id="navbar", which contains an ul, that has a li item with id="menu", that contains another ul, that contains more li items. Now I want to target every ul seperately, to add some JS code to it, make the first layer display in a row and so forth. So far I've only managed to target the first level, and the third one, but haven't been able to change properties of the second one. Somehow #navbar ul li goes to the first one, but #navbar ul li ul li targets the third. What am I doing wrong?
HTML:
<div id="navbar">
<ul>
<li>IJS</li>
<li class="ion-navicon-round" id="menu"></li>
<ul>
<li>knjižnica</li>
<li>zaloga
<ul>
<li>novi izvodi tiskanih revij</li>
<li>elektronske revije</li>
<li>katalog</li>
<li>baze podatkov</li>
</ul>
</li>
<li>storitve
<ul>
<li>medknjižnična izposoja</li>
<li>fotokopirnica</li>
</ul>
</li>
</ul>
<li>ENG</li>
</ul>
</div>
CSS:
#navbar {
background-color: #913D88;
color: #fff;
font-size: 1.5em;
}
#navbar ul li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
#navbar ul li a:link, #navbar ul li a:visited {
color: #fff;
text-decoration: none;
}
#navbar ul li ul li {
display: none;
}
Small mistake. Your second level ul are outside of li elements instead of inside.
The problem is there in the following code.
<li class="ion-navicon-round" id="menu"></li>
<ul>
<li>knjižnica</li>
<li>zaloga
<ul>
<li>novi izvodi tiskanih revij</li>
<li>elektronske revije</li>
<li>katalog</li>
<li>baze podatkov</li>
</ul>
</li>
<li>storitve
<ul>
<li>medknjižnična izposoja </li>
<li>fotokopirnica</li>
</ul>
</li>
</ul>
Should be like this.
<li class="ion-navicon-round" id="menu">
<ul>
<li>knjižnica</li>
<li>zaloga
<ul>
<li>novi izvodi tiskanih revij</li>
<li>elektronske revije</li>
<li>katalog</li>
<li>baze podatkov</li>
</ul>
</li>
<li>storitve
<ul>
<li>medknjižnična izposoja</li>
<li>fotokopirnica</li>
</ul>
</li>
</ul>
</li>
DEMO
you have an error in your syntax.
the second "ul" is not in an li, because you close the li before it.
so try
#navbar ul ul li {
background-color: #ffff00;
}
got an html list working as a dropdown menu with CSS when you hover through a < li > element like "Products" in my example. But what I want is the same effect when hover through < h3 > like "Contact" from my example. Is it possible?
Here's the html:
<h3>Contact</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
And the CSS code:
ul li ul {
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
Thank you very much in advance.
On hover you can only control the CSS of the element you hover over, or the CSS of elements within the element you hover over (one of its children).
So you can not make the ul change styles when you hover over the h3 because they 1) are not the same object and 2) do not have a parent-child relationship (they are siblings).
To show the menu when hovering over the h3, you can wrap both of them inside another object (div) and use this for the hover event. To distinguish between the two hovers you can add classnames to both the uls.
See this JSfiddle, or the code below:
<div class="container">
<h3>Contact</h3>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul class="submenu">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
.container ul{
display: none;
}
.container:hover ul.menu{
display: block;
}
ul li ul.submenu {
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
In short - you should nest ul inside the h3
<h3>
Contact
<ul>
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</h3>
And in your css:
ul li ul {
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
h3 > ul {
display: none;
}
h3:hover > ul {
display: block;
}
Here's the demo: https://jsfiddle.net/mscehjLf/1/
Hi I have a basic menu for which I would like to add a submenu, that appears only when a certain menu link is hovered. Everything I have tried does not hide the submenu when a link is not hovered. Here is my code:
CSS
.navmenu{
float:right;
font-size: 13px;
font-weight:400;
text-transform: uppercase;
}
.navmenu li{
position: relative;
display: inline-block;
float: left;
}
.navmenu li a{
text-decoration:none;
color:#eee;
padding:15px 37px 19px 37px;
}
.navmenu li a:hover{
background:#36332e;
}
.active a{
background:#36332e;
}
HTML
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>Sub Link 1</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
You need to initially hide the menu:
.navmenu li ul { display: none; }
and then display it when you hover over the nav item:
.navmenu li:hover ul { display: none; }
You should also be careful about defining styles that target .navmenu li or .navmenu li a because those will also target your submenu. You should instead use child selectors, giving you more control over the non-submenu links, so your selectors will look like:
.navmenu > li
.navmenu > li > a
I've encorperated some of those changes into this JSFiddle to get you started:
http://jsfiddle.net/Wexcode/B5P26/
Edit:
This is actually going to lose it's hover state when you hover over the submenu links:
.navmenu > li > a:hover {
background:#36332e;
}
Instead, you should do this:
.navmenu ul { position: absolute; }
.navmenu > li:hover { background: #e6332e; }
.navmenu > li > a { display: block; }
Since the <ul> is nested inside the <li> element, you won't lose the hover state when you hover over the submenu links. I updated the fiddle to reflect these changes.
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>
Sub Link 1
<ul>
</li> <a href=# >hi hi hi</a>
<ul>
<li>hello hello hello</li>
<li>hello hello hello</li>
<li>hello hello hello</li>
</ul>
</li>
</li><a href=# >hi hi hi</a> </li>
</li> <a href=# >hi hi hi</a> </li>
</ul>
</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
I have the following css vertical navigation menu I have done. There are up and down images for the parent category 30px high for rollover and separate up and down images for the second and third levels of the menu rollover at 25px high.
For each level, there is a different type of up and down images if there is no continuing category.
It works OK except for 3 areas that I have been struggling with for days now and can't seem to see where I have gone wrong.
The first is that the text for each level gets smaller and smaller for some reason and the second is that at the third level, all the images shown the up and down images as if there it a continuing category, and last but not least, when a category is selected in the first, second or third category, I can't seem to find a way to keep those links highlighted to show the user that they are in that area.
I hope someone is able to figure this out as I have been going crazy for days now. Thanks in advance.
Please find the current code below (in the image areas I have described what the images are for to understand what images I am using) :
The HTML:
<div id="nav">
<ul class="menu">
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
The CSS:
#nav {
float:left;
width:200px;
z-index:1;
}
#nav ul.menu, #nav ul.menu > ul.sub-menu, #nav ul.menu > ul.sub-sub-menu {
display:block;
width:200px;
margin:0;
padding:0;
list-style-type: none;
}
#nav ul.menu > li {
float: left;
display:block;
width:200px;
height:30px;
font-size:0.9em;
line-height:2.2em;
margin-bottom:1px;
}
#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
float: left;
display:block;
width:200px;
height:25px;
font-size:0.7em;
line-height:2.2em;
}
#nav li a {
display:block;
width:200px;
color:#FFF;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
list-style-type:none;
}
#nav ul.menu > li > a {
background: transparent url('../../parent-category-with-submenus.png');
display:block;
width:200px;
height:30px;
margin-bottom:1px;
}
#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
background: transparent url('../../second-third-categories-with-submenus.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.sub-menu > li:hover > a:only-child, #nav ul.sub-sub-menu > li:hover > a {
background: transparent url('../../second-third-categories-with-NO-submenus-ROLLOVER.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.menu ul ul li {
float: none;
list-style-type: none;
}
#nav li > ul {
display: none;
list-style-type: none;
}
#nav li:hover > ul {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:0px;
margin-left:192px;
}
#nav li:hover > ul.sub-menu {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:-40px;
margin-left:198px;
}
#nav li:hover > ul.sub-sub-menu {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:-30px;
margin-left:198px;
}
Font Size
You font size gets smaller because you are using ems. An em is a relative unit. If you're base font size is 20px and you're using 0.75em then the font size of a child element whose parent used the base 20px font size would be 15px (20x0.75=15). Now a child of that child (grandchild) would start with the child's font size of 15px and it's font size would be 11.25px (15x0.75=11.25). I set the text to be 16px for all li in the jsFiddle below.
UP and DOWN images
I didn't bother figuring out the exact issue with this but you do have a lot of kruft in this part of your CSS. I would add a class to the li that has a sub-menu within it. Something like .has-sub-menu. Then target the anchor tags like so .menu > .has-sub-menu > a and .sub-menu > .has-sub-menu > a. Also see the jsFiddle below.
HTML
<div id="nav">
<ul class="menu">
<li>Home</li>
<li class="has-sub-menu">
Home
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
</ul>
</div>
CSS
.menu > .has-sub-menu > a {
background-image: url(img-one.png);
}
.sub-menu > .has-sub-menu > a {
background-image: url(img-two.png);
}
Navigation Highlighting
This one cannot be done with CSS unless you add a class to each li or anchor tag. Something along the lines of the name of the page and then on each page add a body class of the same or similar name.
HTML
<!-- your code -->
<body class="products">
<!-- more of your code -->
<div id="nav">
<ul class="menu">
<li class="products">Products</li>
<li class="about">About</li>
<!-- more links -->
</ul>
<!-- more links -->
</div>
<!-- more of your code -->
</body>
In the example above we are viewing the products page. For the about page you would replace the class on the body tag with about. In the end this does not have to be added to the body tag but some other ancestor element. But the body tag is a nice clean solution and helps ensure that the class will be encapsulated within one another.
Then you could target the link like so with your CSS.
CSS
/* non-active */
#nav li {
color: white;
background-color: red;
}
/* active */
.products .products,
.about .about {
color: red;
background-color: blue;
}
If the above is not doeable then I believe you will have to do some light programming via PHP, ASP or whatever server side language you have available to you. You could also use JavaScript. You can also find answers to this with a simple StackOverflow search.
The fiddle below addresses all three issues with the solutions above. I also added a little jQuery so you can switch out and try the navigation highlighting.
http://jsfiddle.net/u2V8v/
Issue #1: The text gets smaller in the sub-menus because you have this rule
#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
...
font-size:0.7em;
...
}
while the default for the first level items is
#nav ul.menu > li {
...
font-size:0.9em;
...
}
Either remove the font-size decalaration for the submenus or set the value to inherit
Issue #2
I couldn't test this since I don't have your images so I'm not sure if this is what's causing the problem but it seems you're missing the > a at the end of this CSS rule selector
#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
background: transparent url('../../second-third-categories-with-submenus.png');
...
}
Issue #3
To highlight the menu items you can just set a background color on the hover state, they will stay highlighted while the user is browsing sub-menus
#nav ul li:hover{
background:red;
}
I am using menu from UI
I have this ul
<ul id="menu">
<li>Loans</li>
<li>
Bancassurance
<ul>
<li>Aman el darb</li>
<li>Aman el elem</li>
<li>Aman el ghad</li>
</ul>
</li>
<li>
Services
<ul>
<li>Audi Mobile</li>
<li>Pin-Pay</li>
<li>ADSL Services</li>
<li>Bill Payment</li>
<li>Internet Accesses</li>
</ul>
</li>
<li>
Accounts
<ul>
<li>Wedding Account</li>
<li>Payroll Account</li>
<li>Saving Account</li>
<li>Current Account</li>
</ul>
</li>
</ul>
My CSS :
.ui-menu-item { }
This select all li from <ul id="menu">
How should the css selector look like so I can select the submenu `ul inside of #menu
According to your script use this .ui-menu-item #menu ul{ }
You can write like this
#menu ul li a{ css here}
DEMO
or
#menu ul li{ css here }
DEMO 2
If I am understanding your question correctly, you will need this
#menu ul {
}
If you need to target a specific UL inside of #menu, you should add an ID or Class to that particular UL and then reference it with this
#menu #example {
}
You can take it a step further and target each LI in the same fashion, like this
#menu #example li {
}
Hope this helps!
Selecting the UL inside of #menu is pretty simple:
#menu ul { /*CSS HERE*/ }