I know how to display submenu. I need that li a home link, would be different color when my cursor is on submenu ... Hope you will understand what I am saying.
I Thought and tried that #menu li a:hover >ul but not working.
Sample of html menu:
<li><a href=# >home</a>
<ul class="submenu">
<li><a href=# >sub</a></li>
<li><a href=# >sub</a></li>
</ul>
</li>
You need to use the parent li's :hover pseudo class.
jsFiddle
CSS:
#homeMenu:hover #homeLink {
color: blue;
}
HTML:
<ul>
<li id="homeMenu">
home
<ul class="submenu">
<li>sub
</li>
<li>sub
</li>
</ul>
</li>
</ul>
Well I think this does what you want. Can't imagine how it would be useful, though.
HTML:
<a href="#" >home</a>
<ul>
<li>sub</li>
<li>sub</li>
</ul>
CSS:
ul{
display: none;
}
a:hover + ul{
display: block;
}
Fiddle: http://jsfiddle.net/hmvw4tjc/
You were on the right way:
#menu li ul { display: none; }
#menu li:hover ul { display: block; }
#menu li > a { color: black; }
#menu li > a:hover { color: blue; }
Related
I am learning HTML5 and CSS. So my question is probably very basic and very naive. My apology for that.
To practice I am developing a header menu with drop down sub menu. I primarily hide the drop down menu by setting its display property to none, after hovering on the parent I set the display to block. But it seems like hover can't change the display value. Also it is worth mentioning that my html page is using flex box in order to have grid layout.
here is the html file:
<div class="menue">
<nav>
<ul>
<li>Home</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Woman</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Men</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Kids</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Flyers</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Contact Us</li>
</ul>
</nav>
</div>
and here is the css file:
.menue {
background: #fc575e;
}
nav{
height:40px;
width: 960px;
display: block;
margin: 0,auto;
text-align: center;
text-transform: uppercase;
}
nav a{
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul{
list-style: none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height: 40px;
background: #fc575e;
}
nav ul ul li{
position: relative;
display: none;
}
nav ul li:hover ul li{
display: block;
}
nav ul li:hover{
background-color: #223433;
color:#f0f1f5;
}
It seems like my hover action does not doing its job to change the display value of sub-menu to block.
I was wondering if some one could give me a hint?
It is really appreciated.
your css seems to be working fine. what you want to do is wrap both the <a> and <ul> tag inside an <li>
<li>
Home
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
#Davi has it right, but you could also change
nav ul li:hover ul li{
display: block;
}
for
nav ul li:hover + ul li {
display: block;
}
Heres a jfiddle of it working
By the way, when you hover over a menu button, whenever the submenu wants to show up, it will displace all other elements in the original menu
Also, here is a nice tutorial on what you want to do specifically
I know #JSelser has already provided a working answer. Yet, I felt mine could be helpful to another person. I went through this tutorial http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css and adjusted to satisfy your menu.
<!DOCTYPE html>
<html>
<head>
<style>
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#3e3436;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#919191;
}
.menu li:hover > a{
text-decoration:none;
color:#ffffff;
background:#696969;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a{
background:#2e2728;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
text-decoration: none;
}
.menu-title{
text-decoration: none;
background-color: #fc575e;
color: #000000;
}
a.menu-title{
color: #000000;
}
</style>
</head>
<body>
<div class="menu_wrap">
<nav class="menu">
<ul class="clearfix">
<li><a class="menu-title" href="#">Home <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li><a class="menu-title" href="#">Woman <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li><a class="menu-title" href="#">Men <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li><a class="menu-title" href="#">Kids <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li><a class="menu-title" href="#">Flyers <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li><a class="menu-title" href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</body>
</html>
I want to dsiplay menu when hover but not working.
HTML code pour afficher:
<nav>
<ul class="menu">
<li>home</li>
<li class="current">other</a></li>
<li>
services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
</nav>
CSS code to display menu and drop:
nav .menu li:hover > a {
background: #e2782e;
transition: all 0.5s;
color: white;
font-weight:bold;
}
.drop{
display:none;
}
li :hover > .drop{
display:black;
}
Please check below code for your reference.
ul.drop{display:none;}
nav ul li a:hover{background:#ccc;}
nav ul li:hover ul.drop{display:block;}
<nav>
<ul class="menu">
<li>home</li>
<li>other</li>
<li>services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
</nav>
<nav>
<ul class="menu">
<li>home</li>
<li class="current">other</a></li>
<li>
services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
</ul>
</nav>
nav .menu li:hover .drop li a {
background: #e2782e;
transition: all 0.5s;
color: white;
font-weight:bold;
}
.drop{
display:none;
}
li :hover > .drop{
display:block;
}
Please try this code.
Several issues:
unnested </a> tag for "other" menu item.
extraneous </ul> tag at the end
black is not a valid value for the display property, use list-item instead.
Edit: see Nick De Jaeger's answer above for the corrected code. Using display: block also works, but list-item is more appropriate in this case (<li>).
Bart look here this is all css when I hover on drop all auther menu item hided
nav .menu {
height: 60px;
background: #8d8989;
border-radius: 5px;
padding: 0;
margin: 0;
text-align: center; /* center the li */
}
nav .menu li {
display: inline-block;
}
nav .menu li a{
font-family: arial, sans-serif;
color: #fff;
text-decoration: none;
text-transform: uppercase;
line-height: 60px;
font-weight:bold;
vertical-align: middle;
padding: 20px;
transition: all 0.5s;
}
nav .menu li:hover > a {
background: #e2782e;
transition: all 0.5s;
color: #FFF;
font-weight: bold;
}
.drop{
display: none;
}
li:hover > .drop{
display: list-item;
background-color:red;
}
html
<nav>
<ul class="menu">
<li>home</li>
<li>contact</li>
<li>
<?php echo $lang['MENU_OUR_PRODUCTS']; ?>
<ul class="drop">
<li><?php echo $lang['MENU_History']; ?></li>
<li><?php echo $lang['MENU_CONTACT_US']; ?></li>
<li><?php echo $lang['MENU_History']; ?></li>
<li><?php echo $lang['MENU_CONTACT_US']; ?></li>
</ul>
</li>
</ul>
</ul>
</nav>
see here jsfiddle
you have some problems in your code
first in your HTML you have a closing tag </a> on the li.current but you don't have any <a> there. so that closing tag is not required
also you have and extra closing tag </ul> , you have only 2 ul to close , ul.menu and ul.drop so you need only 2 </ul> not 3.
second in your CSS , you have a space between li and :hover , you need to write them together like li:hover .
also display:black doesn't exist, i guess you wanted to write display:block
Updated code HTML :
<ul class="menu">
<li>home</li>
<li class="current">other</li>
<li>
services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
CSS :
nav .menu li:hover > a {
background: #e2782e;
transition: all 0.5s;
color: white;
font-weight:bold;
}
.drop{
display:none;
}
li:hover > .drop{
display:block;
}
let me know if it helps.
NOTE : there are so many questions about this on stackoverflow, you should be able to find your answer very quickly , also you might want to check this CSS Dropdowns
nav .menu li:hover > a {
background: #e2782e;
transition: all 0.5s;
color: #FFF;
font-weight: bold;
}
.drop{
display: none;
}
li:hover > .drop{
display: block;
}
<nav>
<ul class="menu">
<li>home</li>
<li class="current">other</li>
<li>services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
</nav>
I have been trying to make a menu that has 3 tiers, for example i want to hover over 'family' and be shown 'holidays' and 'day Trips'. Then I want to hover 'holidays' or 'day trips' and be shown the next options 'videos 1-3'. I have only been doing HTML5 and CSS3 for a few weeks so I am quite green. Any help would be great.
<ul id="menu2">
<li> Family
<ul class="sub-menu2">
<li>Holidays
<li> Video 1 </li>
<li> Video 2 </li>
<li> Video 3 </li>
</li>
<li>Day Trips
<li> Video 1 </li>
<li> Video 2 </li>
<li> Video 3 </li>
</li>
</ul>
</li>
</ul>
CSS
#menu2, ul#menu2 ul.sub-menu2 {
padding:0;
margin-top: -41px;
}
#menu2 li, ul#menu2 ul.sub-menu2 li {
list-style-type: none;
display: inline-block;
width:100px;
left:73%;
margin-bottom:4px;
}
#menu2 li a, ul#menu2 li ul.sub-menu2 li a {
text-decoration: none;
text-align:center;
color: yellow;
background: black;
padding: 5px;
display:inline-block;
width:100px;
border-bottom-right-radius:20px;
border-top-left-radius: 20px;
border: 2px solid yellow;
}
#menu2 li {
position: relative;
}
#menu2 li ul.sub-menu2 {
display:none;
position: absolute;
top: 30px;
right: 72px;
width: auto;
margin-top:6px;
margin-bottom:-2px;
}
#menu2 li:hover ul.sub-menu2 {
display:block;
}
#menu2 li ul.sub-menu2 a:hover {
background-color: yellow;
color: black;
}
Your structure is not correct. It should be like this:
<ul id="menu2">
<li>Family
<ul class="sub-menu2">
<li>Holidays
<ul>
<li>Video 1</li>
<li>Video 2</li>
<li>Video 3</li>
</ul>
</li>
<li>Day Trips
<ul>
<li> Video 1 </li>
<li> Video 2 </li>
<li> Video 3 </li>
</ul>
</li>
</ul>
</li>
</ul>
And you have to modify your CSS a little bit. I made a little dummy here:
generic DEMO Fiddle
The following coding gives an output of a list in a vertical manner. How do I adjust this to make it in horizantal list? For example like this: http://www.nol.com.sg/wps/portal/nol
<body>
<ul id="mainmenu">
<li><a class="menu" href="">Menu</a>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</li>
<li><a class="menu" href="">Company</a>
<ul>
<li>History</li>
<li>News</li>
</ul>
<li><a class="menu" href="">Contact Us</a></li>
</ul>
</body>
DEMO
HTML
<ul id="mainmenu">
<li><a class="menu" href="">Menu</a>
<ul>
<li>Home
</li>
<li>About
</li>
</ul>
</li>
<li><a class="menu" href="">Company</a>
<ul>
<li>History
</li>
<li>News
</li>
</ul>
<li><a class="menu" href="">Contact Us</a>
</li></li>
</ul>
CSS
#mainmenu li {
float:left;
list-style-type:none;
margin-right:1px;
width:80px;
text-align:center;
}
#mainmenu li li {
float:none;
padding:0;
}
#mainmenu li ul {
display:none;
padding:0;
}
#mainmenu li:hover ul {
display: block;
}
In css use the following code:
#mainmenu li{
display:inline;
}
http://css.maxdesign.com.au/listutorial/horizontal_master.htm
CSS
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
HTML
<div id="navcontainer">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
</div>
To affect this only on li that are childs of #mainmenu
#mainmenu > li {
float:left
}
DEMO
HTML
<ul id="mainmenu">
<li><a class="menu" href="">Menu</a>
<ul>
<li>Home
</li>
<li>About
</li>
</ul>
</li>
<li><a class="menu" href="">Company</a>
<ul>
<li>History
</li>
<li>News
</li>
</ul>
<li><a class="menu" href="">Contact Us</a>
</li></li>
</ul>
CSS
#mainmenu li {
float:left;
list-style-type:none;
margin-right:1px;
width:80px;
text-align:center;
}
#mainmenu li li {
float:none;
padding:0;
}
#mainmenu li ul {
padding:0;
}
#mainmenu li:hover ul {
display: block;
}
How can I make the submenus "PROGRAMMATION" and "RÉSEAUTIQUE" visible when the mouse is hovering over the link of the parent "MON PROGRAMME"?
This is the html code:
<div class="menu">
<ul>
<li>ACCUEIL</li>
<div class="sousMenu">
<li><a>MON PROGRAMME</a>
<ul>
<li>PROGRAMMATION</li>
<li>RÉSEAUTIQUE</li>
</ul>
</li>
</div>
<li>MON COLLÈGE</li>
<li>À PROPOS</li>
</ul>
</div>
And here is my CSS code:
.sousMenu:hover li a > li ul li
{
display: block;
}
.sousMenu li ul li
{
position: absolute;
top: 40px;
display: none;
list-style-type: none;
}
Change your HTML to this:
<div class="menu">
<ul>
<li>ACCUEIL</li>
<li class="sousMenu"><a>MON PROGRAMME</a>
<ul>
<li>PROGRAMMATION</li>
<li>RÉSEAUTIQUE</li>
</ul>
</li>
<li>MON COLLÈGE</li>
<li>À PROPOS</li>
</ul>
</div>
And your css to this:
.sousMenu:hover ul {
display: block;
}
.sousMenu ul {
top: 40px;
display: none;
list-style-type: none;
}
You can see it works here: http://jsfiddle.net/AuJeF/