✔ Probleme mit dem Submenü

Status
Nicht offen für weitere Antworten.
T

tigerlily

Grünschnabel
Hallo an alle,

ich habe ein kleines Problem. Und zwar habe ich mir ein horizontales Klappmenü erstellt mit Hilfe von HTML und CSS. Soweit so gut. Leider habe ich noch einen kleinen Schönheitsfehler gefunden :) und zwar sobald man auf einen Button in der Leiste klickt wo sich das Submenü öffnet, überschreibt css mir meinen vorgegeben Rahmen anstatt sich anzupassen.

http://foto.arcor-online.net/palb/alben/09/650209/1280_6438373635613663.jpg


währe für einen Denkanstoß sehr dankbar wonach ich suchen müsste um es in CSS anzupassen.

gruss

tigerlily
 
HTML-Code:

HTML: 
   <link rel="stylesheet" type="text/css" href="test.css">

</head>

<body>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Alle anzeigen</a></li>
<li><a href="#">Mitarbeiter anlegen</a></li>
<ul id="navlist">
<li id="active"><a href="#" id="current">Mitarbeiter suchen</a> 
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Namenssuche</a></li>
<li><a href="#">Suchkriterien</a></li>
</ul>
</li>
<li><a href="#">Daten aktualisieren</a></li>
<ul id="navlist">
<li id="active"><a href="#" id="current">Einstellungen</a> 
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Verzeichnisse</a></li>
</ul>
</li>
<ul id="navlist">
<li id="active"><a href="#" id="current">Stammdaten</a> 
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Beratungspunkte</a></li>
<li><a href="#">Branchen</a></li>
<li><a href="#">Datenbanken</a></li>
<li><a href="#">Fremdsprache</a></li>
<li><a href="#">Fremdsprachenstatus</a></li>
<li><a href="#">Methoden</a></li>
<li><a href="#">Programmiersprachen</a></li>
<li><a href="#">Qualifikation</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Zertifizierung</a></li>
<li><a href="#">Kunden</a></li>
<li><a href="#">Firmendaten</a></li>
<li><a href="#">Beraterstatus</a></li>
</ul>
</li>
<li><a href="#">Alte Profile</a></li>
</ul>
</div>

CSS-Code:
HTML: 
ul#navlist 
{ 
font-family: sans-serif; 
}

ul#navlist a
{
font-weight: bold;
text-decoration: none;
}

ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#navlist li 
{ 
float: left; 
}

ul#navlist li a
{
color: #000000;
background-color: #009900;
padding: 3px;
border: 1px solid black;
}

ul#navlist li a:hover
{
color: #000000;
background-color: #009900;
}

ul#navlist li a:active
{
color: #cccccc;
background-color: #009900;
border: 1px solid black;
}

ul#subnavlist 
{ 
display: none; 
border: 1px solid black;
}

ul#subnavlist li 
{ 
float: none; 
}

ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}

ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}

ul#navlist li:hover ul#subnavlist li a:before 
{ 
content: " >> "; 
}

body 
{
	background-color: #FFFFFF;
	background-image: url("outcome.jpg");   
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: left top;
	

}
 
Was beim ersten Überfliegen des Quellcodes auffällt, ist die Tatsache, dass du alle IDs in dem Dokument mehrfach verwendest, was aber nicht regelkonform ist, da eine ID innerhalb eines HTML-Dokuments eindeutig sein muss. In diesem Fall müssen die IDs in Klassen umgewandelt werden.

Ansonsten kann ich bei mir kein Überschreiben der Rahmeneinstellungen feststellen, wenn sich die Submenüs öffnen.

Vielmehr sitzt das Submenü zu weit oben, was sich mit folgender Regelerweiterung beheben lässt:

Code: 
ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
top:30px;
}
 
Bei mir überschneiden sie sich auch...

Und ich würde das ganze zusätzlich noch einmal im IE(bei mir 7) anschauen, da sieht das ganze gar nicht toll aus :/
 
@Maik: Danke für deinen Tipp, leider überschreibt er mir den Submenü Block weiterhin.

@HuRaHoRRe: Oh weih, stimmt im IE7 totale Katastrophe, habe das bis jetzt mit FireFox getestet.
 
Oh sorry, da habe ich mich wohl missverständlich ausgedrückt.

Ich meinte damit wie schon oben in der Grafik angehangen, das mir die einzelnen Menü Punkte die zu lang sind, wie z.B. Fremdsprachenstatus die Box überschreitet. Hätte aber gerne das sich meine Submenü Box variabel an das längste Wort mit verbreitert.

gruss

dany
 
Okay, dann hätten wir das auch geklärt ;)

Nimm mal im folgenden Selektor die Breitenangabe heraus:

Code: 
ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück