CODEWITHSUNDEEP
htmlcssdrop-down-menu
J.Graaf
J.Graaf

Reputation: 21

Creating dropdown submenu

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"><a href="index.html">Home</a></li>
       <li><a href="massages.html">Massages</a></li>
			<ul>
				<li><a href="aanbiedingen.html">Aanbiedingen</a></li>
			</ul>	
	    <li><a href="aanbiedingen.html">Aanbiedingen</a></li>
	   <li><a href="prijzen.html">Prijzen</a></li>
       <li><a href="agenda.html">Agenda</a></li>

       <li><a href="contact.html">Contact</a></li>

</ul>
</div>

Can anyone explane me how to create a dorpdown submenu on "Massages"

Thnx

Upvotes: 2

Views: 268

Answers (3)

Christian Andres
Christian Andres

Reputation: 31

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"><a href="index.html">Home</a></li>
<li class="dropMenu"><a href="massages.html">Massages</a></li>
<ul>
<li><a href="aanbiedingen.html">Aanbiedingen</a></li>
</ul>
<li><a href="aanbiedingen.html">Aanbiedingen</a></li>
<li><a href="prijzen.html">Prijzen</a></li>
<li><a href="agenda.html">Agenda</a></li>
<li><a href="contact.html">Contact</a></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/

Upvotes: 0

Raimonds
Raimonds

Reputation: 537

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.

Upvotes: 0

Steevan
Steevan

Reputation: 826

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 */

Upvotes: 1

Related Questions