1 reply [Last post]
bethcairns
bethcairns's picture
Offline
newbie
Glasgow
Last seen: 7 years 36 weeks ago
Glasgow
Joined: 2013-02-11
Posts: 1
Points: 2

Soooo I'm really struggling with this fly out menu stuff...the hover doesn't work and sub menus dont appear...any help would be appreciated!!

CSS

/*** Navigation bar CSS ***/
 
ul{
    font-family: Arial, Verdana;
    font-size: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
 
ul li {
    display: block;
    position: relative;
    width:150px;
 
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
 
li:hover ul {
    display:block;
    position: absolute;
}
li:hover ul {
    float: none;
    font-size: 11px;
 
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #1e7c9a;
}
 
/*** Positioning ***/
 
#container { position: relative; width: 100%; top: 20px; left: 30px; height: 600px; }
 
 
 
 
#main {position: absolute; top: 10px; left: 350px; width: 78%; height: 350px; font-family: Arial, verdana;}
#text {float: left; margin-left: 90px; width: 300px; font-family: Arial, verdana;}
#image {position: absolute; top: 200px; left: 200px; width: 78%; height: 350px}
#h1 {}

HTML

<html>
 <title>Homepage</title>
<head>
<link href="homepage1.css" type="text/css" rel="Stylesheet">
  </head>
 
<div id="container">
 <div id="logo">
 <img src="file:///I|/mmcourse/imagesCAZ5JNHL.jpg" alt="Home Button"/>
 </div>
 
<body>
<ul id="navigation">
 
<li><a href="homepage.html">Home</a></li>
<br>
<li><a href="creation.html">Creation</a>
                <ul>
                    <li><a href="cristofori.html">Cristofori</a></li>
                    <li><a href="silbermann.html">Silbermann</a></li>
                </ul>
            </li>
 
  <li><a href="viennese.html">Viennese</a>
                  <ul>
                    <li><a href="stein.html">Stein</a></li>
                    <li><a href="zumpe.html">Zumpe</a></li>
                    <li><a href="graf.html">Graf</a></li>
                    <li><a href="schmidt.html">Schmidt</a></li>
  </ul>
</li>
  <li><a href="broadwood.html">Broadwood</a>
                 <ul>
                   <li><a href="evolutionbroadwood.html">Evolution</a></li>
  </ul>
</li>
  <li><a href="othertypes.html">Other Types</a>
                 <ul>
                   <li><a href="upright.html">Upright</a></li>
                   <li><a href="giraffe.html">Giraffe</a></li>
                   <li><a href="square.html">Square</a></li>
  </ul>
</li>
  <li><a href="pleyelerard.html">Pleyel & Erard</a></li>
 
  <li><a href="chickering.html">Chickering</a>
                 <ul>
                   <li><a href="castiron.html">Cast Iron</a></li>
                   <li><a href="overstring.html">Overstring</a></li>
  </ul>
</li>
  <li><a href="hammerpedals.html">Hammers & Pedals</a>
                 <ul>
                   <li><a href="evolutionhammers.html">Evolution</a></li>
  </ul>
</li>
  <li><a href="yamaha.html">Yamaha</a></li>
 
  <li><a href="modernday.html">Modern Day</a>
  <ul>
  <li><a href="electronicpiano.html">Electronic</a></li>
  </ul>
</li>
 
  <li><a href="form.html">Form</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="references.html">References</a></li>
  </ul>
</li>
</ul>
 
 
 <div id="main">
 <h1>The Development of the Piano</h1>
   <div id="text">
   <p>This website is a brief introduction about the.......etc etc</p>
   </div>
   <div id="image">
   <img src="file:///I|/mmcourse/babygrand.jpg" />
   </div>
</div>
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 49 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Oops!

I got carried away. The fix had to do with the sub-menu placement; compare the code below to yours. The rest of the changes have to do with ridding you of absolute positioning (AP) headaches. There exist places where AP is the way to go, e.g. this menu. Otherwise it is a poor practice for layouts. It is reminiscent of newspaper layout boards, but it has little place in web layout which is not static, but dynamic.

I would change the structure a little bit to allow for more freedom with layout cases, but that's for another day. Smile

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <style type="text/css">
 
      body {
        margin: 0;
        font: 100%/1.5 arial, verdana, sans-serif;
        }
 
      p {
        font-size: 1em;
        line-height; 1.5;
        margin: 1.5em 0;
        }
 
      h1 {
        margin: 0;
        text-align: center;
        }
 
      img {
        outline: 1px dotted black; /*for visualization*/
        }
 
      ul {
        font-size: .75rem;
        margin: 1.5em 1.5em 0 0;
        padding: 0;
        list-style: none;
        width: 150px;
        float: left;
        }
 
      ul li {
        position: relative;
        }
 
      #navigation>li:first-child {
        margin-bottom: 1.5em;  /*separates 'home' from rest of items*/
        }
 
      li ul {
        display: none;
        }
 
      li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
        border-top: 1px solid #ffffff;
        padding: 5px 15px;
        background-color: #1e7c9a;
        white-space: nowrap;
        }
 
      ul li a:hover {
        background-color: #3b3b3b;
      }
 
      li:hover ul {
        display:block;
        margin-top: 0;
        position: absolute;
        left: 100%;
        top: 0;
        }
 
      #container { 
        padding: 0 1.5em;
        }
 
      #main {
        overflow: hidden;
        }
 
    </style>
  </head>
 
  <body>
    <div id="container">
      <p id="logo">
	<img src="file:///I|/mmcourse/imagesCAZ5JNHL.jpg" 
	     alt="Home Button"/>
      </p>
 
      <ul id="navigation">	
	<li><a href="homepage.html">Home</a></li>
 
	<li><a href="creation.html">Creation</a>
          <ul>
            <li><a href="cristofori.html">Cristofori</a></li>
            <li><a href="silbermann.html">Silbermann</a></li>
          </ul>
        </li>
 
	<li><a href="viennese.html">Viennese</a>
          <ul>
            <li><a href="stein.html">Stein</a></li>
            <li><a href="zumpe.html">Zumpe</a></li>
            <li><a href="graf.html">Graf</a></li>
            <li><a href="schmidt.html">Schmidt</a></li>
	  </ul>
	</li>
 
	<li><a href="broadwood.html">Broadwood</a>
          <ul>
            <li><a href="evolutionbroadwood.html">Evolution</a></li>
	  </ul>
	</li>
 
	<li><a href="othertypes.html">Other Types</a>
          <ul>
            <li><a href="upright.html">Upright</a></li>
            <li><a href="giraffe.html">Giraffe</a></li>
            <li><a href="square.html">Square</a></li>
	  </ul>
	</li>
 
	<li><a href="pleyelerard.html">Pleyel & Erard</a></li>
 
	<li><a href="chickering.html">Chickering</a>
          <ul>
            <li><a href="castiron.html">Cast Iron</a></li>
            <li><a href="overstring.html">Overstring</a></li>
	  </ul>
	</li>
 
	<li><a href="hammerpedals.html">Hammers & Pedals</a>
          <ul>
            <li><a href="evolutionhammers.html">Evolution</a></li>
	  </ul>
	</li>
 
	<li><a href="yamaha.html">Yamaha</a></li>
 
	<li><a href="modernday.html">Modern Day</a>
	  <ul>
	    <li><a href="electronicpiano.html">Electronic</a></li>
	  </ul>
	</li>
 
	<li><a href="form.html">Form</a></li>
 
	<li><a href="contact.html">Contact</a></li>
 
	<li><a href="references.html">References</a></li>
      </ul>
 
      <div id="main">
	<h1>The Development of the Piano</h1>
 
	<p>This website is a brief introduction about the.......etc etc</p>
 
	<p>
	  <img src="file:///I|/mmcourse/babygrand.jpg"
	       alt="[Photo of a baby grand piano]" />
	</p>
      </div>/ <!-- end main -->
    </div>    <!-- end container -->
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.