Member Avatar for faithingod1970

I am trying to create lists with sublists where the sub lists are hidden. My next step is to make it so a user can add but first things first. The XHTML and CSS should be working together yet the sublists are not hiding, any ideas? XHTML is here and CSS is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alstom page 2</title>
<link rel="stylesheet"
type="text/css"
href="menu css sheet.css" />
</head>

<body>

<center> <img src="alstom-logo.gif" alt="Alstom Logo"  height = "168" width = "400" border="none" /> </center>

<p> </p>
<p> </p>
    <div id = "menu">

    <ul>
      <li>menu 
        <ul>
            <li>Option a</li>
            <li>Option b</li>
            <li>Option c</li>
            <li>Option d </li>
                </ul>
              </li>
              <li>history
                 <ul> 
                 <li>Option 1</li>
                  <li>Option 2</li>
                  <li>Option 3</li>
            </ul> 
            </li>
            </ul>
</div>
</body>
</html>

and the css:

/* CSS Document */

/* create float menu for webpage*/

#menu  ul {margin-left: -2.5em; }

#menu  li {
    list-style-type: none;
    border: black solid 1px;
    float:left;
    width: 10em;
    background-color:#cccccc;
    text-align:center;  }

    #menu a {
        color: black;
        text-decoration: none;
        display: block;  }

        #menu a:hover {
            background-color: white; }

            menu li ul {
                display: none; }

            menu li:hover > ul {
                display: block;
                margin-left: -2em;  }
  • 3 Contributors
  • 2 Replies
  • 126 Views
  • 36 Minutes Discussion Span
  • Latest Post Latest Post by efe.ozyer
Member Avatar for karand19

You have to write the code for sublist.
Check below css code;

 #menu li ul {
            display: none; }
        #menu li:hover > ul {
            display: block;
            margin-left: -2em;  }
Edited by karand19 because: hastag missing
Member Avatar for efe.ozyer

Working css :

<style type="text/css">
    body {
        width:550px;
        margin-left:auto;
        margin-right:auto;
    }

    ul.main {
    }

    ul.main li {
        list-style-type:none;
        border:1px solid #333;
        float:left;
        width:10em;
        text-align:center;
        cursor:pointer;
    }

    ul.main li ul.sub {
        display:none;
        color:#F00;
        margin-left:-41px;
    }

    ul.main li:hover ul.sub {
        display:block;
    }

    ul.main li:hover ul.sub li a {
        text-decoration:none;
        color:#F00;
    }

    ul.main li:hover ul.sub li a:hover {
        color:#900;
    }
</style>

And HTML :

<ul class="main">
    <li>Home</li>
    <li>
        Products
        <ul class="sub">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
        </ul>
   </li>
   <li>About</li>
</ul>
Edited by efe.ozyer
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.