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.
Related
This is my website.. when you hover over the nav items and a drop down list appears, i want the drop down list to have white text permanently, not turn white.
Also if anyone knows how to make it so when you hover over the menu items a black line appears under the word not the whole background of the word goes black?
http://opax.swin.edu.au/~9991042/DDM10001/brief_2/Amalfi%20Coast/www_root/
#nav {
padding: 50px;
width: 924px;
height: 100px;
float: none;
}
#nav ul {
list-style: none;
margin-left: 5px;
width: 1000px;
display: table;
}
#nav a {
text-decoration: none;
color: #161717;
}
/*hide sub menu*/
#nav li ul {
display: none;
}
/*show and position*/
#nav li:hover ul {
display: block;
position: absolute;
margin-left: 0px;
margin-top: 0px;
}
/*main nav*/
#nav li {
width: 140px;
font-size: 14px;
display: inline-block;
-webkit-transition: all ease 0.3s;
}
#nav li:hover {}
/*sub nav*/
#nav li li {
color: white;
display: block;
background-color: black;
font-size: 11px;
padding-top: 5px;
padding-left: 5px;
width: 100px;
}
#nav li li:hover {
background-color: #A83133;
}
#nav a:hover {
color: white;
}
<div id="nav">
<div id="firstnav">
<ul>
<span class="font4"><li>SIGN IN</li>
<li>SIGN UP</li>
<li>MY TRIP</li>
</ul></span>
</div>
<ul>
<li>DESTINATIONS
<ul>
<li>Popular Places
</li>
<li>Other places
</li>
</ul>
</li>
I'm unsure if your question is about your top-link turning black when not being hovered
The reason this is happening is you put your hover on your a-element.
a-tags are by default inline elements. Which means they will only take up as much space as the text.
This means that when you hover on your li-element the hover on your link is no longer in effect.
You could change the color of your link when you hover on your li-element instead.
#nav li:hover a {
color:white;
}
As for the black line.
You could just add a border bottom to either your li-elements(if you want it to be the full lenght) or your a-elements(if you want it to only be as long as your word)
#nav li:hover
{
border-bottom: 1px solid #000;
}
Edit: This is a sollution for your top menu-item turning black when hovering. Was this your issue or did you want to change the color of your sub-items?
If so you can just do the following
#nav li li a
{
color:white
}
so the submenu should always have white text?
#nav ul li ul a {
color:#ffffff;
}
but i would recommend to do it with classes... so you do not have such large selectors and you can easily use that styling on other pages.
furthermore if you need to change the html tree or instead of using a list perhaps a div it wont work anymore. so go for classes :).
greetings timotheus
I would like to have a dropdown sub- menu in the same style, I know it's simple but I'm still new to making websites and I can't figure it out by myself.
here's the top part of my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Startpagina</title>
<LINK href="../CSS/stylesheet.css" rel=stylesheet>
</head>
<body>
<div class="schikking">
<img src="../Images/bibram.png" alt="Logo van de bib" height="90" width="170">
<!-- navigatie -->
<nav>
<ul>
<li><span class ="s2">Startpagina</span></li>
<li>Aanwinsten</li>
<li>Catalogus
<ul class="sub">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
</ul>
</li>
<li>Uitlening</li>
<li>Reservatie</li>
<li>Suggestie</li>
<li>Contact</li>
</ul>
</nav>
and a big part of my CSS file:
.schikking {
margin: 0 auto;
padding: 30px 0px 0px 0px;
max-width: 1010px;
}
.content {
background-color: red;
background-color: rgba(147, 4, 0, 0.84);
border: 1px solid black;
}
nav li
{
display: inline;
padding-right: 8px;
}
nav {
text-align: center;
margin: -20px 0px 0px 0px;
}
nav ul{
background-color: rgba(126, 4, 0, 0.79);
border: 1px solid black;
}
nav ul li{
display: inline;
}
nav ul li a{
padding-left: 1em;
padding-right: 1em;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: lightgray;
}
nav ul li a:hover{
color: #999999;
}
nav ul ul{display: none; position: relative;}
nav li ul li{float:none;display: inline-block; }
nav ul li:hover ul {display: inline-block;}
heres a picture of how it looks atm:
normal: http://gyazo.com/8f6553245b736feee8cc5ebf8d4a030c
while hovering over "catalogus": http://gyazo.com/662eee4bbbb2ea2318925be76b3722d2
You have nearly got it. I have only made some minor changes to the CSS to make it work.
nav ul li { display: inline-block; height: 100%; } instead of just display: inline is required so that the each <li> takes up all the height of the "menu" otherwise there is a small gap between the bottom of the <li> and the sub-menu which would cancel the :hover event since you are out of the <li>. inline elements do not have height (or width), so changed to display: inline-block.
The CSS at the end is where the other changes are. Your code is:
nav ul ul{display: none; position: relative;}
nav li ul li{float:none;display: inline-block; }
nav ul li:hover ul {display: inline-block;}
The display code doesn't need to be anything more than
nav ul li:hover ul {
display: block;
}
But to position the sub-menu outside of it's normal flow (which is currently appearing next to the parent menu item), you need to add an absolute position to the sub-menu `.
nav ul ul {
display: none;
position: absolute;
}
If you want a horizontal menu, that should be all the changes needed, since your rule nav ul li { display: inline-block; }will already apply to the sub-menu list-items. If you want a vertical menu, you need to reset the display back to the default list-item or block with:
nav ul ul li {
display: block;
}
See demo
Don't do it yourself. I use this jquery plug-in and its great:
Superfish
If you are having problems with anything I'd reccomend you to google them first. Here's a generator (just choose the one you want and follow the instructions):
Css drop down menu maker
I would also reccomend you to actually learning the language and expanding your knowledge, as well as googling questions before posting them here.
HTML :
<nav>
<ul>
<li><span class ="s2">Startpagina</span></li>
<li>Aanwinsten</li>
<li>Catalogus
<ul class="sub">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
</ul>
</li>
<li>Uitlening</li>
<li>Reservatie</li>
<li>Suggestie</li>
<li>Contact</li>
</ul>
CSS :
nav {
margin: -20px 0px 0px 0px;
text-align: center;}
nav ul ul {
display: none;
padding-right: 8px;}
nav ul li:hover > ul {
display: block;}
nav ul {
background-color: red;
border: 1px solid black;
list-style: none;
position: relative;
display: inline-table;}
nav ul:after {
content: ""; clear: both; display: block;}
nav ul li {
float: left;}
nav ul li:hover a {
color: #999999;}
nav ul li a {
display: block;
padding-left: 1em;
padding-right: 1em;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: lightgray;}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;}
nav ul ul li {
float: none; position: relative;padding: 10px;}
nav ul ul li a {
color: #fff;}
nav ul ul ul {
position: absolute; left: 100%; top:0;}
I have some serious problem with my menu and its hover effect.
I have a very basic menu, which has a submenu:
<ul id="menu">
<li>Menu1</li>
<li>Menu2
<ul>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
</li>
<li>Menu3</li>
</ul>
Here is the CSS I'm using:
#menu li {
display: inline;
}
#menu li a {
padding: 10px;
}
#menu li a:hover {
background: #000;
}
#menu ul ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul {
width: 200px;
height: 100px;
background: #000;
}
Okay, so my problem is, that when I hover my mouse the Dropdown menu and gets my mouse on the Submenus, the Hover effect of the Parent menu item (in this case Menu2) is disappearing. So it will not have black BG when I hover the mouse on the submenu items.
Is there anything I could do to make that hover effect stay on the partent menu (Menu2)?
First problem: your selectors are wrong.
#menu IS an ul , then #menu ul ul means
an ul descendant of an ul descendant of my #menu, that is an ul
You don't have three levels of uls, so...
change ul ul to li ul.
The second problem is that you are affecting a tag on hover, but a tag is a sibling, not an ancestor (or parent) of your submenu ul.
You should then target your li, not your a.
Demo: http://jsfiddle.net/mSrkn/ (with tons of problems still there, but with the two above resolved)
#menu li {
display: inline;
}
#menu li a {
padding: 10px;
}
#menu li:hover {
background: #000;
}
#menu li ul {
display: none;
}
#menu li:hover > ul {
display: block;
}
#menu li ul {
width: 200px;
height: 100px;
background: #000;
}
The problem is with yout selectors:
#menu ul li:hover > ul {
display: block;
}
This says that any element with ID that has a child ul with lis that's hovered with a child ul should be selected. Your markup is different from this, the UL itself is the ID #menu so you have to remove the first ul from the selectors themselves:
#menu li:hover > ul {
display: block;
}
http://jsfiddle.net/V7Ltw/
You might try adding the following to your CSS
#menu li:hover{
background-color: #000;
}
By hovering over the sub-menu, you're still hovering over the parent list item.
And you should follow Kyle's answer as well as you do need to remove the first UL selector from your css.
You have to change a lot of stuff to make this work, the basic idea is to put the submenu inside your menu items :
CSS:
#menu li {
display: inline;
}
#menu li a {
padding: 10px;
}
#menu li a:hover {
background: #000;
}
#menu ul.submenu {
display: none;
float: left; // For viewing purpose
}
#menu ul.submenu { padding: 20px; }
#menu ul.submenu:hover {
display: block;
}
#menu li:hover > ul.submenu {
display: block;
}
ul.submenu:hover + a { background: #000; }
#menu ul {
width: 500px;
height: 100px;
background: #000;
}
HTML:
<ul id="menu">
<li>Menu1</li>
<li>
<ul class='submenu'>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
Menu2
</li>
<li>Menu3</li>
</ul>
Demo here : http://jsfiddle.net/V7Ltw/
I'm using an HTML/CSS menu from the article SuckerFish Dropdowns. My particular menu has a grey background. I am trying to get the menu's background to have a fixed width. I tried adding a width parameter to the #navbar section in the CSS but that didn't seem to do anything. How do I get this fixed width behavior?
HTML
<ul id="navbar">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li>System Set-Up & Status
</li>
<li>NMEA Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li></ul>
</li>
<li>UDP Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li><li></li></ul>
</li>
<li>Baro / PoE
</li>
<li>Advanced
</li>
<li>MOB
</li>
</ul>
CSS
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #cccccc;
color: #000000;
text-decoration: none; }
#navbar li a:hover {
background-color: #999999; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #c0c0c0;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #999999; }
The CSS snippet is here and the HTML snippet is here
jsfiddle of question:
The #navbar is taking the appropriate width, but it does not have a background-color set so by default it is transparent.
Remove background-color from #navbar li a and add it to #navbar instead. You will also have to remove the height and clear your floats for it to work properly:
#navbar {
background-color: #cccccc;
margin: 0;
padding: 0;
overflow: hidden; /*clear floats */
}
Working example: http://jsfiddle.net/UfuG2/
Since you're floating your menu list items, you'll want to put a clearfix on the unordered list. Then you can set the width and background-color on the ul. Check out http://jsfiddle.net/qT7xs/.
Hey guys, thanks in advance for any help or input. I am having trouble understanding CSS selectors and i have read the docs..
I am trying to refer to the UL with the id dropdown in my stylesheet. I was under the assumption that i was able to refer to any elements like:
#dropdown ul
{
}
This method however does not seem to work :s.. Am i misunderstanding CSS selectors? The elements in my actual code are nested deeper than this structure but i presume the principle is the same?
<div id="wrapper">
<ul id="dropdown">
<li class="sub">Dropdown
<!-- Sub Menu -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- End Submenu -->
</li>
</ul>
</div>
/* Dropdown Menu */
#dropdown ul
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#dropdown ul li
{
display: block;
position: relative;
float: left;
}
#dropdown li ul
{
display: none;
}
#dropdown ul li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
#dropdown ul li a:hover
{
background: #617F8A;
}
#dropdown li:hover ul
{
display: block;
position: absolute;
}
#dropdown li:hover li
{
float: none;
font-size: 11px;
}
#dropdown li:hover a
{
background: #617F8A;
}
#dropdown li:hover li a:hover
{
background: #95A9B1;
}
Try
ul#dropdown
{
}
This will select the ul element with ID dropdown.
With
#dropdown ul
you are trying to locate a ul element within an element with id dropdown. This will select all ul elements inside the #dropdown ul, however many levels deep.
edit: it's right as mario wrote.
edit2: im sorry for being 5seconds too slow, i just wanted to help. For completition of my post:
ul#dropdown or #dropdown is the right selection
#dropdown ul means "select any ul that is a direct or indirect child of #dropdown". That is not what you want, I think. Try #dropdown alone (you don't need to mention ul as IDs are exclusive, meaning you should only have one #dropdown in a page).