Avatar billede NielsErikP Mester
28. december 2010 - 18:08 Der er 3 kommentarer og
1 løsning

HTML/CSS ....Hjælp Igen..

Hej...
Jeg kunne ikke få bredden til at reagere på en dropdown menu jeg havde lavet...Så prøvede at genskabe den fra start..
Mit problem består i at jeg ikke ved, hvorledes den menu der falder ned får en bredde, så den går hen under menu punkterne "Forsiden" og "interesser" altså fåes til at have en bredde på to menu punkter...
Her er HTML'en/CSS'en...:

-----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
 
 
<html>
<head>
    <title>Mit udkast til en hjemmeside</title>
        <meta http-equiv="content-type"
              content="text/html;charset=utf-8" />
             
<style "text/css">
* {
    list-style-type: none;
    text-decoration : none;
}
ul, li, a {
    margin:0px;
    padding:0px;
}
ul#menu {
    margin-left : 350px;
}

ul#menu li {
    background-color: #c4c5c7;
    text-align: center;
    position: relative;
    float: left;
    display: block;
    width: 120px;
    height: auto;
    line-height: 30px;
    border: 1px dotted #008000;
}
ul#menu li:hover {
    background-color: #ff00ff;
}
ul#menu li ul {
    display:none;
}
ul#menu li:hover ul {
    width:240px;
    display: block;
}

</style>
</head>

<body>
<div>
    <ul id="menu">
        <li><a href="#">Forside </a>
            <ul>
                <li><a href="#">Emne 1 </a></li>
                <li><a href="#">Emne 2 </a></li>
                <li><a href="#">Emne 3 </a></li>
                <li><a href="#">Emne 4 </a></li>
            </ul>
        </li>
        <li><a href="#">interesser </a>
            <ul>
                <li><a href="#">Emne 1 </a></li>
                <li><a href="#">Emne 2 </a></li>
                <li><a href="#">Emne 3 </a></li>
                <li><a href="#">Emne 4 </a></li>
            </ul>
        </li>
        <li><a href="#">Galleri </a>
            <ul>
                <li><a href="#">Emne 1 </a></li>
                <li><a href="#">Emne 2 </a></li>
                <li><a href="#">Emne 3 </a></li>
                <li><a href="#">Emne 4 </a></li>
            </ul>
        </li>
        <li><a href="#">Links </a>
            <ul>
                <li><a href="#">Emne 1 </a></li>
                <li><a href="#">Emne 2 </a></li>
                <li><a href="#">Emne 3 </a></li>
                <li><a href="#">Emne 4 </a></li>
            </ul>
        </li>
        <li><a href="#">Kontakt Siden </a>
            <ul>
                <li><a href="#">Emne 1 </a></li>
                <li><a href="#">Emne 2 </a></li>
                <li><a href="#">Emne 3 </a></li>
                <li><a href="#">Emne 4 </a></li>
            </ul>
        </li>
        <li><a href="#">Om </a>
            <ul>
                <li><a href="#">Emne 1 </a></li>
                <li><a href="#">Emne 2 </a></li>
                <li><a href="#">Emne 3 </a></li>
                <li><a href="#">Emne 4 </a></li>
            </ul>
        </li>
    </ul>


</div>

</body>
</html>
-----------------------------------------------------------------

Som der kan ses har jeg i "ul#menu li:hover ul" prøvet at sætte Width til 240px... men den reagerer ikke på det.
Håber der er nogen der kan se, hvad jeg har overset.

På forhånd tak..!!
Avatar billede DonTorro Nybegynder
28. december 2010 - 19:47 #1
prøv at tilføje den her:
ul#undermenu li {
    width: 240px;
}

og ændre nummer to <ul> til <ul id="undermenu">

:)
Avatar billede NielsErikP Mester
29. december 2010 - 00:04 #2
Hej ..
Ja det hjalp..Men.
ØØØh.. Min hjerne kan kun se at referencen er den samme i..:
ul#menu li {width: 240px} og
ul#menu li:hover li {  width: 240px}.
nå pyt..lig et svar og pointene er dine.
Og mange tak for hjælpen DonTorro..!!
Avatar billede DonTorro Nybegynder
29. december 2010 - 09:28 #3
Sig til hvis det ikke virker som det skulle :p

Her er svar
Avatar billede NielsErikP Mester
29. december 2010 - 15:04 #4
Virker fint sagde jeg jo..Der er bare noget jeg ikke forstår i det.
Men her er point;)
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
Kurser inden for grundlæggende programmering

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