dropdown menu met css

[jebl]

Daarmee verplaatst het menu iets naar beneden, maar ik zou graag zien dat de oranje hoover iets kleiner wordt.

 

[Aar]

Beetje spelen met de width en height, en eventueel de margin?

 

[bron]

Met mijn antwoord van bericht #18

Maak van beide <ul> een <ul class="menu">

en dan alles onder "einde .menu" vervangen door:

/*** structuur ***/
.navi {
   width: 100%;
   max-width: 1024px;
   height: 25px;
   margin: 0 auto;
}
.menuleft,
.menuright {
   width: 50%;
   float: left;
}
.menuleft .menu {
   float: left;
}
.menuright .menu {
   float: right;
}

/*** opmaak menubalk ***/
.navi {
   background: #292929;
   border-top: 2px solid #6b727c;
   border-bottom: 2px solid #6b727c;
}

/*** opmaak topmenu & submenu ***/
.menu li {
   text-align: left;
   background: #292929;
}
.menu a,
.menu a:hover,
.menu a:focus {
   padding: 4px 5px;
   font: bold 15px "trebuchet ms", arial, helvetica, sans-serif;
   text-align: left;
   color: #fff;
   text-shadow: 1px 1px #000;
}

/*** opmaak submenu ***/
.menu ul li {
   min-width: 70px;
}
.menu ul li:first-child {
   margin-top: 2px;
}

/*** opmaak mouse-over ***/
.menu li:hover,
.menu li:focus {
   background: #f30;
}

Het bovenste stuk van de css bij #18 is universeel en kan je voor elk horizontaal, vertikaal of lineair menu gebruiken. Dit stuk moet je dus niet aanpassen. Alleen onder "einde .menu" kun je css invoegen of wijzigen.

Suc6. Have fun.

@php4u
af-en-toe een echte oplossing zou wel aardig zijn

 

[Aar]

Met mijn antwoord van bericht #18

Maak van beide <ul> een <ul class="menu">

en dan alles onder "einde .menu" vervangen door:

/*** structuur ***/
.navi {
   width: 100%;
   max-width: 1024px;
   height: 25px;
   margin: 0 auto;
}
.menuleft,
.menuright {
   width: 50%;
   float: left;
}
.menuleft .menu {
   float: left;
}
.menuright .menu {
   float: right;
}

/*** opmaak menubalk ***/
.navi {
   background: #292929;
   border-top: 2px solid #6b727c;
   border-bottom: 2px solid #6b727c;
}

/*** opmaak topmenu & submenu ***/
.menu li {
   text-align: left;
   background: #292929;
}
.menu a,
.menu a:hover,
.menu a:focus {
   padding: 4px 5px;
   font: bold 15px "trebuchet ms", arial, helvetica, sans-serif;
   text-align: left;
   color: #fff;
   text-shadow: 1px 1px #000;
}

/*** opmaak submenu ***/
.menu ul li {
   min-width: 70px;
}
.menu ul li:first-child {
   margin-top: 2px;
}

/*** opmaak mouse-over ***/
.menu li:hover,
.menu li:focus {
   background: #f30;
}

Het bovenste stuk van de css bij #18 is universeel en kan je voor elk horizontaal, vertikaal of lineair menu gebruiken. Dit stuk moet je dus niet aanpassen. Alleen onder "einde .menu" kun je css invoegen of wijzigen.

Suc6. Have fun.

@php4u
af-en-toe een echte oplossing zou wel aardig zijn

Pardon? Alsof het geen echte oplossingen zijn die ik aandraag? Ik help ze toch op weg? Het is hier bovendien toch HELPmij, en geen Doethetvooranderen.nl?

 

[bron]

Helpmij is geen stackoverflow.com, maar ook op Helpmij kan iemand veel hebben aan een oplossing mét code. Uiteraard alleen code als oplossing voor de vraag en niet voor de hele website :d :d