I'm using the CSS lines below for a menu on a webpage.
The problem is that I don't know how to make that code apply only to the menu, and not to other ul -unordered lists- on the page!
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #AAF7BB;
font-size: 110%;
}
ul li:hover {
background: #ffffff;
color: #000000;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ffffff;
display: block;
color: #00ff00;
}
ul li ul li:hover { background: #ffffff; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
Please help.
Try marking your ul as a class and refer to that instead of just ul.
<ul class="menu">
and change all instances of ul in the css to .menu.
Refering to just "ul" will apply the change to all ul elements.
As mentioned you can do this using classes on your html. I would try and Google this a little more. There are tons of example for menus out there.
In the top three is this:
http://www.noupe.com/essentials/freebies-tools-templates/100-great-css-menu-tutorials.html
Something simple:
<ul class="menu">
<li class="menu-option">
Home
</li>
<li class="menu-option active">
About
</li>
<li class="menu-option">
Contact
</li>
<ul class="sub-menu">
<a>Something to click</a>
<li class="menu-option">
Contact
</li>
<li class="menu-option">
Contact
</li>
</ul>
</ul>
Your css would need to be updated similar to below
ul.menu:{
/*Your style for the menu*/
}
ul.menu li.menu-option:{
/*Your style for the menu's options*/
}
ul.menu ul.sub-menu:{
/*Your style for the menu's sub-menu's*/
}
Use the class or id attributes alongside your HTML elements. For example:
HTML
<ul class="class1">
...
</ul>
<ul class="class1">
...
</ul>
<ul id="class2">
...
</ul>
CSS
.class1{
implement css styling here
}
#class2{
implement css styling here
}
Here, the top 2 ul elements will be styled by the .class1 CSS styling, the final ul with the attribute #class2 will be styled by the corresponding CSS.
Note that . denotes classes in CSS and # denotes IDs
IDs are unique, classes are not unique. More information
Related
I have a problem with the navigation bar. When I hover over About or Text on the nav bar it shows a spacing on the left side of the button, I want it the hover colour to contain the full width of the button.
https://jsfiddle.net/jdd3h0sf/3/
HTML:
<div id="nav">
<ul>
<li class="home">Home</li>
<li>About</li>
<li>Text ⌄
<ul class="submenu">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
<li>Work</li>
<li>Contact ⌄
<ul class="submenutwo">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
</ul>
CSS:
#nav {
background-color: #333;
height: 52px;
text-align: center;
margin: 0 auto;
letter-spacing: 1px;
text-transform: uppercase;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li {
border-right: 1.8px solid #191919;
height: auto;
width: 156.5px;
padding: 0;
margin: 0;
}
.home {
border-left: 1.8px solid #191919;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #444;
}
#nav ul li a, visted {
color: #ccc;
display: block;
padding: 15px;
margin: 0;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #444;
border: 1px solid #333;
border-top: 0;
max-width: 169px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:visited {
color: #ccc;
}
#nav ul ul li a:hover {
color: #2980B9;
}
This is a part of display:inline-block;. If you want to keep them displayed inline-block, there are several different solutions (Read a css-Tricks article about it):
1 - Change your HTML format:
Change your <li>'s html like this:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
Or this:
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
Or even with comments, like this:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
Or, just place all the li's on a single line:
<ul><li>one</li><li>two</li><li>three</li></li>
It is messy, yet effective.
2 - Negative margins:
Pretty straightforward:
li{
display: inline-block;
margin-right: -4px;
}
3 - Skip the closing tag:
This is actually perfectly fine in HTML5, li's do not have to have a closing tag.
<ul>
<li>one
<li>two
<li>three
</ul>
4 - Set the <ul>'s font size to 0:
ul {
font-size: 0;
}
ul li {
font-size: 16px;
}
5 - Or, just float the <li>'s:
Whatever floats your boat.
You are experiencing the dreaded inline-block spacing issue. In your fiddle, if you condense all of your li elements to be on the same line, the hover works as expected. The linked article outlines a few other options.
You can also just float the elements and that would resolve the issue.
#nav ul li {
float: left;
}
I have the following menu structure:
<li id="nav-menu-item-226" class="menu-item-has-children">
About Us
<ul class="sub-menu dropdown-menu menu-odd menu-depth-2">
<li class="sub-menu-item"><a href="...">...</li>
<li class="sub-menu-item"><a href="...">...</li>
</ul>
</li>
Unordered list has by default display: none.
What I need to get done is that whenever user hovers over parent page link, sub-menu would drop down.
In the best case, I would need to get it done with css only. I have tried many different snippets but none of them helped.
Give id to ul tag and give its style display:none.
then,
in your css
#id ul li:hover > ul { display:block }
This is how I would do it:
.sub-menu {
display:none;
}
.menu-item-has-children:hover > .sub-menu {
display:block;
}
Here is the JSFiddle demo
You could also get it work with jQuery to have a nice slideDown/slideUp effect.
jQuery:
;(function($){
$("#menu li:has(ul)").hover(function(){
$(this).find("ul").not(":animated").slideDown();
}, function(){
$(this).find("ul").not(":animated").slideUp();
});
})(jQuery);
CSS
#menu .sub-menu {
display: none;
}
HTML
<ul id="menu">
<li id="nav-menu-item-221" class="menu-item-has-children">
Home
<li id="nav-menu-item-226" class="menu-item-has-children">
About Us
<ul class="sub-menu dropdown-menu menu-odd menu-depth-2">
<li class="sub-menu-item"><a href="...">...</li>
<li class="sub-menu-item"><a href="...">...</li>
</ul>
</li>
<li id="nav-menu-item-233" class="menu-item-has-children">
Third
</li>
</ul>
Working JSfiddle
All you really need to do is nest the <ul> within your <li> element.
<nav>
<ul>
<li>Link</li>
<li>
Link
<ul>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Link</li>
</ul>
</nav>
Here's some CSS that will help you get started:
* Resets */
nav a {
text-decoration: none;
font: 12px/1 Verdana;
color: #000;
display: block; }
nav a:hover { text-decoration: underline; }
nav ul {
list-style: none;
margin: 0;
padding: 0; }
nav ul li { margin: 0; padding: 0; }
/* Top-level menu */
nav > ul > li {
float: left;
position: relative; }
nav > ul > li > a {
padding: 10px 30px;
border-left: 1px solid #000;
display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }
/* Dropdown Menu */
nav ul li ul {
position: absolute;
background: #ccc;
width: 100%;
margin: 0;
padding: 0;
display: none; }
nav ul li ul li {
text-align: center;
width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }
Preview Demo
After a long break from HTML/CSS, I recently created a menu with dropdown links using a method I have used once before, and was surprised to find that this application of them is not working.
I used this
ul li:hover ul{ display:block;}
to "turn on" my menus when hovering, but they simply never appear. I have tried adding div tags around various blocks of code to no avail. What tricks am I missing?
jsfiddle here: https://jsfiddle.net/qccs4mLL/
Your html isn't align with your css selector.
ul.menu li:hover > ul {
display: block;
background: green;
}
There isn't any ul element that is direct child of li element. You can change your html so ul is direct child of li element.
body {
margin: 0px;
}
a {
text-decoration: none;
width: 8em;
/*width of each link*/
}
/*format list*/
ul {
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
ul.menu {
height: 2.5em;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: #454545;
}
ul.menu li {
float: left;
position: relative;
}
ul.menu li a {
cursor: pointer;
display: block;
color: white;
line-height: 2.5em;
padding: 0 10px;
}
ul.menu ul {
background: #555;
display: none;
position: absolute;
left: 0;
top: 100%;
}
ul.menu li:hover {
background: red;
}
ul.menu li:hover > ul {
display: block;
background: green;
}
<body>
<!--Heading-->
<!--Should change when scrolled down/on mobile-->
<h1 class="heading">Title</h1>
<!--Create Menus-->
<nav>
<ul class="menu">
<li>link1
<ul>
<li>sublink1
</li>
</ul>
</li>
<!--menu options with sub options have dropdown on computer, may unfold with tap on mobile or just be a click since they all go to one page maybe? maybe go with unfolding.-->
<li>link2
<ul>
<li>sublink1
</li>
<li>sublink2
</li>
<li>sublink3
</li>
<li>sublink4
</li>
</ul>
</li>
<li>link3
</li>
<li>link4
</li>
</ul>
</nav>
</body>
I'm having trouble showing a drop down menu in the correct way. This is what I get to see:
This is my HTML code:
<nav class="menuBox">
<ul>
<li>HOME</li>
<li>KLASSEMENTEN</li>
<li>KALENDER</li>
<li>NIEUWS</li>
<li>MEDIA</li>
<li>LINKS</li>
<li>
INLOGGEN
<ul>
<li class="first">
ADMIN
</li>
<li>
EDIT ACCOUNT
</li>
<li class="last">
LOG OUT
</li>
</ul>
</li>
</ul>
</nav>
My CSS code:
/* ### menu Box ### */
.menuBox { position: absolute; top: 74px; right: 2px; }
.menuBox ul { list-style: none; }
.menuBox li { float: left; margin-left: 17px; font-size: 14px; text-transform: uppercase; }
.menuBox li a { color: #3f3f3f; text-decoration: none; display: block; padding-bottom: 14px; }
.menuBox li a:hover { background: url(../images/menu_hover.png) repeat-x 0 bottom; }
.menuBox ul li ul{ display: none; }
.menuBox ul li:hover ul{ display: block; }
I would like to have something like this:
But how can I do this?
add this to your CSS:
.menuBox ul li ul li {
display: block;
float:none;
}
Explanation: you're floating your li elements, but you need to clear the floats for the second level of li elements (those in the sub menus), thus you need to add this declaration.
See fiddle here
I'm trying to fashion a 100% CSS and HTML dropdown menu like what's seen on http://phpbb.com. When you hover over the navigation links, a new div appears just below the one you hovered onto.
What I'm trying to do is make .submenu appear just below the <li> that it's nested into by using #nav li a:hover submenu {. To my knowledge this CSS selector should select the .submenu DIV when an a element is hovered over? But it doesn't work.
#nav {
list-style-type: none;
margin: -5px 0px 0px 5px;
}
#nav li {
display: inline;
}
#nav li a {
display: block;
padding: 3px;
float: left;
margin: 0px 10px 0px 10px;
text-decoration: none;
color: #fff;
font-weight: bold;
position: relative;
}
#nav li a:hover {
text-shadow: 1px 1px #333;
}
#nav li a:hover submenu {
display: block;
color: red;
}
.submenu {
position: absolute;
display: none;
}
<ul id="nav">
<li>Home
</li>
<li>
Skins
<div class="submenu">
hello :)
</div>
</li>
<li>Guides
</li>
<li>About
</li>
</ul>
Your second to last selector is looking for a "submenu" element, you should correct this to say ".submenu"
Like this:
/*#nav li a:hover submenu {*/
#nav li a:hover .submenu {
display: block;
color: red;
}
EDIT:
To get the hover to work, you also need to adjust your CSS so that the hover is applied to the list item, instead of the anchor tag:
#nav li:hover .submenu {
display: block;
color: red;
}
Are you missing a period ('.') before submenu in the selector #nav li a:hover submenu?
Try to edit this following part.
Put a . (dot) before the submenu, since its a class.
#nav li a:hover .submenu {
display: block;
color: red;
}
#nav li:hover .submenu {
display: block;
color: red;
}
You want the submenu to appear when you hover on li, not on a, simply because you do not have items with a class submenu inside the a.
Also you could consider using s for the submenus.