CSS Liste (ul/li) breite automatisch an Inhalt anpassen...

[lu_lle]

Hallo!

Ich arbeite gerade an folgender Website
http://www.fachschaften.uni-muenchen.de/geologie/neueseite4/

es geht mir um das dropdown menü ganz oben, das durch folgendes stylesheet definiert wird:

/* common styling */
/* set up the overall width of the menu div, the font and the margins */

.menu {
width:760px;
margin:0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
padding:0px 8px 0px 8px;
display:block;
text-align:left;
text-decoration:none;
height:20px;
color:#286ea0;
border:1px solid #fff;
border-width:0px 1px 1px 0px;
background:#e0e0e0 url(../Andreas02/images/corner.gif) top right no-repeat;
line-height:20px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background:#d0d0d0 url(../Andreas02/images/corner.gif) top right no-repeat;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
width:90px;
display:block;
position:absolute;
top:21px;
left:0;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
width:90px;
display:block;
background:#e0e0e0;
color:#286ea0;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background:#d0d0d0;
color:#286ea0;
}

Ich möchte nun, dass die Breite einer "Drop-down-Spalte" nicht fest auf 90px fixiert ist, sondern sich automatisch an die Zeile mit dem Breitesten Inhalt anpasst! Leider bin ich in CSS überhaupt nicht fit, hab schon rumprobiert aber ohne erfolg...wie könnte man soetwas realisieren?

vielen Dank schonmal
lulle

[Gernot Back]

Hallo lu_lle,

Ich arbeite gerade an folgender Website
http://www.fachschaften.uni-muenchen.de/geologie/neueseite4/

  

> /* make the dropdown ul invisible */  
> .menu ul li ul {  
> display: none;  
> }  
  

> .menu ul li:hover ul {  
> width:90px;  
> display:block;  
> position:absolute;  
> top:21px;  
> left:0;  
> }  

Ich möchte nun, dass die Breite einer "Drop-down-Spalte" nicht fest auf 90px fixiert ist, sondern sich automatisch an die Zeile mit dem Breitesten Inhalt anpasst! Leider bin ich in CSS überhaupt nicht fit, hab schon rumprobiert aber ohne erfolg...wie könnte man soetwas realisieren?

Da solltest du bei den Listen zweiter Ordnung vielleicht statt mit display:none; lieber mit visibility:hidden; und statt mit absoluter Positionierung bei diesen lieber nur mit einer solchen nur bei der Liste erster Ordnung arbeiten.

Den auf die Navigation folgenden Inhalt verschiebst du dann mit einem passenden Margin-Top, damit er nicht auch noch unter die absolut positionierte Navigation erster Ordnung rutscht.

Gruß Gernot