HeyHo,
ich habe ein Paar Fragen zu meiner Navbar.
Erst einmal mein Code: (Jede Seite ist unter dem Body-Tag mit einem wrapper versehen)
nav.html
CSS
Screen (display:none auskommentiert zum Verständnis): Bild
#1
Die einzelnen Nav-Punkte haben eine feste Breite von 120px. Wie bekomme ich es nun hin, dass wenn der Text länger ist (siehe Bild), sich der Text automatisch anpasst?
#2
Der Punkt "Calculator" soll ein Unterpunkt (drop-down Menü) von "Tools" sein.
Dazu habe ich über "#nav-top ul ul" das "display: none" gesetzt.
Aber egal wo ich nun ein "hover" setzte und den "display: block", es wird mir nichts angezeigt.
Wie bekomme ich nun ein drop-down Menü hin, welches sich direkt unter dem Hauptpunkt befindet und gleichgroß ist sowie das sich der Text anpasst (soll nicht aus den 120px herausragen)?
#3
Der Hauptpunkt "Tools" selber soll nicht anklickbar sein bzw. keine Funktion haben. Ist nicht anklickbar möglich, wenn ja wie?
Keine Funktion schätze ich mal einfach mit href="#" ?
ich habe ein Paar Fragen zu meiner Navbar.
Erst einmal mein Code: (Jede Seite ist unter dem Body-Tag mit einem wrapper versehen)
nav.html
Code:
<nav id="nav-top"> <ul> <li><a href="index.php">News</a></li> <li><a href="tools.php">Tools</a></li> <ul> <li><a href="calc.php">Calculator</a></li> </ul> </ul> </nav>
Code:
* { margin: 0; padding: 0; } #wrapper { width: 980px; position: relative; margin: 0 auto; } header, nav, footer, section { display: block; } /* NAV Top */ #nav-top { font-family: Bitter, serif; background: #00421c; height: 40px; line-height: 40px; border-bottom: solid 1px #003215; color: #FFF; font-size: 1.3em; text-transform: uppercase; text-decoration: none; text-align: center; text-shadow: 0px 1px 2px rgba(0,0,0,0.6); } #nav-top ul { list-style: none; margin: 0; padding: 0; width: 100%; } #nav-top ul ul { display: none; } #nav-top ul li { position: relative; height: 40px; float: left; border-right: 2px solid #003215; width: 120px; } #nav-top ul li a { color: #FFF; text-decoration: none; display: block; } #nav-top li:hover { background: #003215; }
#1
Die einzelnen Nav-Punkte haben eine feste Breite von 120px. Wie bekomme ich es nun hin, dass wenn der Text länger ist (siehe Bild), sich der Text automatisch anpasst?
#2
Der Punkt "Calculator" soll ein Unterpunkt (drop-down Menü) von "Tools" sein.
Dazu habe ich über "#nav-top ul ul" das "display: none" gesetzt.
Aber egal wo ich nun ein "hover" setzte und den "display: block", es wird mir nichts angezeigt.
Wie bekomme ich nun ein drop-down Menü hin, welches sich direkt unter dem Hauptpunkt befindet und gleichgroß ist sowie das sich der Text anpasst (soll nicht aus den 120px herausragen)?
#3
Der Hauptpunkt "Tools" selber soll nicht anklickbar sein bzw. keine Funktion haben. Ist nicht anklickbar möglich, wenn ja wie?
Keine Funktion schätze ich mal einfach mit href="#" ?
Kommentar