Hover Over Menu Displays New Menu

[HokieTracks]

Hi, I have been trying to figure this out for a while but nothing seems to work. I have this menu with a bar underneath it.

 

 

What I want to do is make it so when someone hovers over a menu option more options appear in the bar below the menu. Here is my code:

 

<div id="horizmenu">
<div class="menucontainer">
<ul>
<div class="home"><li><a href="http://hokietracks.com/home/" title="Home"></a></li></div>
<div class="news"><li><a href="http://hokietracks.com/home/" title="News"></a></li></div>
<div class="forums"><li><a href="http://hokietracks.com/home/forum.php" title="Forums"></a></li></div>
<div class="pictures"><li><a href="http://hokietracks.com/home/photo.php" title="Pictures"></a></li></div>
<div class="videos"><li><a href="http://hokietracks.com/home/video.php" title="Videos"></a></li></div>
<div class="links"><li><a href="http://hokietracks.com/home/" title="Links"></a></li></div>
<img src="/home/images/search.jpg">
<div class="bar"><img src="/home/images/bar.png"></div>
</div>
</div>
</ul>

 

.menucontainer {
height:31px;
width:1000px;
}

.home a {
height:22px;
background: url("http://hokietracks.com/home/images/home.jpg") no-repeat;
display:block;
padding-top: 5px;
padding-bottom: 10px;
font-size:100%;
font-family:  Helvetica;
font-weight:bold;
text-decoration: none;
text-align: center;
letter-spacing: -0.5px;
}

.home a:hover {
background: url("http://hokietracks.com/home/images/home2.jpg") no-repeat;
text-decoration: none;
}

.news a {
height:22px;
background: url("http://hokietracks.com/home/images/news.jpg") no-repeat;
display:block;
padding-top: 5px;
padding-bottom: 10px;
font-size:100%;
font-family:  Helvetica;
font-weight:bold;
text-decoration: none;
text-align: center;
letter-spacing: -0.5px;
}

.news a:hover {
background: url("http://hokietracks.com/home/images/news2.jpg") no-repeat;
text-decoration: none;
}

.forums a {
height:22px;
background: url("http://hokietracks.com/home/images/forums.jpg") no-repeat;
display:block;
padding-top: 5px;
padding-bottom: 10px;
font-size:100%;
font-family:  Helvetica;
font-weight:bold;
text-decoration: none;
text-align: center;
letter-spacing: -0.5px;
}

.forums a:hover {
background: url("http://hokietracks.com/home/images/forums2.jpg") no-repeat;
text-decoration: none;
}

.pictures a {
height:22px;
background: url("http://hokietracks.com/home/images/pictures.jpg") no-repeat;
display:block;
padding-top: 5px;
padding-bottom: 10px;
font-size:100%;
font-family:  Helvetica;
font-weight:bold;
text-decoration: none;
text-align: center;
letter-spacing: -0.5px;
}

.pictures a:hover {
background: url("http://hokietracks.com/home/images/pictures2.jpg") no-repeat;
text-decoration: none;
}

.videos a {
height:22px;
background: url("http://hokietracks.com/home/images/videos.jpg") no-repeat;
display:block;
padding-top: 5px;
padding-bottom: 10px;
font-size:100%;
font-family:  Helvetica;
font-weight:bold;
text-decoration: none;
text-align: center;
letter-spacing: -0.5px;
}

.videos a:hover {
background: url("http://hokietracks.com/home/images/videos2.jpg") no-repeat;
text-decoration: none;
}

.links a {
height:22px;
background: url("http://hokietracks.com/home/images/links.jpg") no-repeat;
display:block;
padding-top: 5px;
padding-bottom: 10px;
font-size:100%;
font-family:  Helvetica;
font-weight:bold;
text-decoration: none;
text-align: center;
letter-spacing: -0.5px;
}

.links a:hover {
background: url("http://hokietracks.com/home/images/links2.jpg") no-repeat;
text-decoration: none;
}

ul {
    overflow: hidden;
    list-style-type:none;
    margin-left:-40px;
    margin-top:-50px;
    }

* html ul {  /IE6 and below require this to enclose the floats*/
    height: 1px;
    overflow: visible;
    }

li {
    float:left;
    min-width: 109px;
    }

 

Any ideas as to how to approach doing this?

[Axeia]

You're after Eric Meyers pure CSS popups.

Basically you nest everything inside the <a> tag of the button, so let's take news as an example and pretend it will have 2 categories.

And yes, it needs to be <a> that the hover is applied on, as internet explorer as always doesn't follow the standards and doesn't support it on any element as it's supposed to.

 

You have:

<div class="news"><li><a href="http://hokietracks.com/home/" title="News"></a></li></div>

So let's get those 2 links in there.

<div id="horizmenu">
<div class="menucontainer">
<ul>  
<div class="home"><li><a href="http://hokietracks.com/home/" title="Home"></a></li></div>
<div class="news">
    <li>
      <a href="http://hokietracks.com/home/" title="News">    
        <span class='invisi'>
          <a href='/archive/'> Archive </a>
          <a href='/current/'> Current </a>
        </span>
      </a>
    </li>
  </div>
<div class="forums"><li><a href="http://hokietracks.com/home/forum.php" title="Forums"></a></li></div>
<div class="pictures"><li><a href="http://hokietracks.com/home/photo.php" title="Pictures"></a></li></div>
<div class="videos"><li><a href="http://hokietracks.com/home/video.php" title="Videos"></a></li></div>
<div class="links"><li><a href="http://hokietracks.com/home/" title="Links"></a></li></div>
<img src="/home/images/search.jpg">
<div class="bar"><img src="/home/images/bar.png"></div>
</div>
</div>
</ul>

Now let's hide the extra links trough CSS,

.menucontainer div a span.invisi
{
    display: none;
}

Now how to make them pop up?

.menucontainer div a:hover span.invisi
{
    display: block;
}

 

Now that we got that over, you're doing one thing completely wrong with your menu and one thing is open for improvement.

First what you're doing wrong, a <div> should NEVER be inside an <ul>. The only things <ul>'s are supossed to contain are <li>'s, ignore the standards and all bets are off as to how different browsers handle your non-standard HTML. It already is a guessing game writing cross-browser compatible HTML, you're making it worse.

Second, if something is suppossed to be unique on a page (as every single one of your menu entries seems to be) then you ought to use id's, not classes. id='news' instead of class='news'.  Works exactly the same in CSS besides having to use a # instead of a dot.

So #menu instead of .menu

[ToonMariner]

li should NOT be wrapped in a div! li should be the drect descendant of the ul...

 

don't make the mistake of adding more html than you need...

 

http://tinyurl.com/deh3o4

[shadiadiph]

here try one of mine and play with it

 

menu.css

 

#menu{
width: auto;
height: 21px;
background: #296890;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#menu ul li{
float:left;
position:relative;
width: auto;
list-style: none;
font-family: arial;
font-size: 10px;
font-weight: bold;
text-align: center;
color: #fff;
vertical-align: middle;
border: 0px solid #ccc;
background: #296890;
margin: 0px 0px 0px 0px;
padding: 3px 10px 3px 2px;
}
#menu ul li > a {
    display: block;
    width: auto;
    /* ... */
}
#menu ul li a{
text-decoration: none;
color: #fff;
}
#menu ul li:hover,
#menu ul li:hover a{
background: #2c9dd8;
}
#menu ul li ul.nav1 li > a {
display: block;
width: 100px;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
    /* ... */
}
#menu ul li ul.nav1{
width: 106px;
display:none;
position:absolute;
list-style: none;
top: 21px;
left: 0px;
border: 1px solid #b0bec7;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
}
#menu ul li:hover ul.nav1{
display: block;
width: 106px;
background: #fff;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
}
#menu ul li:hover ul.nav1 li{
width: 100px;
background: #fff;
font-weight: normal;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
}
#menu ul li:hover ul.nav1 li a{
width: auto;
font-size: 10px;
font-family: arial, tahoma;
border: 0px solid #ff0000;
color: #000;
background: #fff;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
}
#menu ul li:hover ul.nav1 li a:hover{
width: auto;
color: #ff6600;
background: #fff;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
}

 

menu.php

 

<?

?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>buyandsell123.com</title>
<link rel="stylesheet" type="text/css" href="css/menu.css" />

</head>
<body>

<ul>


<li><a href="some.php">Link 1</a></li>

<li><a href="#">Link 2</a></li>
<ul class="nav1">
<li><a href="some.php">S2 Menu 1</a></li>
<li><a href="some.php">S1 Menu 2</a></li>
</ul>
</li>

<li><a href="#">LINK 3</a>
<ul class="nav1">
<li><a href="some.php">S3 Menu 1</a></li>
<li><a href="some.php">S3 Menu 2</a></li>
</ul>
</li>

<li><a href="some.php">LINK 4</a></li>

</ul>
</body>
</html>

 

just make sure you use

 

<?
include ("menu.php");
?>

 

and change the main html doc and save it as a php doc you can use this throu out your site in between the div where you want the menu to appear if you want to edit the menu you will only have to edit the menu.php or menu.cc not each and every page like i have done in the past until recently

 

 

 

[HokieTracks]

You're after Eric Meyers pure CSS popups.

Basically you nest everything inside the <a> tag of the button, so let's take news as an example and pretend it will have 2 categories.

And yes, it needs to be <a> that the hover is applied on, as internet explorer as always doesn't follow the standards and doesn't support it on any element as it's supposed to.

 

You have:

<div class="news"><li><a href="http://hokietracks.com/home/" title="News"></a></li></div>

So let's get those 2 links in there.

<div id="horizmenu">
<div class="menucontainer">
<ul>  
<div class="home"><li><a href="http://hokietracks.com/home/" title="Home"></a></li></div>
<div class="news">
    <li>
      <a href="http://hokietracks.com/home/" title="News">    
        <span class='invisi'>
          <a href='/archive/'> Archive </a>
          <a href='/current/'> Current </a>
        </span>
      </a>
    </li>
  </div>
<div class="forums"><li><a href="http://hokietracks.com/home/forum.php" title="Forums"></a></li></div>
<div class="pictures"><li><a href="http://hokietracks.com/home/photo.php" title="Pictures"></a></li></div>
<div class="videos"><li><a href="http://hokietracks.com/home/video.php" title="Videos"></a></li></div>
<div class="links"><li><a href="http://hokietracks.com/home/" title="Links"></a></li></div>
<img src="/home/images/search.jpg">
<div class="bar"><img src="/home/images/bar.png"></div>
</div>
</div>
</ul>

Now let's hide the extra links trough CSS,

.menucontainer div a span.invisi
{
    display: none;
}

Now how to make them pop up?

.menucontainer div a:hover span.invisi
{
    display: block;
}

 

Now that we got that over, you're doing one thing completely wrong with your menu and one thing is open for improvement.

First what you're doing wrong, a <div> should NEVER be inside an <ul>. The only things <ul>'s are supossed to contain are <li>'s, ignore the standards and all bets are off as to how different browsers handle your non-standard HTML. It already is a guessing game writing cross-browser compatible HTML, you're making it worse.

Second, if something is suppossed to be unique on a page (as every single one of your menu entries seems to be) then you ought to use id's, not classes. id='news' instead of class='news'.  Works exactly the same in CSS besides having to use a # instead of a dot.

So #menu instead of .menu

 

Ok, I tried doing all of that including getting rid of the div classes and using ids. But, this happens:

 

 

Here is the HTML code that I tried:

 

<div id="horizmenu">
<div id="menucontainer">
<ul>
<li id="home"><a href="http://hokietracks.com/home/" title="Home"></a></li>
<li id="news">
      <a href="http://hokietracks.com/home/" title="News"> 
        </li>  
          <span class='invisi'>
            <li id="second-menu">
              <a href='/archive/'> Archive </a>
              <a href='/current/'> Current </a>
            </li>
          </span>
        </a>
<li id="forums"><a href="http://hokietracks.com/home/forum.php" title="Forums"></a></li>
<li id="pictures"><a href="http://hokietracks.com/home/photo.php" title="Pictures"></a></li>
<li id="videos"><a href="http://hokietracks.com/home/video.php" title="Videos"></a></li>
<li id="links"><a href="http://hokietracks.com/home/" title="Links"></a></li>
<div id="search">
<form action="http://hokietracks.com/home/search.php" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-5087843239980019:eq6of4-nqgl" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="ISO-8859-1" />
    <input type="text" name="q" size="20" />
    <div style="position:relative; top:-21px; left:153px;"><input type="image" value="Search" src="/home/images/go.png" height="20" border="0" alt="SUBMIT!" name="sa"></div>

  </div>
</form>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</div>
<div id="bar"><img src="/home/images/bar.png"></div>
</div>
</div>
</ul>
<br>

 

And here is the CSS:

 

.menucontainer div a span.invisi
{
    display: none;
}

.menucontainer div span.invisi
{
    display: block;
} 

 

And shadiadiph, I think completely replacing my menu is a bit over dramatic for right now. Thanks though! 

[shadiadiph]

no problem but did you understand what i mean about inserting the menu using include once like on mine that way if you want to change the menu you only have to change the one page not 300 pages which i know can be time consuming.

I spent 100 hours when i was building a site just changing the menus on each page before The only reason i posted my menu script is because it works just need to change the colours (color) on it and font sizes

[HokieTracks]

Yeah, I understand that. I was already doing that because this menu is part of a whole layout.php file that is included on every page. But, I may try out your menu when I have some time later just for right now I am fine with using mine.

[shadiadiph]

menu.css

 

#menu{
width: auto;
height: 31px;
width: 100px;
background: #296890;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#menu ul li{
float:left;
position:relative;
width: auto;
list-style: none;height:22px;
background: url("http://hokietracks.com/home/images/home.jpg") no-repeat;
display:block;
padding-top: 5px;
padding-bottom: 10px;
font-size:100%;
font-family:  Helvetica;
font-weight:bold;
text-decoration: none;
text-align: center;
letter-spacing: -0.5px;}

#menu ul li > a {
    display: block;
    width: auto;
    /* ... */
}
#menu ul li a{
text-decoration: none;
color: #fff;
}
#menu ul li:hover,
#menu ul li:hover a{
background: url("http://hokietracks.com/home/images/home2.jpg") no-repeat;
}
#menu ul li ul.nav1 li > a {
display: block;
width: 100px;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
    /* ... */
}
#menu ul li ul.nav1{
width: 106px;
display:none;
position:absolute;
list-style: none;
top: 21px;
left: 0px;
border: 1px solid #b0bec7;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
}
#menu ul li:hover ul.nav1{
display: block;
width: 106px;
background: #fff;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
}
#menu ul li:hover ul.nav1 li{
width: 100px;
background: #fff;
font-weight: normal;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
}
#menu ul li:hover ul.nav1 li a{
width: auto;
font-size: 10px;
font-family: arial, tahoma;
border: 0px solid #ff0000;
color: #000;
background: #fff;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
}
#menu ul li:hover ul.nav1 li a:hover{
width: auto;
color: #ff6600;
background: #fff;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
}

 

 

menu.php

<?

?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>buyandsell123.com</title>
<link rel="stylesheet" type="text/css" href="css/menu.css" />

</head>
<body>

<ul>


<li><a href="http://hokietracks.com/home/">Home</a></li>

<li><a href="http://hokietracks.com/home/">News</a></li>
<ul class="nav1">
<li><a href="'archive.php">Archive</a></li>
<li><a href="current.php">Current</a></li>
</ul>
</li>

<li><a href="http://hokietracks.com/home/forum.php">Forums</a></li>
<li><a href="http://hokietracks.com/home/pictures.php">Pictures</a></li>
<li><a href="http://hokietracks.com/home/video.php">Videos</a></li>
<li><a href="http://hokietracks.com/home/links.php">Links</a></li>


<li><a href="some.php">LINK 4</a></li>

</ul>
</body>
</html>

 

 

 

 

index.php

<div id="horizmenu">
<div class="menucontainer">

<?
include("menu.php");
?> 
<img src="/home/images/search.jpg">
<div class="bar"><img src="/home/images/bar.png"></div>
</div>
</div>

 

the above should work

probably just need to change the background color on line 5 of the menu.css