I have an existing HTML menu which I need to add further navigation to. I have added in the extra <ul> and <li> tags which I believe are in the correct place. The problem that I am having is getting the further options to drop down below the "Types of Claims" Option.
Here is the HTML code:
<div id="nav">
<ul>
<li>HOME</li>
<li>INJURY CLAIM CALCULATOR</li>
<li>WHO WE ARE</li>
<li>WHAT WE DO</li>
<li>TYPES OF CLAIMS
<ul>
<li>CLAIM 1</li>
<li>CLAIM 2</li>
<li>CLAIM 3</li>
</ul>
</li>
<li>CONTACT US</li>
</ul>
</div>
and here is the CSS code:
#nav ul li {
display: inline;
width: 100px;
}
#nav ul li a:link {
color: #F1F1F1;
float: left;
padding-right: 45px;
text-decoration: none;
}
#nav ul li a:visited {
color: #F1F1F1;
float: left;
padding-right: 45px;
text-decoration: none;
}
#nav ul li a:hover {
color: #FFF;
float: left;
padding-right: 45px;
text-decoration: underline;
}
#nav ul {
margin: 0px;
padding: 0px;
}
Any help will be greatly appreciated!
You need something like this:
#nav ul li ul {opacity:0;}
#nav ul li:hover ul {opacity;1;}
-or-
#nav ul li {display:relative;}
#nav ul li ul {display:absolute; top:-2000px;}
#nav ul li:hover ul {top:0;}
-or-
#nav ul li ul {width:150px; position:absolute; visibility:hidden; top:-2000px;}
#nav ul li:hover ul {visibility:visible;}
Basically, you need to tell the nested ul (unordered list) that it has 1 style for the parent li which makes it invisible, and another style for the parent li:hover which makes it visible somehow. There are multiple ways of achieving this.
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
You can use the
#nav ul li ul {visibility:hidden;} and
#nav ul li: hover ul {visibility:visible;}
Related
Hi There can anyone help me i try to create a dropdown submenu but it doesn't work for me.
I dont know how to reate a nice menu.
example:
When i hover over "massages" then the menu must come down and show the submenu.
css here
.menu{
width:821px;
height:42px;
margin:0px;
background:url(images/menu.gif) no-repeat left;
}
.menu ul{
list-style:none;
padding:0 0 0 15px;
margin:0px;
}
.menu ul li{
display:inline;
}
.menu ul li ul{
display:inline;
}
.menu ul li a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
color:#fff;
line-height:42px;
font-size:14px;
}
.menu ul li.aktivni-active a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
line-height:42px;
font-size:14px;
Html:
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li>Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
Can anyone explane me how to create a dorpdown submenu on "Massages"
Thnx
Check with the below link.
Fiddle
/* Menu Dropdown */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
}
ul#menu li ul.sub-menu a {
width:150px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
/* Top Nav Background Hover */
ul#menu li a:hover {
background:#000;
}
ul#menu li ul li a:hover {
background:#999;
}
/* 3rd level nav */
ul#menu li ul.sub-menu li ul {
display:none;
position: absolute;
top: 0px;
left: 115px;
width: 100px;
}
/* show the 3rd level when the second is hover */
ul#menu li ul.sub-menu li:hover ul {
display:block;
}
/* Menu Dropdown */
You should change your markup, as far as I know submenu should be part of list item it refers to
<ul>
<li class="simple-item">item</li>
<li class="submenu">item
<ul class="submenu-goes-inside-li">
<li class="simple-item">item</li>
<li class="simple-item">item</li>
<li class="simple-item">item</li>
</ul>
</li>
</ul
In your case submenu is separated from list items.
Using the same structure you have just add class to the drop menu,
set ul inside the dropMenu to display none, then to display on however. You can use css3 or jquery to make it have a nice animation or toggle.
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li class="dropMenu">Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
CSS
.menu ul{
display:none
}
.menu:hover ul{
display:block;
}
if you want some better just use jquery http://api.jquery.com/toggle/
I´m trying to make a submenu on hover for hours, read about ten tutorials or more and finally don't get it working.
I want it to show "Zimmer", "Reservierung" and "Preise" in a vertical menu if I hover "Hotel" and so on.
This is my code:
a {
text-decoration: none;}
nav {
height: 50px;
clear: both;}
nav ul {
padding: 5px 0px;
text-align: center;}
nav li {
margin: 0px;
display: inline;
padding: 0px;}
nav li a {
font-size: 18px;
color: #775923;
padding: 0px 20px;
margin: 0px;}
nav li a:hover, nav li a.current {
color: #775923;
padding: 0px 20px 14px 20px;
-webkit-padding-after: 15px;
box-shadow: 0 4px #b1d130;}
nav ul ul{
display: none;}
nav ul li:hover ul {
display: block;}
<nav>
<ul>
<li>Willkommen</li>
<li>Hotel</li>
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
<li>Restaurant</li>
<ul>
<li>Speisekarte</li>
<li>Anlässe</li>
</ul>
<li>Anfahrt</li>
<li>Kontakt</li>
<ul>
<li>Team</li>
<li>Über Uns</li>
</ul>
</ul>
</nav>
Link: http://jsfiddle.net/AuJeF/445/
Hope you can help.
Thank you
You have the problem on your markup,
change as following-
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
(this is a simple dropdown menu)
<nav>
<ul>
<li>Willkommen</li>
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
<li>Restaurant<ul>
<li>Speisekarte</li>
<li>Anlässe</li>
</ul>
</li>
</ul>
</nav>
css
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li.current-menu-item
{
background:#ddd
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul ul li
{
float:none;
width:200px
}
nav ul ul a
{
line-height:120%;
padding:10px 15px
}
nav ul ul ul
{
top:0;
left:100%
}
nav ul li:hover > ul
{
display:block
}
jsfiddle
the mistake in you html. ul > ul mast be insite li. But not outsideю
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
You're writing style - if ul inside li then ul display block. But inside li no ul it after him.
Will validator error, because tag ul inside >ul that's not true, there can be only >li
Think, I help U
I can't get the sub-menu to show when I hover a list item. What did I do wrong ?
It hides properly using display:none, but doesnt show up when I hover.
nav ul ul {display: none;}
nav ul li:hover > ul{display: block;}
Complete code:
<nav>
<ul>
<li>link</li>
<li>link2</li>
<ul>
<li>SubMenu</li>
</ul>
</ul>
</nav>
CSS:
/* start NAVBAR */
nav ul,li{
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
list-style: none;
}
nav ul ul {display: none;}
nav ul li:hover > ul{display: block;}
nav ul {position: relative;}
nav ul li {
position: relative;
flex: 1;
background-color: green;
}
nav ul li a{
color: black;
#background-color: pink;
text-decoration: none;
padding: 5px 10px 5px 10px;
}
nav ul li:hover{
background-color: orange;
}
nav ul li ul {position: absolute; top:30px; left:0px;}
/* end NAVBAR */
The problem is that you've closed your li element before you put the submenu in it. Move your closing </li> tag to after the ul submenu:
<li>link2
<ul>
<li>SubMenu</li>
</ul>
</li>
Why? Because your CSS selection of nav ul li:hover > ul{display: block;} is expecting the ul element (that you want to show on hover) to be a direct child of the li element. In reality, your ul is not a child at all.
New to CSS. I have a nav menu bar and I am trying to fill the background color (blue) in the drop down menu under "portfolio" when you hover over it. Any ideas? I think its because of that absolute?
CSS:
#nav, #nav ul {
float: left;
list-style: none;
box-shadow: 0px 1px 7px #000000;
background-color: #F5F1DE;
border-radius: 5px 5px 0px 0px;
z-index: 100;
}
#nav li a {
display: block;
padding: 16px;
text-decoration: none;
font-weight: bold;
color: black;
border-left: 1px solid #ccc;
font-size: 1em;
}
#nav li a:hover {
color: black;
background-color: #bbecff;
}
#nav li {
float: left;
}
#nav li ul {
position: absolute;
width: 11em;
left: -999em;
border-radius: 1px;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
HTML:
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Packages</li>
<li>Portfolio
<ul>
<li>Weddings</li>
<li>Special Events</li>
<li>Holidays</li>
<li>Fresh Flowers</li>
<li>Balloon Sculptures</li>
</ul>
</li>
<li>Contact</li>
</ul>
Add float:left only for first child of ul.Update your following line of css:
#nav li {float: left;}
to
#nav > li {float: left;}
Here is the fiddle
Try this, hope it will work for u
add the CSS
#nav li ul{
background:#0066CC;
}
give background color to the following
#nav li:hover ul, #nav li.sfhover ul
#nav li:hover ul, #nav li.sfhover ul {
background-color: #bbecff;
}
But with that said: Why don't you apply the background-color to the submenu ul directly?
U may also try this, I hav given an id to respective li
<li id=blueColor>
<li>Weddings</li>
<li>Special Events</li>
<li>Holidays</li>
<li>Fresh Flowers</li>
<li>Balloon Sculptures</li>
</ul>
In CSS
#blueColor:hover{
backgroung-color:blue
}
I'm trying to add sub menu under main menu items but failed to do so. I've added display:none to hide sub menu, display:block to show when mouse is over main menu etc to some of the tags in CSS but none of them worked. Perhaps I added to wrong places.
I've cleared all my faulty codes not to deal with messy code instead giving you clear one to modify it.
Sub menu shouldn't be visible unless mouse is over its parent menu. Also sub menu should appear right under its parent menu.
Thanks in advance
CSS
<style>
.menu{
width: 100%;
background-color: #666666; }
.menu ul{
margin: 0; padding: 0;
float: left;}
.menu ul li{
display: inline;
position: relative;}
.menu ul li a{
float: left; text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #333; }
.menu ul li a:hover, .menu ul li .current{
color: #fff;
background-color:#0b75b2;}
</style>
HTML
<div class="menu">
<ul>
<li>HOME
<ul>
<li>Home</li>
<li>Home short</li>
<li>Home very long</li>
</ul>
</li>
<li>ADMINISTRATOR
<ul>
<li>Admin</li>
<li>Admin short</li>
</ul>
</li>
<li>STAFF
<ul>
<li>staff</li>
</ul>
</li>
<li>LOGOUT</li>
</ul>
<br style="clear:left"/>
</div>
Change to .menu ul li ul{
position: absolute;}
If I understand your problem correctly, works fine now.
so..
.menu ul li ul{
position:absolute;
margin-top:40px;
width:150px;}
.menu ul li ul li{
display:block;}
To hide until hover, .menu ul li ul{ display:none; } .menu ul li:hover ul{display:block; }