html/css help - NextGenUpdate

03-03-2011, 05:59 AM #1

Zee9586

Banned

948

Posts

147

Reputation

0

Credits

Banned

Nov 2009

NextGenUpdate

(adsbygoogle = window.adsbygoogle || []).push({}); so i currently taking a class at school for website creating and such and i am having trouble working out how to create my menu. the guy that sits next to me has a main menu item the when you hover over the word another menu will drop down below it. im sure he is using a unordered list but when i try i cant seem to get it to work. could someone please give me a link to a tutorial for it or supply me with the code for it and i will be able to work it out.

below is my code so far

    <!DOCTYPE html>

<html>

  <head>

   <title>Bulletstorm Zak </title>

    <style type="text/css">

    #hbox {

      display:-webkit-box;

      -webkit-box-orient:horizontal; 

      -webkit-box-flex:0;

    }

    aside {

      -webkit-box-flex:1;

    }

    article {

      -webkit-box-flex:1;

    }

    article,header,aside,footer,nav {

      border:1px solid black;

    }

    h1 {

      background-color:#6495ed;

    }

    body {

      background-image:url('modern-warfare-2.jpg';

    }

    nav {

      background-color:#66FFFF;

    }

    article,aside,footer{

      background-color:#66ffff;

    }

 </style>

  </head>

  <body>

   <header> 

    <h1>Bulletstorm 2011</h1>

    </header>

   <p></p>

   <nav>

     <ul>

       <li> Links </li>

       <ul>

         <li><a href="https://en.wikipedia.org/wiki/Bulletstorm">Bulletstorm wiki</a>

       </ul>

       <li> menu item 2 </li>

    </ul>   

   </nav>

   <p></p>

   <div id="hbox">

   <article> 

     <h2> Multiplayer </h2>

     <p> </p>

     <p>

     <video src= 'video 2.mov' controls='controls'>

     </video>

	 <audio src='01 All the Above (feat. T-Pain)' controls='controls'>

	 </audio>

     </P>

   </article>

   <aside> ads go here </aside>

   </div>

   <p></p>

   <footer> Copyright  2011 </footer>

  </body>

</html>

(adsbygoogle = window.adsbygoogle || []).push({});

03-03-2011, 03:46 PM #2

DeLeTeD

Maggbot timeout!

485

Posts

1,392

Reputation

0

Credits

Premium

Aug 2008

NextGenUpdate

For future use pastebin, much easier for coding help.

anyways here try this, the css needs to be changed to your liking but this method is the best way of doing since no javascript is used. This is pure css

You must login or register to view this content.

Also since your still learning it is good practice to end your tags correctly.

<li>text</li>
 is bad, use a (notice the slash after, since it starts and ends the tag)

The following user thanked DeLeTeD for this useful post:

Zee9586

03-04-2011, 05:43 AM #3

Zee9586

Banned

948

Posts

147

Reputation

0

Credits

Banned

Nov 2009

NextGenUpdate

Originally posted by DeLeTeD

For future use pastebin, much easier for coding help.

anyways here try this, the css needs to be changed to your liking but this method is the best way of doing since no javascript is used. This is pure css

You must login or register to view this content.

Also since your still learning it is good practice to end your tags correctly.

<li>text</li>
 is bad, use a (notice the slash after, since it starts and ends the tag)

yes some of the tags i have used are not correct and i was just in a hurry to get a feature working at the time, i have been told many times by my teacher to use the correct tags and set out of spacing