html - navigationsbar: problem med at gøre <ul></ul> usynlig - Udvikleren.dk

Tags: html css

Bruger #16670 @ 08.03.14 23:35

Hej

Undskyld den noget kryptiske overskrift, men det var det bedste jeg kunne finde på !

Jeg sidder og roder med en navigationsbar lavet HTML og CSS og den volder mig ikke så få problemer, så jeg håber en af jer lige vil give mig en hand.

Det er vigtigt for mig, at understrege, at jeg ikke har nogen erfaring med at lave en navigationsbar med submenuer, så dette er et lille project jeg burger til at samle noget erfaring, derfor er det også vigtigt at navigationsbarens CSS er så simple som muligt, da den er nemmere for mig at overskue.

Mit problem er at jeg ikke kan få fjernet den blå farve under menu-punktet "products" uden at jeg fjerner hele farven fra navigationsbaren.

Jeg er godt klar over, at grunden til at højden på dette list item er det den er, er fordi den har indhold.

HTML kode

 <div id="section_wrapper">
                     <nav id="navigation_bar">
                         <ul>
                             <li><a href="#">home</a></li>
                             <li><a href="#">products</a>
                                 <ul>
                                     <li><a href="#">beans</a></li>
                                     <li><a href="#">tomato</a></li>
                                 </ul>
                             </li>
                             <li><a href="#">something</a></li>
                             <li><a href="#">contact</a></li>
                         </ul>
                     </nav>
                 </div><!-- section_wrapper END-->

CSS kode

 #section_wrapper {
     
     width: 600px;
     min-height: 100px;
     height: auto;
     margin: 0 auto;    
 }
 
 #navigation_bar {
     
     width: 100%;
     min-height: 100px;
     height: auto;
     float: left;    
 }
 
 /*-------------- styling for navigation bar -------------*/
 
 #navigation_bar ul {
     
     list-style-type: none;
     
 }
 
 #navigation_bar ul a {
     
     text-decoration: none;
 }
 
 #navigation_bar ul li {
     
     background-color: #66CCFF;
     display: inline-block;
     width: 150px;
     min-height: 20px;
     height: auto;
     float: left;
     
 }
 
 #navigation_bar ul li ul {
     
     visibility: hidden;    
 }
 
 #navigation_bar ul li ul li {
     
     background-color: #CCCCCC;
     display: inline-block;
     width: 150px;
     min-height: 20px;
     height: auto;
     float: left;
 
 }
 
 #navigation_bar ul li:hover ul {
     
     visibility: visible;    
 }

Link en jsfiddle, som illustrerer problemet

Der ser udtil at være en forskydning af submenuen products - det er der ikke på min skærm herhjemme, så hvad der lige sker ved jeg ikke !

Indlæg senest redigeret d. 08.03.2014 23:38 af Bruger #16670

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

Sorter efter stemmer Sorter efter dato

Bruger #8782 @ 09.03.14 00:04

Der er lidt tvetydigheder i din CSS, som gør at det ikke fungerer for dig.

Jeg har ændret lidt i den, og her er resultatet: http://jsfiddle.net/gfsz3/3/

Bruger #16670 @ 09.03.14 13:54

Der er lidt tvetydigheder i din CSS, som gør at det ikke fungerer for dig.

Jeg har ændret lidt i den, og her er resultatet: http://jsfiddle.net/gfsz3/3/

Hej

Tak for hjælpen - jeg kan se, at jeg næsten havde lavet den korrekt og at djævlen lå i små-detaljerne.

CSS kode

 #navigation_bar > ul > li > ul {
 /*#navigation_bar > ul > li > ul brugen af ">" ser ikke ud til at gøre en forskel*/
      
 
      visibility: hidden;    
      position: absolute; /*gør at <li></li> ikke længere kan "se" <ul></ul>*/
 }

Det kniber lidt med min forstålelse af den fundamentale forskel på brugen af ">" mellem elementerne og når de ikke bruges !

Jeg mener:

#navigation_bar > ul > li > ul

betyder: vælg alle <ul> hvor forældren(e) er <li>, hereafter vælg alle <li> hvor forældren(e) er <ul> og til sidst vælg alle <ul> hvor forældren(e) er #navigation_bar

Men er det ikke stort set det damme som:

#navigation_bar ul li ul

betyder: vælg alle <ul> inde i <li>, hereafter vælg alle <li> inde i <ul> og til sidst vælg alle <ul> inde i #navigation_bar

mit sidste eksempel burger jeg hele tiden (og det gør I sikkert også).

Jeg har kigget inde på W3schools og kan se at ifølge deres oversight:

CSS Selector Reference så tilhører ul li CSS1, mens ul > li er CSS2

Nå, men jeg må vel bare vænne mig til at det er sådan det er selvom jeg har set flere flere eksempler, hvor man godt kan lave en navigationsbar uden brug af ">".

Edit

Så har jeg googlet lidt mere I min søgen efter den mest basale navigationsbar med dropdown/submenuer og nu tror jeg nok, at det er lykkedes !

læg marke til at here ikke gøres brug af ">" og det ser ud til at virke fint alligevel...

HTML kode

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 </head>
 <body>
     <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li>
             <a href="#">Products</a>
             <ul>
                 <li><a href="#">Laptops</a></li>
                 <li><a href="#">Monitors</a></li>
                 <li><a href="#">Printers</a></li>
             </ul>
         </li>
         <li><a href="#">Contact</a></li>
     </ul>
     <div id="box">
         <p>some content goes here ! lorem ipsum dolor</p>
     </div>
 </body>
 </html>

min lidt modificeret CSS

CSS kode

 * {
         padding: 0;
         margin: 0;
     }
     
     ul{
 
         list-style: none;
     }
     ul li{
         float: left;
         width: 100px;
         text-align: center;
         position: relative; /* ensures that the second <ul></ul> displays as a block and not inline */
     }
     ul li a{
         display: block;
         padding: 5px 10px;
         color: #333;
         background: #f2f2f2;
         text-decoration: none;
     }
     ul li a:hover{
         color: #fff;
         background: #939393;
     }
     ul li ul{
         display: none;
     }
     ul li:hover ul{
         display: block; /* display the dropdown */
         position: absolute; /* makes the second <ul></ul> float on top of the content beneath it*/
     }
     
     #box {
         background-color: #FF0000;
         width:100%;
         height: 50px;
         float: left;
     }

Her er den originale CSS

CSS kode

 ul{
         padding: 0;
         list-style: none;
     }
     ul li{
         float: left;
         width: 100px;
         text-align: center;
     }
     ul li a{
         display: block;
         padding: 5px 10px;
         color: #333;
         background: #f2f2f2;
         text-decoration: none;
     }
     ul li a:hover{
         color: #fff;
         background: #939393;
     }
     ul li ul{
         display: none;
     }
     ul li:hover ul{
         display: block; /* display the dropdown */
     }

Her er et link til siden som demonstrere koden i function:
Show Hide Dropdown Using CSS

Her en jsfiddle som viser min modificerede kode i funktion

Indlæg senest redigeret d. 09.03.2014 17:11 af Bruger #16670

navigationsbar: problem med at gøre <ul></ul> usynlig

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler