...

View Full Version : Need help with drop down menu links



jdiddy45
03-16-2005, 05:35 PM
Can anybody insert code so that artists and discography have when you put mouse on link in navbar, popup drop menu comes up under link with more links.

I need under Artists to pop up a link called-
Entrigue
(entrigue.html)
and under Discography i need links to popup-
Soup Kitchen
(soup.html)
The Triple Threat
(triple.html)

I only know basic html and somebody else did CSS, they couldnt get drop down menu to work for ppl with IE, since can't predict everybody in world browsers, need it to work on all browsers. So can anybody insert code needed and paste it back to me?

heres my page and what it looks like now:
http://www.geocities.com/silvermicrecords

my header code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<head>

<title>SilverMic Records</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />

<meta http-equiv="content-script-type" content="text/javascript" />

<meta http-equiv="content-style-type" content="text/css" />

<meta http-equiv="imagetoolbar" content="no" />

<style type="text/css">
/*ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
/* width: 10em;*/
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul { display: block; }
li:hover ul{ display: block; }
li:hover ul, li.over ul{ display: block; }
*/
</style>
<style type="text/css">
body {
background-color: #000;
font-size:11px;
font-family: verdana, arial, helvetica, sans-serif;
color: #FFF;


}
#container {
width: 780px;
border: 1px solid silver;
margin: 20px;
margin-left: auto;
margin-right: auto;
background: #000 url(nav.gif) repeat-y;


}
#banner {


background-color: #000;
border-bottom: 1px solid silver;

}
#content {
margin-top: 3px;
padding: 5px;
/*margin-left: 120px;*/
/*margin-right: 120px; */
background: #000 url(nav.gif) repeat-y;

border: 1px solid silver;
}

#sidebar-a {
float: left;
width: 100px;
margin: 0;
margin-top: 3px;
margin-right: 5px;
margin-left:5px;
display:inline;
padding: 5px;
background: #000 url(nav.gif) repeat-y;
;
border: 1px solid silver;
}
#sidebar-b {
float: right;
width: 100px;
margin: 0;
margin-top: 3px;
margin-left: 5px;
margin-right:5px;
display:inline;
padding: 5px;
background: #000 url(nav.gif) repeat-y;

border: 1px solid silver;
}
#footer {
clear: both;
height:auto;
margin-top: 5px;
background-color: #000;

border: 1px solid silver;
}
#footer #footer_left {
display: inline;
float: left;

}

#footer #footer_right {

display: inline;
float: right;

margin-right: 10px;
}

.navpic {
background:#000;
width: 80px;
\width: 90px;
w\idth: 80px;
border: 1px dotted silver;
font-family: verdana, arial, helvetica, sans-serif;
font-size:12px;
color:#fff;
font-weight:bold;
margin-left: auto;
margin-right: auto;

text-align: center; /*center in IE 5.5*/
}
img {
border: 0px none;
}
A:link {
text-decoration: none;
color: #819ebb;
}
A:visited {
text-decoration: none;
color: #819ebb;
}
A:hover {
text-decoration: underline;
color: #d6dbe0;
}
.news {
margin-top: 1px;
border: 2px solid #819ebb;
width:425px;
padding: 6px 6px 6px 6px;
margin-bottom: 5px;
margin-left:25px;
margin-right:25px;

text-align: center; /*center in IE 5.5*/



}
#navbar {
margin-top : 1px;
margin-left : 25px;
}

#navbar ul {
list-style : none;
margin : 0;
padding : 0;
text-align : center;
}

#navbar li {
display : block;
float : left;
}

#navbar li a {
color : #fff;
display : block;
width : 70px;
text-decoration : none;
background-color: #000;
padding : 2px 10px;
border: 1px solid silver;
}

#navbar ul li a:hover {
color : #819ebb;
background : #000;
}

#navbar a:active {
background : #819ebb;
color : #000;
}
#news p{

/*add style to the news*/
}
div>#navbar{
margin-bottom:2.0em; /*Hack*/
}

.clearing {
clear: both;
}

</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]></script>


</head>



<body>

<div id="container">

<div id="banner">
<img src="silvermic.gif" height="120" width="780" alt="SilverMIc" />

</div>

<div id="navbar">
<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="#">Artists</a> </li>

<li> <a href="#">Discography</a> </li>
<li> <a href="#">Downloads</a> </li>
<li> <a href="contact.html">Feedback</a> </li>
<li><a href="#">Booking</a> </li>
<li><a href="#">Pictures</a> </li>
<li><a href="links.html">Links</a> </li>
</ul>
</div>

<div id="content">

jdiddy45
03-16-2005, 07:42 PM
can anybody plz help?

vwphillips
03-16-2005, 08:39 PM
possibly

http://www.vicsjavascripts.org.uk/SimpleTextPopUp/SimpleTextPopUp.htm

jdiddy45
03-16-2005, 10:21 PM
how would i apply it into css and code, cause i want it to match the navbar that is already up, and i dont want to mess anything up because i didnt make css or anything. can anybody look at code, see where stuff neds to go and copy and paste into code?

Ben@WEBProp
03-17-2005, 12:07 AM
I know what you want, and here is how to do it. You have a good start on the CSS list based menu, but here is a way to do CSS list based dropdowns:

http://www.alistapart.com/articles/dropdowns/

Its pretty easy to work with, but you will have to apply different classes of lists if you use <li> anywhere else on your pages, otherwise they will render as a second set of menu items.

Good Luck with it!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum