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>
Related
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;
}
I want to make my navigation bar with dropdown, but there is always distance on left side of the div dropdown. How do I remove that distance?
Here is the code of the navigation bar:
.navbar {
background-color: #6b6b6b;
margin:10px;
}
.navbar ul {
display: inline;
color: white;
font-family: "Agency FB";
font-weight: bold;
text-transform: uppercase;
list-style-type: none;
font-size: 24px;
}
.navbar ul li {
display: inline-block;
padding-right: 10px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar ul li:hover {
background-color: #cccccc;
}
.navbar ul li ul {
display: none;
position: absolute;
margin-left:-10px;
margin-top:5px;
background-color:white;
color:#6b6b6b;
padding-left:-20px;
font-size:20px;
}
.navbar ul li ul li {
display: block;
}
.navbar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
And here is the code of html navigation bar (without link):
<div class="navbar">
<ul>
<li>
Home
</li>
<li>
Category
<ul>
<li>Batik</li>
<li>Party</li>
<li>Office</li>
<li>Casual</li>
<li>Sport</li>
</ul>
</li>
<li>
Information
<ul>
<li>
About Us
</li>
<li>
Cara Belanja
</li>
<li>
Our Location
</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
Thanks before :)
I remade it for you kinda, I'm sure you'll get the jist of it
<div id="nav">
<ul>
<li>Home</li>
<li>Category
<ul>
<li>Blah</li>
<li>Blah</li>
<li>Blah</li>
</ul>
</li>
<li>Information
<ul>
<li>Blah</li>
<li>Blah</li>
<li>Blah</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
http://jsfiddle.net/un64F/3/ for css
I'm not sure I understand what you are asking for exactly but does adding padding-left: 0; to the .navbar ul style have the effect you want?
I have to code the button below when its clicked it will display a dropdown menu.
How would I approach this as I have never come across this before.
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
color: #666;
}
body {
background-color: #fff;
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
a, a:hover, a:active, a:focus {
outline:0;
direction:ltr;
}
.wrapper {
position:relative; height:25px;
}
.mainmenu {
position:absolute;
z-index:100;
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-303px;
width:606px;
}
ul.menu {
padding:0;
margin:0;
list-style:none;
width:100px;
overflow:hidden;
float:left;
margin-right:1px;
}
ul.menu a {
text-decoration:none;
color:#fff;
padding-left:5px;
}
ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background:url(images/top1.png) no-repeat left bottom;
}
ul.menu li.list a.category {
position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
}
ul.submenu {
float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}
ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
}
ul.submenu li a.endlist {
background:url(images/bottom1.png);
}
ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url(images/bottomhover1.png);
}
ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#900;
margin-right:1px;
}
-->
</style>
<div class="wrapper">
<div class="mainmenu">
<ul class="menu">
<li class="list">
<a class="category" href="#Home">Home</a>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#about">About Us »</a>
<ul class="submenu">
<li>About link 1</li>
<li>About link 2</li>
<li>About link 3</li>
<li>About link 4</li>
<li><a class="endlist" href="#about5">About link 5</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#articles">Articles »</a>
<ul class="submenu">
<li>Articles link 1</li>
<li>Articles link 2</li>
<li>Articles link 3</li>
<li><a class="endlist" href="#articles4">Articles link 4</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#news">News »</a>
<ul class="submenu">
<li>News link 1</li>
<li>News link 2</li>
<li><a class="endlist" href="#news3">News link 3</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#donate">Donate</a>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#contact">Contact</a>
</li>
</ul>
<!-- end mainmenu --></div>
<!-- end wrapper --></div>
or try this link
http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129
or
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
I agree with Jerome C.
The only seggestion I can give you, is that usually there are many sites whose title is "the best NNN dropdownmenus" or substitute dropdownmenus with whatever.
Thery are usually helpful.
In such case:
http://www.hongkiat.com/blog/drop-down-menu-30-free-scripts-to-enhance-header-navigation/