css menu

Discussion in 'HTML' started by Shawn Modersohn, Apr 14, 2004.

  1. I am new to html and css. I am trying to figure out how to make a
    horizontal cascading menu with css. Netscape 7 won't hide the nested list
    but IE6 will. I thought all I needed was display:none; Also with what works
    in IE6 I can't figure out how to get the undisplayed list to show on hover?
    What I got so far. Thanks for any help.

    On an external style sheet

    ul.main {
    width:600px;
    color: #C0C0C0;
    list-style: none;
    border: 2px solid #000000;
    background-color: #008000;
    }

    ul.main li {
    display:inline;
    }


    }
    ul.main ul {
    display: none;
    list-style-type: none;
    width: 100px;
    border: 1px solid #000000;
    }
    ul.main ul > li a:hover{
    display:block;
    }
    ul.main ul a:hover {
    color:#FF0000;
    }

    ul.main a:hover{
    color:#ffffff;
    }

    And for the body

    <ul class="main">
    <li><a href="http://webpages.charter.net/shawnmodersohn/tempurl.html">This
    is
    one</a>
    <ul>
    <li><a
    href="http://webpages.charter.net/shawnmodersohn/tempurl.html">This
    is one and a half</a>

    <li><a
    href="http://webpages.charter.net/shawnmodersohn/tempurl.html">One
    point three 5</a>
    </ul>

    <li><a href="http://webpages.charter.net/shawnmodersohn/tempurl.html">This
    is
    two</a>
    <li><a href="http://webpages.charter.net/shawnmodersohn/tempurl.html">This
    is
    three</a>
    </ul>
     
    Shawn Modersohn, Apr 14, 2004
    #1
    1. Advertising

  2. damn I just caught the extra squigly, that lets netscape hide the nested
    list, but the a: hover display is still a mystery.

    "Shawn Modersohn" <> wrote in message
    news:...
    > I am new to html and css. I am trying to figure out how to make a
    > horizontal cascading menu with css. Netscape 7 won't hide the nested list
    > but IE6 will. I thought all I needed was display:none; Also with what

    works
    > in IE6 I can't figure out how to get the undisplayed list to show on

    hover?
    > What I got so far. Thanks for any help.
    >
    > On an external style sheet
    >
    > ul.main {
    > width:600px;
    > color: #C0C0C0;
    > list-style: none;
    > border: 2px solid #000000;
    > background-color: #008000;
    > }
    >
    > ul.main li {
    > display:inline;
    > }
    >
    >
    > }
    > ul.main ul {
    > display: none;
    > list-style-type: none;
    > width: 100px;
    > border: 1px solid #000000;
    > }
    > ul.main ul > li a:hover{
    > display:block;
    > }
    > ul.main ul a:hover {
    > color:#FF0000;
    > }
    >
    > ul.main a:hover{
    > color:#ffffff;
    > }
    >
    > And for the body
    >
    > <ul class="main">
    > <li><a

    href="http://webpages.charter.net/shawnmodersohn/tempurl.html">This
    > is
    > one</a>
    > <ul>
    > <li><a
    > href="http://webpages.charter.net/shawnmodersohn/tempurl.html">This
    > is one and a half</a>
    >
    > <li><a
    > href="http://webpages.charter.net/shawnmodersohn/tempurl.html">One
    > point three 5</a>
    > </ul>
    >
    > <li><a

    href="http://webpages.charter.net/shawnmodersohn/tempurl.html">This
    > is
    > two</a>
    > <li><a

    href="http://webpages.charter.net/shawnmodersohn/tempurl.html">This
    > is
    > three</a>
    > </ul>
    >
    >
    >
     
    Shawn Modersohn, Apr 14, 2004
    #2
    1. Advertising

  3. Shawn Modersohn

    ollimax Guest

    Shawn Modersohn wrote:
    > I am new to html and css. I am trying to figure out how to make a
    > horizontal cascading menu with css. Netscape 7 won't hide the nested list
    > but IE6 will. I thought all I needed was display:none; Also with what works
    > in IE6 I can't figure out how to get the undisplayed list to show on hover?
    > What I got so far. Thanks for any help.


    Hi.

    There's a very good manual in http://www.alistapart.com/articles/dropdowns/

    You need javascript only for IE, other browsers will do without. This is
    because IE considers :hover only with <a> element, other browsers
    consider it with almost any element.


    Oll¡maX!
     
    ollimax, Apr 15, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Miguel Dias Moura
    Replies:
    3
    Views:
    4,319
    Bruno Sirianni
    Apr 3, 2004
  2. Vilmar
    Replies:
    0
    Views:
    474
    Vilmar
    May 27, 2004
  3. itzikkl
    Replies:
    0
    Views:
    5,779
    itzikkl
    Mar 27, 2005
  4. mike
    Replies:
    2
    Views:
    600
  5. Replies:
    1
    Views:
    218
    Randy Webb
    Feb 19, 2006
Loading...

Share This Page