Drop down menu

Status
Niet open voor verdere reacties.
Ik vind in je stylesheet en in je <head></head>-tags nergens de CSS code die je volgens de website ook moet toevoegen terug.

Voeg onderaan je stylesheet.css de volgende regels toe:

Code: 
ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }

Dit zou moeten werken.

Succes!

EDIT:
Ik heb het even getest, en mocht het menu helemaal buiten de layout vallen zoals bij mij gebeurde, dan kun je de
HTML: 
<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a>
    <ul>
    <li><a href="">The Team</a></li>
    <li><a href="">History</a></li>
    <li><a href="">Vision</a></li>
    </ul>
  </li>
  <li><a href="">Products</a>
    <ul>
    <li><a href="">Cozy Couch</a></li>
    <li><a href="">Great Table</a></li>
    <li><a href="">Small Chair</a></li>
    <li><a href="">Shiny Shelf</a></li>
    <li><a href="">Invisible Nothing</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a>
    <ul>
    <li><a href="">Online</a></li>
    <li><a href="">Right Here</a></li>
    <li><a href="">Somewhere Else</a></li>
    </ul>
  </li>
</ul>

Tussen de
HTML: 
<div id="header">

</div>
plaatsen in plaats van waar hij nu staat.
 
Laatst bewerkt:
Het menu werkt inmiddels, maar ik krijg het niet op de juiste plaats , in het midden boven de box.
Hoe kan ik de buttons ( Home of About Us ) groter maken ?
Groet,
Henk
 
Het menu staat inmiddels in het midden, maar nu is de rest naar links gekukkeld.
Ook lukt het mij niet het menu groter te maken, ik wil het hebben zoals op deze site
http://livedemo00.template-help.com/wordpress_38390/
Je vraagt je misschien af waarom niet deze template ombouwen, ik heb hem gekocht
maar is PHP, snap daar helemaal niets van.
Vandaar dat ik het nu op deze manier probeer te maken.

Henk
 
Na veel google, you tube en het forum doorgespit is het gelukt het menu groter te maken door wat simpele verandering in
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;

height: 50px;
width: 200px;

background: #2C5463;

was
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
Nu de tekst in het menu nog in het midden en alles op de juiste plaats.

Henk
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan