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

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="#" ?
Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!