Horizontale Navbar - Paar Fragen

rodaN

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

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>

CSS

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;
}

Alles anzeigen

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="#" ?

Tags