Avatar billede jriff Nybegynder
14. juli 2006 - 12:25 Der er 5 kommentarer

UL og LI

Hej Alle!

Jeg er ved at lave en drop-down menu - det giiver lidt problemer. Det virker faktisk fint nok, men den undermenu (UlLejlighederDrop
Avatar billede jriff Nybegynder
14. juli 2006 - 12:26 #1
Oops - der mangler noget:

) jeg har lavet vises inline og ikke under hinanden som jeg ville forvente når display sættes til blok. Er der nogen der kan gennemskue det? Jeg ville også gerne høre om det er rigtigt lavet sådan generelt.

På forhånd tak.

- Jacob!
Avatar billede jriff Nybegynder
14. juli 2006 - 12:27 #2
Her er CSS'en:

body {
}

#DivTopMenu {
    width:100%;
}

div#DivTopMenu li {
    display:inline;
    margin-right:50px;
}

ul#UlTopMenu {
    display:inline;
}

div#DivTopMenu li {
    display:inline;
    width:100%;
    background-color:Yellow;
}

div#DivTopMenu li:Hover {
    display:inline;
    width:100%;
    background-color:Black;
}

ul#UlLejlighederDrop {
    display:none;
}

div#DivTopMenu ul#UlTopMenu li:hover ul#UlLejlighederDrop {
    display:block;
    margin-left:-50px;
    margin-top:19px;
    float:left;
    position:absolute;
}
Avatar billede jriff Nybegynder
14. juli 2006 - 12:28 #3
Her er HTML'en:

<!-- Top menu DIV's -->
    <div id='DivTopMenu'>
        <ul id='UlTopMenu'>
                <li><a href='#'>Forside</a></li>
                <li><a href='#'>Test1</a></li>
                <li><a href='#'>Test2</a>
                    <ul id='UlLejlighederDrop'>
                        <li><a href='#' class="TopMenu">Test3</a></li>
                        <li><a href='#' class="TopMenu">Test4</a></li>
                        <li><a href='#' class="TopMenu">Test5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Test6</a></li>
                <li><a href='#'>Test7</a></li>
                <li><a href='#'>Test8</a></li>
        </ul>
    </div>
Avatar billede jokkejensen Novice
14. juli 2006 - 14:11 #4
sådan noget her  ?::

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

#TopMenu {
    width:100%;
    position:relative;
    margin-left: -10px; 
}

#TopMenu *
{
margin:0px;
padding:0px;
}

#TopMenu li
{
float:left;
list-style-type:none;
margin: 0px 10px 0px 10px;
}
#SubMenu
{
display:none;
position:absolute;
top: 50px;
left: 30px;
border:1px solid red;
}

#SubMenu li
{
float:none;
}

#TopMenu li:hover #SubMenu
{
display:block;
}

</style>
</head>
<body>
        <ul id="TopMenu">
                <li><a href="#">Forside</a></li>
                <li><a href="#">Test1</a></li>
                <li><a href="#">Test2</a>
                    <ul id="SubMenu">
                        <li><a href="#" class="TopMenu">Test3</a></li>
                        <li><a href="#" class="TopMenu">Test4</a></li>
                        <li><a href="#" class="TopMenu">Test5</a></li>
                    </ul>
                </li>
                <li><a href="#">Test6</a></li>
                <li><a href="#">Test7</a></li>
                <li><a href="#">Test8</a></li>
        </ul>
</body>
</html>
Avatar billede jriff Nybegynder
14. juli 2006 - 16:28 #5
Undermenuen vises for langt nede og til venstre for menupunktet - den skal gerne vises lige neden under...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester



IT-JOB

Cognizant Technology Solutions Denmark ApS

Sr. Test Analyst