Post: html/css help
03-03-2011, 05:59 AM #1
(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'Winky Winky;
}
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!
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>
<p> </p> is bad, use a <br /> (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
Originally posted by DeLeTeD View Post
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>
<p> </p> is bad, use a <br /> (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

Copyright © 2026, NextGenUpdate.
All Rights Reserved.

Gray NextGenUpdate Logo