• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Drop-Down-Menü

M

momo95

Mitglied
Hallo,
ich habe ein schönes Menu erstellt.
Wie der Titel schon verät hat es hovereffekte, die eine verschachtelte Liste anzeigen.

Hier die Codes:

Css:
HTML: 
#menu {
position: absolute;
top: 50px;
left: 100px;
width: 100%;
background: #ffffff;
float: left;
}

#menu ul {
list-style: none;
border:1px solid #000000;
margin: 0;
padding: 0;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-color: #000000;
boder-style: solid;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #ffffff;
background-image: url(images/bg-ul.png);
}

#menu h2:hover {
color: #000000;
background: #ffffff;
}

#menu a {
color: #000000;
background: #ffffff;
text-decoration: none;
}

.right {
color: #000000;
background: #ffffff;
text-decoration: none;
text-align: right;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

.right:hover {
color: #ffffff;
background: #000000;
text-decoration: none;
text-align: right;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

#menu a:hover {
color: #ffffff;
background-image: url(images/bg-ul.png); /*Hintergrund Hover*/
}

#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
z-index: 500;
left: -1px;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none; width: auto;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block; width: auto;}
Und HTML:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head> 


<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="shortcut icon" href="http://www.moritz-morgenstern.de/images/favicon.ico">
<link href="hs7-Dateien/tanfa.css" rel="stylesheet" type="text/css">
<style type="text/css" media="all">
<!--
@import url(menu.css);
-->
</style>
</head>
<body>
<div id="menu">
<ul width="100px">
  <li><h2>Links 1-4</h2>
    <ul width="auto">
      <li><a href="#" title="Link 1">Link 1</a>
        <ul width="500px">
          <li><a href="#" title="Link 2">Link 2</a>
          <li><a href="#" title="Link 3">Link 3</a>
          <li><a href="#" title="Link 4">Link 4</a>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Links 5-12</h2>
    <ul>
      <li><a href="#" title="Link 5">Link 5</a></li>
      <li><a href="#" title="Link 6">Link 6</a>
        <ul>
          <li><a href="#" title="Link 7">Link 7</a>    
            <ul>
              <li><a href="#" title="Link 8">Link 8</a>        
              <li><a href="#" title="Link 9">Link 9</a>
              <li><a href="#" title="Link 10">Link 10</a>
              <li><a href="#" title="Link 11">Link 11</a>            
              <li><a href="#" title="Link 12">Link 12</a>
            </ul>
          </li>
    </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Links 13-19</h2>
    <ul>
      <li><a href="#" title="Link 1">Link 1</a>
      <li><a href="#" title="Link 1">Link 1</a>
        <ul>
          <li><a href="#" title="Link 13">Link 1</a>
            <ul>
              <li><a href="#" title="Link 14">Link 14</a>
              <li><a href="#" title="Link 15">Link 15</a>            
              <li><a href="#" title="Link 16">Link 16</a>
              <li><a href="#" title="Link 17">Link 17</a>
              <li><a href="#" title="Link 18">Link 18</a>        
              <li><a href="#" title="Link 19">Link 19</a>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>                            
</div>

</body></html>
Jetzt zu meinem Problem: Ich will die Liste in der Breite dem Inhalt anpassen. In den ersten 2 Ebenen ist es ok. Aber in den beiden unteren gibt es immer einen Zeilenumbruch.

Habt ihr eine Idee oder einen Fehler?

Vielen Dank!
 
Werbung:
Hallo,

hast schon mit white-space:nowrap; probiert.


habe mal deins damit erweitert.
HTML: 
#menu {
position: absolute;
top: 50px;
left: 100px;
width: 100%;
background: #ffffff;
float: left;
}
#menu ul {
list-style: none;
border:1px solid #000000;
margin: 0;
padding: 0;
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-color: #000000;
boder-style: solid;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #ffffff;
background-image: url(images/bg-ul.png);
}
#menu h2:hover {
color: #000000;
background: #ffffff;
}
#menu a {
color: #000000;
background: #ffffff;
text-decoration: none;
}
.right {
color: #000000;
background: #ffffff;
text-decoration: none;
text-align: right;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.right:hover {
color: #ffffff;
background: #000000;
text-decoration: none;
text-align: right;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#menu a:hover {
color: #ffffff;
background-image: url(images/bg-ul.png); /*Hintergrund Hover*/
}
#menu li {
 position: relative;
 width: auto;
 white-space:nowrap;
}
#menu ul ul {
position: absolute;
z-index: 500;
left: -1px;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{
 display: none;
 width: auto;
 white-space:nowrap;
}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{
 display: block;
 width: auto;
 white-space:nowrap;
};

Cheffchen
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben