html - Hvorfor virker den her dropdownmenu ikke? :S - Udvikleren.dk

Tags: html css

<< < 1 2 > >>

Bruger #16695 @ 03.07.11 19:32

Hej hej
Kan simpelthen ikke få den her dropdown til og virke.. Den ter sig helt tosset
Den skal se sådan her ud:
*Om mig
*Billeder
-- *Oliebilleder
--*Acrylbilleder
-- *Landskabsbilleder
*udstillinger
*skulpturer
*Kontakt

Rimelig simpelt.. Men hvorfor fanden ser den sådan her ud:
Billede

Kode:

HTML kode

 <ul id="menu">
     <li><a title="Om mig" href="#">Om mig</a></li>
     <li><a title="Mine Billeder" href="#">Billeder</a></li>
 <!--Undermenuer til Billeder-->
 <ul>
     <li><a href="#">Oliebilleder</a></li>
     <li><a href="#">Acrylbilleder</a></li>
     <li><a href="#">Landskabsbilleder</a></li>
 </ul>
 </ul>
 <ul>
     <li><a href="#">udstillinger</a></li>
     <li><a href="#">skulpturer</a></li>
     <li><a href="#">kontakt</a></li>
 
 </ul>

CSS kode

 /*dropdown menu start*/
 #menu ul {
   font-family: Arial, Verdana;
   font-size: 14px;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 #menu ul li {
   display: block;
   position: relative;
   float: left;
 }
 #menu li ul { display: none; }
 #menu ul li a {
   display: block;
   text-decoration: none;
   color: #ffffff;
   border-top: 1px solid #ffffff;
   padding: 5px 15px 5px 15px;
   background: #2C5463;
   margin-left: 1px;
   white-space: nowrap;
 }
 #menu ul li a:hover { background: #617F8A; }
 #menu li:hover ul {
   display: block;
   position: absolute;
 }
 #menu li:hover li {
   float: none;
   font-size: 11px;
 }
 #menu li:hover a { background: #617F8A; }
 #menu li:hover li a:hover { background: #95A9B1; 
 }

På forhånd tak

Indlæg senest redigeret d. 03.07.2011 19:33 af Bruger #16695

13 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #16649 @ 03.07.11 20:24

HTML kode

 <ul id="menu">
      <li><a title="Om mig" href="#">Om mig</a></li>
      <li><a title="Mine Billeder" href="#">Billeder</a></li>
  <!--Undermenuer til Billeder-->
  <ul>
      <li><a href="#">Oliebilleder</a></li>
      <li><a href="#">Acrylbilleder</a></li>
      <li><a href="#">Landskabsbilleder</a></li>
  </ul>
  <ul>
      <li><a href="#">udstillinger</a></li>
      <li><a href="#">skulpturer</a></li>
      <li><a href="#">kontakt</a></li>
  
  </ul>
  </ul>

Prøv det istedet for det andet du havde

Rettede lige et </ul> der kom for tidligt D:

Bruger #16649 @ 03.07.11 20:35

Så lidt

Du kan bare skrive hvis du mangler hjælp til noget

Bruger #16649 @ 03.07.11 22:07

CSS kode

 #menu {
      width:630px;
      margin: 20px auto;
      }
      
  #menu a {
      text-decoration:none;
      }
  #menu ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #menu ul li {
    display: block;
    position: relative;
    float: left;
  }
  #menu li ul { display: none; }
  #menu ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
  }
  #menu ul li a:hover { background: #617F8A; 
 }
  #menu li:hover ul {
    display: block;
    position: absolute;
  }
  #menu li:hover li {
    float: none;
    font-size: 11px;
  }

HTML kode

 <ul id="menu">
     <ul>
       <li><a title="Om mig" href="#">Om mig</a></li>
       <li><a title="Mine Billeder" href="#">Billeder</a>
   <ul>
       <li><a href="#">Oliebilleder</a></li>
       <li><a href="#">Acrylbilleder</a></li>
       <li><a href="#">Landskabsbilleder</a></li>
   </ul>
   </li>
         
         
     <ul>
       <li><a href="#">udstillinger</a></li>
       <li><a href="#">skulpturer</a></li>
       <li><a href="#">kontakt</a></li>
     </ul>
   </ul>
   </ul>

Så er det fixet

EDIT: Dette er løsningen

Indlæg senest redigeret d. 03.07.2011 22:13 af Bruger #16649

Bruger #16695 @ 03.07.11 20:35

Det virkede.. Tak for det

Bruger #16695 @ 03.07.11 20:54

Det gør jeg faktisk, for kan ikke få dem til og stå ved siden af hinanden? Det er lykkedes, men nu har jeg fået lavet et eller andet, så det ikke virker..

CSS kode

 #menu ul {
   font-family: Arial, Verdana;
   font-size: 14px;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 #menu ul li {
   display: block;
   position: relative;
   float: left;
 }
 #menu li ul { display: none; }
 #menu ul li a {
   display: block;
   text-decoration: none;
   color: #ffffff;
   border-top: 1px solid #ffffff;
   padding: 5px 15px 5px 15px;
   background: #2C5463;
   margin-left: 1px;
   white-space: nowrap;
 }
 #menu ul li a:hover { background: #617F8A; }
 #menu li:hover ul {
   display: block;
   position: absolute;
 }
 #menu li:hover li {
   float: none;
   font-size: 11px;
 }
 #menu li:hover a { background: none; }
 #menu li:hover li a:hover { background: none; 
 }

Vil blive lykkelig hvis der kommer en forklaring til det der bliver lavet, for vil jo pisse gerne lære det..

Bruger #16649 @ 03.07.11 21:09

HTML kode

 <ul id="menu">
     <ul>
       <li><a title="Om mig" href="#">Om mig</a></li>
       <li><a title="Mine Billeder" href="#">Billeder</a></li>
     </ul>
   <ul>
       <li><a href="#">Oliebilleder</a></li>
       <li><a href="#">Acrylbilleder</a></li>
       <li><a href="#">Landskabsbilleder</a></li>
   </ul>
     <ul>
       <li><a href="#">udstillinger</a></li>
       <li><a href="#">skulpturer</a></li>
       <li><a href="#">kontakt</a></li>
     </ul>
   
   </ul>

Virker dette?
Det burde gerne være listet op ved siden af hinanden?

Indlæg senest redigeret d. 03.07.2011 21:13 af Bruger #16649

Bruger #16695 @ 03.07.11 21:41

Ja det gør de godt nok, men ødelægger hele dropdown delen?

Bruger #16649 @ 03.07.11 21:49

Hvordan er det lige din css er lavet?
Er det bare mig eller er den fuldstændig sat forkert op ?

Bruger #16695 @ 03.07.11 21:57

Det en kodesnippet jeg har fundet.. Hvad er det der er forkert ved den?
Det har jo virket..

CSS kode

 #menu {
     width:630px;
     margin: 20px auto;
     }
     
 #menu a {
     text-decoration:none;
     }
 #menu ul {
   font-family: Arial, Verdana;
   font-size: 14px;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 #menu ul li {
   display: block;
   position: relative;
   float: left;
 }
 #menu li ul { display: none; }
 #menu ul li a {
   display: block;
   text-decoration: none;
   color: #ffffff;
   border-top: 1px solid #ffffff;
   padding: 5px 15px 5px 15px;
   background: #2C5463;
   margin-left: 1px;
   white-space: nowrap;
 }
 #menu ul li a:hover { background: #617F8A; }
 #menu li:hover ul {
   display: block;
   position: absolute;
 }
 #menu li:hover li {
   float: none;
   font-size: 11px;
 }
 #menu li:hover a { background: none; }
 #menu li:hover li a:hover { background: none;}

Bruger #16649 @ 03.07.11 22:02

HTML kode

 <ul id="menu">
     <ul>FJERN DEN HER
       <li><a title="Om mig" href="#">Om mig</a></li>
       <li><a title="Mine Billeder" href="#">Billeder</a>
   <ul>
       <li><a href="#">Oliebilleder</a></li>
       <li><a href="#">Acrylbilleder</a></li>
       <li><a href="#">Landskabsbilleder</a></li>
   </ul>
   </li>
         
         
     <ul>
       <li><a href="#">udstillinger</a></li>
       <li><a href="#">skulpturer</a></li>
       <li><a href="#">kontakt</a></li>
     </ul>
   </ul>OG DEN HER
   </ul>

Så din fil ikke sådan ud før?
Hvor Om mig og billeder ikke var i bokse ?

<< < 1 2 > >>

Hvorfor virker den her dropdownmenu ikke? :S

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler