CSS Dropdown Menü "Position zerschießt Layout"

stingray · #1 (**permalink**) 16.06.2012, 14:30

Ich wollte mal ein CSS-Dropdown-Menü erstellen. klappt auch ganz gut bis hierhin...
Aber sobald ich es beliebig auf dem Bildschirm platzieren will(z.B. pixelgenau unter einem Bild), zerschießt es mir das Layout und das Untermenü befindet sich irgendwo im Nirvana. Also ist es nicht mehr mit dem Obermenü verbunden, sondern es klafft eine Riesenlücke zwischen den beiden.

Kann einer mir helfen?

HTML

Code:

<html>
<head>
<title>Title</title>
<link href="Layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu" >
  <ul>
    <li><a class="submenu" href="#" title="Text">Text</a>
      <ul>
        <li><a title="Text" href="#"> Text</a></li>
        <li><a title="Text" href="#">Text</a></li>
    
      </ul>
    </li>
    <li><a class="submenu" href="#" title="Text">Text</a>
      <ul>
        <li><a title="Text" href="#">Text</a></li>
        <li><a title="Text" href="#">Text </a></li>
        <li><a title="Text" href="#">Text</a></li>
        <li><a title="Text" href="#">Text </a></li>
        <li><a title="Text" href="#">Text </a></li>
        </li>
      </ul>
    <li><a class="submenu" href="#" title="Text">Text</a>
       <ul>
        <li><a title="Text" href="#">Text</a></li>
        <li><a title="Text" href="#">Text</a></li>
        <li><a title="Text" href="#">Text</a></li>
      </ul>
      </li>
    <li><a class="submenu"  class="submenu" href="#" title="Text">Text</a>
      <ul>
        <li><a title="Text" href="#">Text </a></li>
        <li><a title="Text" href="#">Text</a></li>
        </li>
      </ul>
    <li><a href="#" title="Text">Text</a></li>
  </ul>

</body>

Layout.CSS

Code:

.menu ul 
{
margin: 0px;
padding: 0px;
list-style: none;
list-style-position: outside;
position:absolute;
  left: 50px; top: 50px;
font-family: Verdana, Geneva, sans-serif;
font-style: bold;
}

.menu a,
.menu a:visited {
display: block;
color: #FFF;
text-decoration: none;
background: #9a0313; 
padding: 0px 15px;
line-height: 35px;
text-align: center;
font-size: 12px;
font-style: bold;
}

.menu li 
{
float: left;
position:relative;
width: 150px;
}

.menu ul ul ul{
list-style: none;
list-style-position: outside;
display: block;
top: 0px;
left: 100%;
position: relative; 
top: 0px;
left: 100%;
}


.menu ul ul a,
.menu ul ul a:visited 
{
background: #c70419;
}

.menu a.submenu,
.menu a.submenu:visited {
background: #9a0313 url(arrow-down.gif) no-repeat center bottom;
}

.menu ul:hover > a.submenu
{
background: #c70419 url(arrow-down.gif) center bottom no-repeat;
}

.menu ul ul a:hover > a.submenu 
{
background: #c70419 url(arrow.gif) right center no-repeat;
}

.menu ul li ul{
visibility: hidden;
position: relative;
}

.menu ul li:hover > ul 
{
visibility: visible;
background: #c70419
}

.menu {
width: 800px;
z-index: 999;
}

lottikarotti · #2 (**permalink**) 18.06.2012, 13:35

Hallo,

zunächst einmal solltest du dein Markup durch den W3C Validator jagen und die vorhandenen Fehler ausmerzen. Kurze Zusammenfassung:
- Kein Doctype
- Kein schließendes div-Tag
- Verschachtelung teilweise fehlerhaft (ul, li)
- Kein schließendes html-Tag

Anschließend wirfst du dein CSS in den W3C CSS Validator und behebst auch hier alle Fehler.

Zu guter Letzt postest du das überarbeitete Material und dann sehen wir weiter

Gruß, lotti.

stingray · #3 (**permalink**) 23.06.2012, 23:32

Zitat:

Zitat von lottikarotti

- Verschachtelung teilweise fehlerhaft (ul, li)
Gruß, lotti.

Vielen Dank für die Hilfe... Das da wars. Ein ul gekürzt und das ganze lief

und die anderen Fehler: bin zwar kein Profi aber peinlich peinlich das ich das vergessen habe

Neue Frage:

-Muss ich dieses Menü auf jeder Seite komplett neu einfügen, oder gibt es da die Möglichkeit das zu verlinken??

hubspe · #4 (**permalink**) 24.06.2012, 11:17

Zitat:

Zitat von stingray

-Muss ich dieses Menü auf jeder Seite komplett neu einfügen, oder gibt es da die Möglichkeit das zu verlinken??[/I]

nicht unbedingt. Du kannst immer wiederkehrende Teile (header, footer, menüs) per include einfügen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DropDown Menü verschwindet	andre-ne	CSS	2	18.11.2009 10:44
Dropdown Menue wird durch Untermenue gestreckt	Schelm.isch	CSS	4	31.08.2008 22:31
herunterfahrendes Menü mit CSS	Pablo	CSS	1	27.12.2007 17:07
Popdown Menü mit CSS	Nohma	CSS	0	08.10.2007 20:58