Dropdown-Menüleiste

Offensichtlich, wenn ich die Liste im Menü von der linken Seite gehe, wird der Text schwarz und der Hintergrund wird dunkler, aber wenn ich es von rechts mache, ist der Text immer noch weiß. Wenn ich die Größe der Seite verkleinere und verkleinere, konvergieren die Wörter in der Kopfzeile des Menüs miteinander. Ich möchte die Seite statisch bleiben, wenn die Größe des Fensters wie in http://www.nfl.com geändert wird, wenn es in der Größe geändert wird. Hier ist mein Code: HTML:Dropdown-Menüleiste

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://WWW.W3.ORG/tr/XHTML1/dtd/XHTML1-TRANSITIONAL.DTD"> 
<html> 
    <head> 
    <meta content="text/html; charset=utf-8" /> 
    <title>My Webpage</title> 
    <link href="styles.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
    <header> 
     My Webpage</header> 
    <div id="wrapper"> 
     <div id="navMenu"> 
     <ul> 
     <li><a href="#">Products</a> 
     <ul> 
      <li><a href="#">Link Item</a></li> 
      <li><a href="#">Link Item</a></li> 
      <li><a href="#">Link Item</a></li> 
     </ul> 
     </li> 
     </ul> 
     <ul> 
     <li><a href="#">Products</a> 
     <ul> 
      <li><a href="#">Link Item</a></li> 
      <li><a href="#">Link Item</a></li> 
      <li><a href="#">Link Item</a></li> 
     </ul> 
     </li> 
     </ul> 
     <ul> 
     <li><a href="#">Products</a> 
     <ul> 
      <li><a href="#">Link Item</a></li> 
      <li><a href="#">Link Item</a></li> 
      <li><a href="#">Link Item</a></li> 
     </ul> 
     </li> 
     </ul> 
     <ul> 
     <li><a href="#">Products</a> 
     <ul> 
      <li><a href="#">Link Item</a></li> 
      <li><a href="#">Link Item</a></li> 
      <li><a href="#">Link Item</a></li> 
     </ul> 
     </li> 
     </ul> 
     <ul> 
     <li><a href="#">Products</a> 
     <ul> 
      <li><a href="#">Link Item</a></li> 
      <li><a href="#">Link Item</a></li> 
      <li><a href="#">Link Item</a></li> 
     </ul> 
     </li> 
     </ul> 
     <br class ="clearFloat" /> 
     </div>  
    </div> 
    <section> 
    Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf 
     a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf 
     a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf 
     ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf 
     al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla; 
    </section> 
    </body> 
</html>

CSS:

body{ 
    margin: 0; 
    padding: 0; 
    font-family: sans-serif; 
} 
header{ 
    background: #00795f; 
    width: 100%; 
    padding: 40px 0; 
    color: white; 
    text-align: center; 
} 
#navMenu { 
    margin: 0; 
    padding: 0; 
} 
#navMenu ul { 
    margin:0; 
    padding:0; 
    line-height:30px; 
} 
#navMenu li { 
    margin:0; 
    padding:0; 
    list-style:none; 
    float:left; 
    position:relative; 
    background-color: #43a286; 
    width:20%; 
} 
#navMenu ul li a { 
    text-align:center; 
    font-family:"Comic Sans MS", cursive; 
    text-decoration:none; 
    height:32px; 
    width:150px; 
    display:block; 
    color:#FFFFFF; 
    text-shadow:1px 1px 1px #000; 
} 
#navMenu ul ul { 
    position:absolute; 
    visibility:hidden; 
    top:32px; 
} 
#navMenu ul li:hover ul { 
    visibility:visible; 
} 
#navMenu ul li:hover li { 
    display:block; 
    width:100%; 
} 
#navMenu li:hover { 
    background-color: #357e68; 
} 
#navMenu ul li:hover ul li a:hover { 
} 
#navMenu a:hover { 
    color:#000000; 
} 
.clearFloat { 
    clear:both; 
    margin:0; 
    padding:0; 
} 
section{ 
    line-height: 1.5em; 
    font-size: 0.9em; 
    padding: 40px; 
    width: 75%; 
    margin: 0 auto; 
}

Quelle

2016-06-16 Khalil Hijazi

Ein anschauliches Beispiel wäre schön. – Li357

Du meinst wie auf jfiddle oder so? –

Sicher, ich möchte es in Aktion sehen – Li357

Mit Ihrer Geige, Sie nicht die li Elemente Zentrum hat, die die a Elemente auf volle Breite nicht strecken würde. Sie müssen diese CSS-Selektor ändern:

#navMenu ul li a { 
    text-align:center; 
    font-family:"Comic Sans MS", cursive; 
    text-decoration:none; 
    height:32px; 
    width:100%; 
    display:block; 
    color:#FFFFFF; 
    text-shadow:1px 1px 1px #000; 
}

Dies wird die Cutoff auf den a Tags zu stoppen. Dies zentriert auch die Listenelemente, die möglicherweise nicht erwünscht sind, aber Sie können bauen und anpassen. Eine andere Sache, wird das Dropdown nicht auf die Eltern entsprechen, es sei denn Sie hinzufügen:

#navMenu ul li ul { 
    width: 100%; 
}

Schließlich Registerkarte konvergierenden zu verhindern, setzen Sie das min-width Attribut auf den Registerkarten. Dies ist eine willkürliche Zahl und Sie können sie nach Belieben ändern. Eine Randnotiz, da min-width die width überschreibt, wirkt sich dies auf das Dropdown aus. Sie können dies weglassen wollen:

#navMenu ul { 
    margin:0; 
    padding:0; 
    line-height:30px; 
    min-width: 500px; 
}

ich einen Ausschnitt mit dem JSFiddle Code enthalten haben bearbeitet:

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
} 
 
header{ 
 
    background: #00795f; 
 
    width: 100%; 
 
    padding: 40px 0; 
 
    color: white; 
 
    text-align: center; 
 
} 
 
#navMenu { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
#navMenu ul { 
 
\t margin:0; 
 
\t padding:0; 
 
\t line-height:30px; 
 
} 
 
#navMenu li { 
 
\t margin:0; 
 
\t padding:0; 
 
\t list-style:none; 
 
\t float:left; 
 
\t position:relative; 
 
\t background-color: #43a286; 
 
\t width:20%; 
 
} 
 
#navMenu ul li a { 
 
\t text-align:center; 
 
\t font-family:"Comic Sans MS", cursive; 
 
\t text-decoration:none; 
 
\t height:32px; 
 
\t //width:150px; 
 
    width: 100%; 
 
\t display:block; 
 
\t color:#FFFFFF; 
 
\t text-shadow:1px 1px 1px #000; 
 
} 
 
#navMenu ul ul { 
 
\t position:absolute; 
 
\t visibility:hidden; 
 
\t top:32px; 
 
} 
 
#navMenu ul li:hover ul { 
 
\t visibility:visible; 
 
} 
 
#navMenu ul li:hover li { 
 
    display:block; 
 
    width:100%; 
 
} 
 
#navMenu ul li ul { 
 
    width: 100%; 
 
} 
 

 
#navMenu li:hover { 
 
\t background-color: #357e68; 
 
} 
 
#navMenu ul li:hover ul li a:hover { 
 
} 
 
#navMenu a:hover { 
 
    color: #000000; 
 
} 
 
.clearFloat { 
 
\t clear:both; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
section{ 
 
    line-height: 1.5em; 
 
    font-size: 0.9em; 
 
    padding: 40px; 
 
    width: 75%; 
 
    margin: 0 auto; 
 
}

 <title>My Webpage</title> 
 
    <body> 
 
    <header> 
 
     My Webpage</header> 
 
    <div id="wrapper"> 
 
     <div id="navMenu"> 
 
     <ul> 
 
     <li><a href="#">Products</a> 
 
     <ul> 
 
      <li><a href="#">Link Item</a></li> 
 
      <li><a href="#">Link Item</a></li> 
 
      <li><a href="#">Link Item</a></li> 
 
     </ul> 
 
     </li> 
 
     </ul> 
 
     <ul> 
 
     <li><a href="#">Products</a> 
 
     <ul> 
 
      <li><a href="#">Link Item</a></li> 
 
      <li><a href="#">Link Item</a></li> 
 
      <li><a href="#">Link Item</a></li> 
 
     </ul> 
 
     </li> 
 
     </ul> 
 
     <ul> 
 
     <li><a href="#">Products</a> 
 
     <ul> 
 
      <li><a href="#">Link Item</a></li> 
 
      <li><a href="#">Link Item</a></li> 
 
      <li><a href="#">Link Item</a></li> 
 
     </ul> 
 
     </li> 
 
     </ul> 
 
     <ul> 
 
     <li><a href="#">Products</a> 
 
     <ul> 
 
      <li><a href="#">Link Item</a></li> 
 
      <li><a href="#">Link Item</a></li> 
 
      <li><a href="#">Link Item</a></li> 
 
     </ul> 
 
     </li> 
 
     </ul> 
 
     <ul> 
 
     <li><a href="#">Products</a> 
 
     <ul> 
 
      <li><a href="#">Link Item</a></li> 
 
      <li><a href="#">Link Item</a></li> 
 
      <li><a href="#">Link Item</a></li> 
 
     </ul> 
 
     </li> 
 
     </ul> 
 
     <br class ="clearFloat" /> 
 
     </div>  
 
    </div> 
 
    <section> 
 
    Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf 
 
     a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf 
 
     a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf 
 
     ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf 
 
     al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla; 
 
    </section> 
 
    </body>

Quelle

2016-06-17 00:13:19 Li357

Dropdown-Menüleiste

Antwort

Verwandte Themen