Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with drop down menu links

    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">
    Last edited by jdiddy45; 03-16-2005 at 06:00 PM.

  • #2
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can anybody plz help?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts

  • #4
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Regular Coder
    Join Date
    Jun 2003
    Location
    Spokane, WA
    Posts
    512
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Thoughts determine what you want,
    Actions determine what you get.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •