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/
Related
Can anyone tell me what's wrong with my code below? I'm trying to make the menu show the list when hover over each link, but it's not working for some reason. I have already tried .menu ul ul: hover {visibility: visible; } and it didn't work.
Check my code and thank you in advance.
.menu {
width: 100%;
height: 50px;
background-color: #222;
font-family: 'Arial';
}
.menu ul {
list-style: none;
position: relative;
}
.menu ul li {
width: 150px;
float: left;
}
.menu a {
padding: 15px;
display: block;
text-decoration: none;
text-align: center;
background-color: #222;
color: #fff;
}
.menu ul ul {
position: absolute;
visibility: hidden;
}
.menu ul li ul:hover {
visibility: visible;
}
.menu a:hover {
background-color: #f4f4f4;
color: #fff;
}
<nav class="menu">
<ul>
<li>test1</li>
<li>test2</li>
<ul>
<li>test3</li>
<li>test4</li>
</ul>
<li>test5</li>
<ul>
<li>test6</li>
<li>test7</li>
<li>test8</li>
</ul>
<li>test9</li>
</ul>
</nav>
I have slightly modified your code. Sub-nav UL are now nested within the required LI. When you hover over "test2" nav it will show the sub-nav.
The CSS line below was modified too. Instead of using :hover on the sub-nav UL the code will now target the LI with the sub-nav and display the required one.
.menu ul li ul:hover {
to
.menu ul li:hover > ul {
*{
margin:0;
padding:0;
}
.menu{
width:100%;
height:50px;
background-color:#222;
font-family:'Arial';
}
.menu ul{
list-style:none;
position:relative;
}
.menu ul li{
width:150px;
float:left;
}
.menu a{
padding:15px;
display:block;
text-decoration:none;
text-align:center;
background-color:#222;
color:#fff;
}
.menu ul ul{
position:absolute;
visibility:hidden;
}
/*CSS modified here: when you hover over LI with sub-nav, it will display the UL in it.*/
.menu ul li:hover > ul{
visibility:visible;
border:1px solid #ff0000;
}
.menu a:hover{
background-color:#f4f4f4;
color:#fff;
}
<body>
<nav class="menu">
<ul>
<li>test1</li>
<li>test2
<!-- nested UL in LI -->
<ul>
<li>test3</li>
<li>test4</li>
</ul>
</li>
<li>test5
<!-- nested UL in LI -->
<ul>
<li>test6</li>
<li>test7</li>
<li>test8</li>
</ul>
</li>
<li>test9</li>
</ul>
</nav>
</body>
</html>
I'm currently designing a Nav menu that includes ul, li and a elements. I'm trying to produce an effect where hovering over an a tag will only change the background color near the text for the link itself instead of the whole li area around it.
HTML:
<nav>
<div class="full_menu">
<ul>
<li>Login</li>
<li>About</li>
<li>FAQ</li>
<li>Blog</li>
<li>Our Team
<ul>
<li>Bob</li>
<li>James</li>
<li>Tom</li>
</ul>
</li><!--End team dropdown -->
</ul>
</div>
CSS:
nav {
margin:0 auto;
text-align:center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display:block;
}
nav ul {
background: #17A74A;
padding:0px;
list-style:none;
position:relative;
display: inline;
border:0px;
}
nav ul li {
float:right;
margin-top:0px;
}
nav ul li a {
display:block;
padding:33px 40px;
color:#000;
text-decoration:none;
font-weight:bold;
font-size:18px;
}
nav ul li a:hover {
background-color:#2D6AF7;
color:#FFF;
}
nav ul ul {
background:#17A74A;
position:absolute;
top:71px;
}
nav ul ul li {
float:none;
border-bottom:1px solid #FFFFFF;
}
nav ul ul li a {
padding:15px 40px;
color:#FFF;
}
nav ul ul li a:hover {
background:#27BCDD;
}
nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
I thought that by using nav ul li a:hover would fix this problem but the whole li area is still changing its background color instead of just the immediate area around the link text.
Any help would be greatly appreciated!
Do you want to achieve following result? I've removed the padding from your <a> elements and added them to the <li> elements instead.
JSFiddle
You need to change the padding to a margin if you don't want the whole thing to change color. Try this:
nav ul ul li a {
margin:15px 40px;
color:#FFF;
}
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
(source: torrent-invites.com)
I want to make pure CSS multi level menu like the picture above. I have tried some tutorial but its not working for me. Menu "xxxxx" and "yyyyy" appear below menu "bbbbb" for my CSS code below.
What I want to make is 3 level menu like the picture above.
This is my HTML for the menu:
<span id="nav">
<ul>
<li>ssss
<ul>
<li>aaaaa</li>
<li>bbbbb
<ul>
<li>xxxxx</li>
<li>yyyyy</li>
</ul>
</li>
</ul>
</li>
<li>ttttt</li>
<li>uuuuu</li>
</ul>
</span>
And this is my minimized CSS code:
li {
list-style:none !important;
}
#nav, #nav ul {
list-style: none;
padding:0;
margin:0;
}
#nav li {
line-height:20px;
float:left;
}
#nav li ul{
display:none;
}
#nav ul li ul {
margin-top:-3em;
margin-left:7em;
}
#nav ul li:hover ul {
z-index:99999;
display:list-item !important;
position:absolute;
margin-top:2px;
margin-left:0px;
padding: 5px 15px;
background: #8ac312;
}
#nav ul li:hover ul li {
float:none;
padding: 2px 0px;
}
#nav ul li:hover ul li > a:before {
content: '» ';
}
Any help would be very appreciated to make my CSS code working like the illustration picture above. Thanks.
I think your problem is position relative and absolute. I remove your style and do on my own (simpler, uglier). Code is here jsFiddle
And the code is:
CSS:
ul { padding:0; margin:0; }
li { list-style:none; }
li > ul { display: none; }
li:hover > ul { display: block; }
.lvl1 li { margin-right: 10px; display: inline; position:relative; }
.lvl2 { position: absolute; }
.lvl2 li { position: relative; }
.lvl3 { position: absolute; top:0px; left: 50px; }
HTML:
<span id="nav">
<ul class='lvl1'>
<li>ssss
<ul class='lvl2'>
<li>aaaaa</li>
<li>bbbbb
<ul class='lvl3'>
<li>xxxxx</li>
<li>yyyyy</li>
</ul>
</li>
</ul>
</li>
<li>ttttt</li>
<li>uuuuu</li>
</ul>
</span>
I've edited your code a bit ... check this fiddle http://jsfiddle.net/kau5h/
li {
list-style:none !important;
position:relative;
}
#nav, #nav ul {
list-style: none;
padding:0;
margin:0;
}
#nav li {
line-height:20px;
float:left;
}
#nav li a {display:block;}
#nav li ul{
display:none;
z-index:99999;
/*display:list-item !important;*/
position:absolute;
/*margin-top:2px;*/
margin-left:0px;
background: #8ac312;
}
#nav li ul ul {left: 100%; top:0;}
#nav ul li ul {
/*margin-top:-3em;
margin-left:7em;*/
}
#nav ul li:hover > ul {
display: block;
}
#nav ul li:hover ul li {
float:none;
/*padding: 2px 0px;*/
}
#nav ul ul li {
padding: 5px 15px;
display: block;
}
#nav ul ul li > a:before {
/*content: '» '; */
}
http://i.stack.imgur.com/OP0kc.jpg
the navigation menu i have created using the CSS and Html code is not working correctly.
The alignment of the navigation menu is not perfect i want in this way : http://i.stack.imgur.com/h4oPK.jpg
I want to convert this to CSS..
Please help
<style>
/* Targeting both first and second level menus */
#nav li {
list-style:none;
float: left;
position: relative;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
Fixed. I think this is what you want http://dabblet.com/gist/2792978
Simply remove position: relative from #nav li and give it to #nav.