The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Help making my dropdown menu work
Denzil
post Jan 28 2013, 08:50 AM
Post #1





Group: Members
Posts: 1
Joined: 28-January 13
Member No.: 18,540
Basically i need to design a site for my assignment at uni and i'm new to using html. It all has to be done using notepad++. The problem i have at the moment is i can't get my navigation menu to work how i want it. I want it to be going across the screen and each time you put the mouse over part of it a dropdown menu will come down with links to sub categories. The problem i am having is that at teh moment when you put the mouse over it the submenu just appears as a new line and splits the navigation bar onto another line. I will link all my code so far so you can see what i mean, any help would be great, thanks.

This is the actual page code:
<html>

<head>
<title>
History of Browsers and Hypertext - Home
</title>
<link rel=stylesheet type="text/css" href="mystyle.css">
</head>
<body bgcolor="CCCCCC">
</body>
<body>



<div id="navbar">
<ul>
<li><a href="#">LinkHere</a></li>
<li>
<a href="#">LinkHere</a>
<ul>
<li><a href"#">Link2</a></li>
</ul>
</li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
</ul>
</div>

<br>
<a href="#"> link1 </a> <br>
<a href="#"> Link2
</body>

This is my CSS code:
<html>
<head>
<title>My Style Sheet</title>

<style type="text/css">
body {font-family:Verdana; font-size:14px}
i {font-size:14px; font-style:italic}
b {font-size:16px; font-weight:bold}
p {font-family:Arial; font-size:12px}

a {font-family:Verdana; font-size:14px; color:#0000ff}
a:active {color:660066}
a:hover {text-decoration:none; color:ff0000}
a:visited {color:660066}

#navbar ul {
margin:0;
padding:5px;
list-style-type:none;
text-align:left;
background-color:#999999;
position: relative;
display: inline-table}
#navbar ul:after {content: ""; clear: both; display: block}
#navbar li {display: inline}
#navbar li a {text-decoration:none; padding:.2em 1em; color:#fff; background-color:#999999}
#navbar li a:hover {color:#ffffff; background-color:#666666}

#navbar ul ul {display: none}
#navbar ul li:hover > ul {display:block}
</style>

</head>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 29 2013, 02:37 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Start by a well structured HTML page and correct CSS.

Put in a DOCTYPE ( see http://htmlhelp.com/reference/html40/html/doctype.html , or use the simple HTML 5 DOCTYPE: <!DOCTYPE html> ).
The DIV (and those links on the loose) belongs inside a single BODY tag that a page can have.

The BODY background attribute value lacks a # sign. You might as well put it in the CSS. There are color values in the CSS that lack the # sign too.

An external CSS file can't contain any HTML tags, only selectors and their declarations.

As for the menu, you'll find articles and tutorials at http://www.d.umn.edu/itss/support/Training.../css.html#lists .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 09:45 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC