PDA

Volledige versie bekijken : Dropdown menu


Nathaniel
%Europe/Berlin %754 %2008, 19:07
Hallo,
Ik heb een dropdown menu. Wanneer je met je muis op mijn menu staat opent zich een submenu.

Voorbeeld
http://fixii.com/show/fixii1.png

Maar nadat ik het base lukt het me niet om de onderste gedeelte van het menu erbij te doen.
Kijk maar:

http://fixii.com/show/fixii2.png


Weet iemand misschien hoe ik dat stukje kan toevoegen via CSS of HTML?


Bedankt!

Midas
%Europe/Berlin %794 %2008, 20:04
Begrijp je probleem niet helemaal. :S
Heb je een linkje?

Nathaniel
%Europe/Berlin %824 %2008, 20:47
Nee.
Ik moet het onderste stuk van de base toevoegen aan mijn nu. Hoe moet ik het doen?

WernerL
%Europe/Berlin %891 %2008, 22:24
Gewoon nog een li toevoegen met een eigen classnaam ?
<li class="bottommenu"> ... </li>
En dan defineer je in je css een achtergrondpic met ronde hoeken aan de onderkant ofzo.. :-)

Wellicht beetje vieze optie.. maar het kan. :D Zou zo even geen betere optie kunnen bedenken.

Nathaniel
%Europe/Berlin %723 %2008, 18:21
Het lukt me nog steeds niet.

Kijk, zo ziet het nu uit:
http://fixii.com/members/

Dit is mijn HTML code (van het menu):
<div id="menu">

<img class="adv_klein" src="images/adv_klein.gif" alt="advertentie" />

<ul>
<li class="selected"><a href="#">Homepagina</a>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test2</a></li>
</ul>
</li>
<li><a href="#">Inloggen</a></li>
<li><a href="#">Aanmelden</a>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test2</a></li>
<a href="#">Test2</a>
</ul>
</li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>

</div>

En CSS
/*######################################## MENU ############################################*/

#menu ul {
float:right;
padding: 23px 0 0 0;
margin:0;
}

#menu ul li
{
float: left;
list-style-type: none;
}

#menu ul li a
{
background: none;
color: #9a9899;
display: block;
font-weight: bold;
line-height: 23px;
padding: 0 5px;
text-decoration: none;
font-size:14px;
}

#menu ul li.selected
{
display:block;
background:url('images/menu_bg.gif') left no-repeat;
height:23px;
}

#menu ul li.selected a {
background:url('images/menu_right.gif') right no-repeat;
color:#fff;
}

#menu ul li:hover {
background:url('images/menu_bg.gif') left no-repeat;
color:#fff;
}

#menu ul li:hover a {
background:url('images/menu_right.gif') right no-repeat;
color:#fff;
}

#menu ul li ul
{
position: absolute;
left: -999em;
width: 125px;
background: #ff016d url('images/sub_bg.gif') repeat-x;
padding:0;
}

#menu ul li:hover ul
{
left: auto;
}

#menu ul li ul li
{
padding:0;
width: 125px;
}

#menu ul li ul li a
{
padding: 0 5px;
width: 115px;
}

#menu ul li:hover ul li, #menu ul li:hover ul li a {
background: none;
}

#menu ul li ul li a:hover {
background: #ff016d;
}
/*##################################### EINDE MENU #########################################*/

Lorrens
%Europe/Berlin %678 %2008, 17:17
#menu ul li ul
{
position: absolute;
left: -999em;
width: 125px;
background: #ff016d url('images/sub_bg.gif') no-repeat bottom left;
padding:0 0 10px 0;
}
}

Menu plaatje wat groter uitknippen en background vanaf onder positioneren.