css - CSS multilevel dropdown menu - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css multilevel dropdown menu

Bruger #10114 @ 04.05.12 04:20

Hej

Jeg kan ikke rigtigt få dette til at fungere korrekt.

Jeg forsøger at få den første undermenu's venstre side til at flugte med topmenuen's links venstre side. og den anden undermenu's første menu punkt til at ligge ud for pilen.

Håber det giver mening.

Ellers kort sagt: Multilevel dropdown menu i ren CSS.

Dette er min css fil:

CSS kode

 nav {
     width: 900px;
     margin: 0 auto;
 }
 
 nav ul {
     position: relative;
     float: left;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     z-index: 997;
 }
 
 nav ul li {
     display: block;
     
     padding-top: 5px;
     padding-left: 15px;
     padding-right: 15px;
     padding-bottom: 5px;
     
     margin-top: 4px;
     margin-left: 2px;
     margin-right: 2px;
     margin-bottom: 4px;
     
     border: 1px solid #000000;
     float: left;
     
     text-align: center;
     vertical-align: middle;
 }
 
 nav ul li:hover {
     background-color: #cccccc;
 }
 
 .submenu {
     background-image: url('arrow-down.jpg');
     background-repeat: no-repeat;
     background-position: right center;
     background-size: 15px 15px;
 }
 
 nav ul li ul {
     display: none;
 }
 
 nav ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     z-index: 998;
 }
 
 nav ul li:hover ul li {
     display: block;
     
     padding-top: 5px;
     padding-left: 5px;
     padding-right: 15px;
     padding-bottom: 5px;
     
     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     
     border: 1px solid #000000;
     float: none;
     
     text-align: left;
     vertical-align: middle;
 }
 
 .subsubmenu {
     background-image: url('arrow-right.jpg');
     background-repeat: no-repeat;
     background-position: right center;
     background-size: 15px 15px;
 }
 
 nav ul li:hover ul li ul {
     display: none;
 }
 
 
 nav ul li:hover ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     z-index: 999;
 }
 
 nav ul li:hover ul li:hover ul li {
     display: block;
     
     padding-top: 5px;
     padding-left: 5px;
     padding-right: 15px;
     padding-bottom: 5px;
     
     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     
     border: 1px solid #000000;
     float: none;
     
     text-align: left;
     vertical-align: middle;
 }

Dette er min HTML kode:

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
     
     <meta name="description" content="B44 CMS" />
     <meta name="keywords" content="HTML,HTML5,CSS,CSS3,PHP,MySQL,B44,CMS" />
     <meta name="author" content="Jacob Christensen" />
     <meta charset="UTF-8" />
     
     <title>B44 CMS - menu.html</title>
     
     <link rel="stylesheet" type="text/css" href="reset.css" />
     <link rel="stylesheet" type="text/css" href="menu.css" />
     
 </head>
 
 <body>
     
 <nav>
     
     <ul>
         <li><a href="#">[topmenu 1]</a></li>
         <li><a href="#">[topmenu 2]</a></li>
         <li class="submenu"><a href="#">[topmenu 3]</a>
             <ul>
                 <li><a href="#">[submenu 3.1][submenu 3.1]</a></li>
                 <li><a href="#">[submenu 3.2]</a></li>
                 <li class="subsubmenu"><a href="#">[submenu 3.3]</a>
                     <ul>
                         <li><a href="#">[submenu 3.3.1]</a></li>
                         <li><a href="#">[submenu 3.3.2]</a></li>
                         <li><a href="#">[submenu 3.3.3]</a></li>
                         <li><a href="#">[submenu 3.3.4]</a></li>
                         <li><a href="#">[submenu 3.3.5]</a></li>
                     </ul>
                 </li>
                 <li class="subsubmenu"><a href="#">[submenu 3.4]</a>
                     <ul>
                         <li><a href="#">[submenu 3.4.1]</a></li>
                         <li><a href="#">[submenu 3.4.2]</a></li>
                         <li><a href="#">[submenu 3.4.3]</a></li>
                         <li><a href="#">[submenu 3.4.4]</a></li>
                         <li><a href="#">[submenu 3.4.5]</a></li>
                     </ul>
                 </li>
                 <li><a href="#">[submenu 3.5]</a></li>
             </ul>
         </li>
         <li class="submenu"><a href="#">[topmenu 4]</a>
             <ul>
                 <li><a href="#">[submenu 4.1]</a></li>
                 <li><a href="#">[submenu 4.2]</a></li>
                 <li><a href="#">[submenu 4.3]</a></li>
                 <li><a href="#">[submenu 4.4]</a></li>
                 <li class="subsubmenu"><a href="#">[submenu 4.5]</a>
                     <ul>
                         <li><a href="#">[submenu 4.5.1]</a></li>
                         <li><a href="#">[submenu 4.5.2]</a></li>
                         <li><a href="#">[submenu 4.5.3]</a></li>
                         <li><a href="#">[submenu 4.5.4]</a></li>
                         <li><a href="#">[submenu 4.5.5]</a></li>
                     </ul>
                 </li>
             </ul>
         </li>
         <li><a href="#">[topmenu 5]</a></li>
     </ul>
     
 </nav>
     
 </body>
 
 </html>

Her er menu'en som den ser ud nu: Link

Jeg har forsøgt, at ændre dette:

CSS kode

 nav ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     z-index: 998;
 }

Til dette:

CSS kode

 nav ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     top: 100%;
     left: 0;
     
     z-index: 998;
 }

Resultat: Link

Og dette:

CSS kode

 nav ul li:hover ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     z-index: 999;
 }

Til dette:

CSS kode

 nav ul li:hover ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     top: 1px;
     left: 99%;
     
     z-index: 999;
 }

Resultat: Link

Indlæg senest redigeret d. 04.05.2012 04:21 af Bruger #10114

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

Sorter efter stemmer Sorter efter dato

Bruger #16622 @ 04.05.12 21:04

Meget fint, men her lære jeg jo ikke hvad det er jeg gør forkert...

Hej igen,

Jeg mener nu godt du kunne lære noget ved at kigge på koden. Det var et eksempel som virkede og som i sidste ende var det resultat du gik efter...

Men okay, hvis vi tager udgangspunkt i din kode:
http://www.borgen44.slackr.dk/menu/menu1.html

Så har jeg rettet og tilføjet en smule i din css, så det er som jeg tror du vil have det:

CSS kode

 nav {
     width: 900px;
     margin: 0 auto;
 }
 
 nav ul {
     position: relative;
     float: left;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     z-index: 997;
     line-height:1.5em; 
     
 }
 
 nav ul li a { /* Tilføjet */
     padding-top: 5px; /* Tilføjet */
     padding-left: 15px; /* Tilføjet */
     padding-right: 15px; /* Tilføjet */
     padding-bottom: 5px; /* Tilføjet */
 } /* Tilføjet */
 
 nav ul li {
     /* display: block; */
     
     float:left; /* Tilføjet */
     position:relative; /* Tilføjet */
     
     /* padding-top: 5px; Slettet */
     /* padding-left: 15px; Slettet */
     /* padding-right: 15px; Slettet */
     /* padding-bottom: 5px; Slettet */
     
     margin-top: 4px;
     margin-left: 2px;
     margin-right: 2px;
     margin-bottom: 4px;
     
     border: 1px solid #000000;
     float: left;
     
     text-align: center;
     vertical-align: middle;
 }
 
 nav ul li:hover {
     background-color: #cccccc;
 }
 
 .submenu {
     background-image: url('arrow-down.jpg');
     background-repeat: no-repeat;
     background-position: right center;
     background-size: 15px 15px;
 }
 
 nav ul li ul {
     display: none;
 }
 
 nav ul li:hover ul {
     width: 220px; /* Tilføjet */
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     z-index: 998;
 }
 
 nav ul li:hover ul li a { /* Tilføjet */    
     padding-top: 5px; /* Tilføjet */
     padding-left: 5px; /* Tilføjet */
     padding-right: 15px; /* Tilføjet */
     padding-bottom: 5px; /* Tilføjet */
 } /* Tilføjet */
 
 nav ul li:hover ul li {
     display: block;
     
     /* padding-top: 5px; Slettet */
     /* padding-left: 5px; Slettet */
     /* padding-right: 15px; Slettet */
     /* padding-bottom: 5px; Slettet */
     
     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     
     border: 1px solid #000000;
     float: none;
     
     text-align: left;
     vertical-align: middle;
 }
 
 .subsubmenu {
     background-image: url('arrow-right.jpg');
     background-repeat: no-repeat;
     background-position: right center;
     background-size: 15px 15px;
 }
 
 nav ul li:hover ul li ul {
     display: none;
 }
 
 
 nav ul li:hover ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     left: 218px; /* Tilføjet */
     top: 0; /* Tilføjet */
     z-index: 999;
 }
 
 nav ul li:hover ul li:hover ul li a { /* Tilføjet */    
     padding-top: 5px; /* Tilføjet */
     padding-left: 5px; /* Tilføjet */
     padding-right: 15px; /* Tilføjet */
     padding-bottom: 5px; /* Tilføjet */
 } /* Tilføjet */
 
 nav ul li:hover ul li:hover ul li {
     display: block;
     
     /* padding-top: 5px; Slettet */
     /* padding-left: 5px; Slettet */
     /* padding-right: 15px; Slettet */
     /* padding-bottom: 5px; Slettet */
     
     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     
     border: 1px solid #000000;
     float: none;
     
     text-align: left;
     vertical-align: middle;
 }

Den største ændring er at du bliver nød til at have en fast bredde på dine undermenuer. Jeg har prøvet med comments i css-filen og forklare hvad jeg har gjort.

Selve css´en kunne godt skrives meget pænere ved at skrive mange af reglerne sammen. Som du kan se er der rigtig meget som gentages og det skal man som udgangspunkt prøve at undgå. Men for ikke at ændre så meget i din kode at du ikke kan se hvad der er sket har jeg ikke gjort det.

Håber det hjælper dig...

Bruger #10114 @ 04.05.12 18:04

Meget fint, men her lære jeg jo ikke hvad det er jeg gør forkert...

Bruger #16622 @ 04.05.12 12:49

Hej Jacob,

Her har du en meget simpel html/css dropdown menu:

HTML kode

 <!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=UTF-8" />
 <title></title>
 </head>
 <body>
 
     <ul id="nav">
         <li><a href="#">1 HTML</a></li>
         <li><a href="#">2 CSS</a></li>
         <li><a href="#">3 Javascript </a>
           <ul>
             <li><a href="#">3.1 jQuery</a>
               <ul>
                     <li><a href="#">3.1.1 Download</a></li>
                     <li><a href="#">3.1.2 Tutorial</a></li>
               </ul>
             </li>
             <li><a href="#">3.2 Mootools</a></li>
             <li><a href="#">3.3 Prototype</a></li>
           </ul>
         </li>
     </ul>
 
 </body>
 </html>

CSS kode

 body {
 font-size:0.85em;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 }
 
 #nav, #nav ul {
 margin:0;
 padding:0;
 list-style-type:none;
 list-style-position:outside;
 position:relative;
 line-height:1.5em; 
 }
 
 #nav a {
 display:block;
 padding:0px 5px;
 border:1px solid #333;
 color:#fff;
 text-decoration:none;
 background-color:#333;
 }
 
 #nav a:hover {
 background-color:#fff;
 color:#333;
 }
 
 #nav li {
 float:left;
 position:relative;
 }
 
 #nav ul {
 position:absolute;
 display:none;
 width:12em;
 top:1.5em;
 }
 
 #nav li ul a {
 width:12em;
 height:auto;
 float:left;
 }
 
 #nav ul ul {
 top:auto;
 }    
 
 #nav li ul ul {
 left:12em;
 margin:0px 0 0 10px;
 }
 
 #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
 display:none;
 }
 
 #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
 display:block;
 }

Mvh. David

Bruger #10114 @ 05.05.12 12:25

Super lækkert :p

Havde dog håbet på jeg kunne undgå den faste bredde på undermenuerne.

Ved godt koden kan se pænere ud, det retter jeg altid til, når jeg har fået tingene til at fungere. Syntes det er lidt lettere for mig at overskue hvad der sker

CSS multilevel dropdown menu

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler