Drop Down Menu

Status
Niet open voor verdere reacties.
B

badslayer

Gebruiker
Lid geworden
19 aug 2008
Berichten
64
Hallo,
Ik ben net nieuw hier en ik weet niet of ik hier goed zit,
maar ik wil graag een dropdownmenu maken.
kan iemand vertellen hoe dat moet?
Of een goede duidelijke tutorial?
M.V.G.
 
Gooi
doctype
in google.

Vermits je met DW werkt zou er wel een doctype standaard aanwezig moeten zijn.

:cool:
 
Nee,
Moet je dan voor de code
<style> zetten en als de code van de style voorbij is
</style>
 
Jep gelukt,
Bedankt
Maar hoe krijg ik daar een link aan?
 
Laatst bewerkt:
Code met linken volgens de gegeven site:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="shortcut icon" href="/img/logo.ico" />

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>Home @ RobAbrahams.nl</title>

<link href="style.css" rel="stylesheet"  type="text/css" />

<style type="text/css">

#nav, #nav ul {
padding: 0 0 0 0;
margin: 0;
list-style: none;
}

#nav li {
float: left;
width: 120px;
}

#nav ul {
position: absolute;
width: 120px;
left: -1000px;
}

#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}

#nav a {
display: block;
margin: 1px 5px 1px 5px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}

ul a{
font-weight: bold;
color: #F60;
cursor: default;
}

ul ul a:link, ul ul a:visited{
font-weight: normal;
color: #CCC;
cursor: pointer;
}

ul ul a:hover, ul ul a:active{
font-weight: normal;
color: #FFF;
cursor: pointer;
}

ul li{
background-color: #CCC;
border-left: 3px solid #FFF;
}

ul ul li{
background-color: #666;
border-top: 3px solid #FFF;
border-left: 0;
}

/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 3px solid #FFF;
}

* html ul ul li{
border-top: 0;
}
/* Einde IE only hack */
</style>

</head>

<body> 

<div id="wrapper">


<div id="header">
  <form method="post" action="index.htm">
  </form>

</div><!-- END HEADER-->


<div class="result">
<p class="header">RESULTAAT:</p>
<ul id="nav">

<li><a href="#">Main item 1</a>

<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3</a></li>
<li><a href="#">Sub item 1.4</a></li>
</ul>

</li>

<li><a href="#">Main item 2</a>

<ul>

<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
<li><a href="#">Sub item 2.4</a></li>
<li><a href="#">Sub item 2.5</a></li>
</ul>

</li>

<li><a href="#">Main item 3</a>

<ul>
<li><a href="#">Sub item 3.1</a></li>
<li><a href="#">Sub item 3.2</a></li>
</ul>

</li>

</ul>
</div>

<!-- 
<div id="nav">
<ul>
<li></li>
<li><a href="index.htm">Home</a></li>
<li><a href="links.htm">Link partners</a></li>

<li><a href="downloads.htm">Downloads</a></li>
<li></li>
<li><a href="msn.htm">Msn</a></li>
</ul>

<ul>
  <li><a href="tuts.htm">Tutorials</a></li>
  <li></li>
</ul>
<ul>
  <li><a href="contact.php">Contact</a></li>

  <li><a href="ontspanning.htm">ontspanning</a></li>
</ul>
</div> --> <!-- END NAV-->

<!-- SiteSearch Google -->
<form method="get" action="http://www.google.be/custom" target="_top">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</form>

<div id="content">
<div id="col2">

  <h1>Gezocht!<br />
  </h1>
  <p>We zoeken nog crew leden die voor RobAbrahams.nl Tutorials enz. wil schrijven.<br />
      <br />
      <br />
    We zoeken ook nog link partners<br />
    WIl je link partners met RobAbrahams.nl worden?<br />

    Mail dan in het contact menu.<br />
    <a href="contact.php">Klik hier</a> om er meteen heen te gaan</p>
  <p>&nbsp;</p>
</div>
<div id="col1">
  <h1>Welkom op <span class="red">RobAbrahams.nl</span> </h1>

  <p>Welkom op RobAbrahams.nl<br />
    <br />
Deze site is voor te leren en niet om te gaan misbruiken of dergelijke.<br />
Heb je vragen of zie je fouten?<br />
Neem dan contact op met vragen@robabrahams.nl<br />
We hebben er sins kort ook een nieuwe beheerder bij.<br />
Wil je liever contact met hem opnemen dat kan dan met koen@robabrahams.nl<br />
  Wilt u een tut of een download of iets over nemen?<br />

  Mail ons dan.</p>
  <p>Met vriendelijke groeten. RobAbrahams.nl crew </p>
  <div id="col3">
    <h1>Wat is nieuw?<br />
    </h1>
    <p>Hier komt steeds het gene wat het laaste nieuw is te staan.<br />
    Nu is dat:<br />

      <br />
    Site op je bureaublad <br />
        <br />
          Te vinden bij het menu tutorials<br />
    </p>
    </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>

</div> 
<!-- END COL1-->
<!-- END COL3-->
<!-- END COL2-->
</div>
<!-- END CONTENT-->


<div id="footer">
  <p>&copy; 2008 Robabrahams.nl - Alle rechten voorbehouden</p>
</div>  <!-- END FOOTER -->

</div> <!--END  WRAP --> 


</body>

</html>

Nu zelf even aanpassen voor je pagina.
Dus de css uit de head halen en in de losse style file zetten.
Als je dit evn uit de code haalt:
<link href="style.css" rel="stylesheet" type="text/css" />
dan zul je zien dat het werkt.
Nu je externe style aanpassen, omdat daar al li en ul inzit..

:cool:
 
Het dropdown menu is helemaal gelukt,
maar nu weet ik niet hoe ik er een link aan vast maak
 
<li><a href="#">Beesten</a>

<ul>
<li><a href="apen.html">naar apen</a></li>
<li><a href="olifanten.html">naar olifanten</a></li>
<li><a href="vissen.html">naar vissen</a></li>
<li><a href="tijgers.html">naar tijgers</a></li>
</ul>

:cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan