Avatar billede christian94 Nybegynder
11. juni 2013 - 17:37 Der er 9 kommentarer

Dropdown menu

Hey eksperten.dk

Jeg er rimelig newbie til det der CSS, og er kommet ud for et lille problem :/

Jeg kan ikke få mine link's i min dropdown menu, til at stå under hinanden. Håber i kan hjælpe :-D

HTML Kode:
https://www.dropbox.com/s/wcepuq3nvlyc55k/index.html

CSS Kode:
https://www.dropbox.com/s/4c3mp5e6h6erp78/style.css

Mvh. Christian
Avatar billede Vixo Novice
11. juni 2013 - 19:41 #1
Altså i din css kode har du skrevet:

ul li {
  width:138px;
  display:inline-block; 
}

Display:inline-block; gør bl.a. at det står på linje.
så hvis du skriver:

ul li {
  width:138px;
  display:block;
}

Virker det så, som du vil have det?
Avatar billede christian94 Nybegynder
11. juni 2013 - 20:01 #2
Vil gerne have den øverste del af menuen til at være vandret og den del der skal dropdown til at være lodret.

sådan det ud med
ul li {
  width:138px;
  display:inline-block; 
}
https://www.dropbox.com/s/5ns8kxxzmh4scoz/Unavngivet.png


sådan ser det ud med
ul li {
  width:138px;
  display:block;
}
https://www.dropbox.com/s/y8gfoh2gdaaegpg/Unavngivet2.png
Avatar billede Vixo Novice
11. juni 2013 - 20:16 #3
Tilføj:

.submenu li {
  display:block;
}

Virker det? :-)
Avatar billede christian94 Nybegynder
11. juni 2013 - 20:26 #4
Nope desværre ikke :-(
Avatar billede Vixo Novice
11. juni 2013 - 20:35 #5
nårh nej sorry, glemte at sige at du skal tildele class="submenu".
Her er html kode. Har bare tildelt en class til submenuen (altså dem der skal stå lodret:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="container">
            <div id="head">
            </div>
                <ul id="menu">
                    <li><a href="test.htm">test</a></li>
                    <li><a href="test.htm">test</a>
                        <ul class="submenu">
                        <li><a href="test.htm">test</a></li>
                        <li><a href="test.htm">test</a></li>
                        <li><a href="test.htm">test</a></li>
                        <li><a href="test.htm">test</a></li>
                        </ul>
                    </li>
                    <li><a href="test.htm">test</a>
                        <ul class="submenu">
                            <li><a href="test.htm">test</a></li>
                            <li><a href="test.htm">test</a></li>
                            <li><a href="test.htm">test</a></li>
                        </ul>
                    </li>
                    <li><a href="test.htm">test</a></li>
                    <li><a href="test.htm">test</a></li>
                    <li><a href="test.htm">test</a>
                        <ul class="submenu">
                            <li><a href="test.htm">test</a></li>
                            <li><a href="test.htm">test</a></li>
                        </ul>
                    </li>
                </ul>
            <div>
            <div>
        </div>
    </body>
</html>
Avatar billede Vixo Novice
15. juni 2013 - 01:15 #6
Virkede det? :-)
Avatar billede christian94 Nybegynder
16. juni 2013 - 19:49 #7
beklager for den langsomme responstid :/
nej det virkede desværre ikke har også selv forsøgt et par ting, men uden held :-(
Avatar billede NielsErikP Mester
17. juni 2013 - 20:34 #8
Hej...

Ved ikke om du kan finde dig lidt hjælp i disse to guides :

1)Html delen
2)CSS delen
Avatar billede MadsHaupt Juniormester
22. juli 2013 - 16:57 #9
Du har glemt at sætte nået ind i style sheet'et.

Rettelse af kode(Det der er med fed er det du har glemt at sætte ind):
            html {
margin:0px;
padding:0px;
}
 
body  {
margin:0;
}
 
#container {
width:800px;
text-align:center;
margin:0 auto;
}
 
#head {
background-image:url('test.jpg');
width:850px;
height:128px;
border:1px solid black;
border-top-right-radius:15px;
border-top-left-radius:15px;
}
 
#menu{
text-align:center;
border-left:1px solid black;
border-right:1px solid black; 
width:850px;
height:45px;
}
 
ul {
font-size:15px;
margin:0;
padding:0;
list-style: none;
}
 
ul li {
width:138px;
display:inline-block;
}
 
li ul {
display:none;
}

ul li a { 
border-radius: 10px;
border: 0px solid black;
display:block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid;
padding: 5px 15px 5px 15px;
background-image: linear-gradient(bottom, #22292C 42%, #3E4647 71%);
   
    background-image: -o-linear-gradient(bottom, #22292C 42%, #3E4647 71%);
    background-image: -moz-linear-gradient(bottom, #22292C 42%, #3E4647 71%);
    background-image: -webkit-linear-gradient(bottom, #22292C 42%, #3E4647 71%);
    background-image: -ms-linear-gradient(bottom, #22292C 42%, #3E4647 71%);
     
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.42, #22292C),
    color-stop(0.71, #3E4647)
);
margin-left: 1px;
white-space: nowrap;
}
 
ul li a:hover {
background-color:black;
color:white;
}
 
li:hover ul {
display:block;
position:absolute;
}
 
li:hover li {
float:none;
font-size:14px;
color:white;
}

li:hover ul li {
    display: block;
}
 

li:hover a {
color:white;
}
     
li:hover li a:hover {
    background-image: linear-gradient(bottom, #666666 42%, #91948F 71%);
background-image: -o-linear-gradient(bottom, #666666 42%, #91948F 71%);
background-image: -moz-linear-gradient(bottom, #666666 42%, #91948F 71%);
background-image: -webkit-linear-gradient(bottom, #666666 42%, #91948F 71%);
background-image: -ms-linear-gradient(bottom, #666666 42%, #91948F 71%);
 
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.42, #666666),
    color-stop(0.71, #91948F)
);
color:white;
    -webkit-transition: all 0.9s ease-out;
    -moz-transition: all 0.9s ease-out;
    -o-transition: all 0.9s ease-out;
    -ms-transition: all 0.9s ease-out;
    }
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

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