CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

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?

Synes godt om

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

Synes godt om

Vixo Novice

11. juni 2013 - 20:16 #3

Tilføj:

.submenu li {
display:block;
}

Virker det? :-)

Synes godt om

christian94 Nybegynder

11. juni 2013 - 20:26 #4

Nope desværre ikke :-(

Synes godt om

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>

Synes godt om

Vixo Novice

15. juni 2013 - 01:15 #6

Virkede det? :-)

Synes godt om

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 :-(

Synes godt om

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

Synes godt om

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;
}

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS