1 reply [Last post]
CSSrookie
Offline
newbie
Last seen: 11 years 52 weeks ago
Timezone: GMT-7
Joined: 2010-12-02
Posts: 2
Points: 3

I am using a CSS menu provided by tanfa and i have gotten it down to my color schemes, but i am not able to add href to the H2 heading when i do they as dispplayed as the listed items, how can i avoid this. Also when i am on the page so that when the user clicks on that heading or a list can i change the color of that heading or page with CSS only, and how would i accomplish this
any help is appreciated

<!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=iso-8859-1"></meta>
 
<title>Vertical CSS Menu Tutorial ~ Example Page 7</title>
 
<meta name="description" content="Example 7 - CSS Vertical Popout Menu Tutorial"></meta>
 
<link rel="shortcut icon" href="../../../favicon.ico" />
 
<link href="tanfa.css" rel="stylesheet" type="text/css">
 
<style type="text/css" media="screen">
 
 
 
/**************** menu coding *****************/
 
#menu {
 
width: 12em;
 
background: #eee;
 
}
 
 
 
#menu ul {
 
list-style: none;
 
margin: 0;
 
padding: 0;
 
}
 
 
 
#menu a, #menu h2 {
 
font: bold 11px/16px arial, helvetica, sans-serif;
 
display: block;
 
border-width: 1px;
 
border-style: solid;
 
border-color: #ccc #888 #555 #bbb;
 
margin: 0;
 
padding: 2px 3px;
 
}
 
 
 
#menu h2 {
 
color: #fff;
 
background: #000;
 
text-transform: uppercase;
 
}
 
 
 
#menu a {
 
color: #000;
 
background: #efefef;
 
text-decoration: none;
 
}
 
 
 
#menu a:hover {
 
color: #a00;
 
background: #fff;
 
}
 
 
 
#menu li {
 
position: relative;
 
}
 
 
 
#menu ul ul ul {
 
position: absolute;
 
top: 0;
 
left: 100%;
 
width: 100%;
 
}
 
 
 
div#menu ul ul ul,
 
div#menu ul ul li:hover ul ul
 
{display: none;}
 
 
 
div#menu ul ul li:hover ul,
 
div#menu ul ul ul li:hover ul
 
{display: block;}
 
 
 
</style>
 
<!--[if IE]>
 
<style type="text/css" media="screen">
 
 #menu ul li {float: left; width: 100%;}
 
</style>
 
<![endif]-->
 
<!--[if lt IE 7]>
 
<style type="text/css" media="screen">
 
body {
 
behavior: url(csshover.htc);
 
font-size: 100%;
 
} 
 
#menu ul li {float: left; width: 100%;}
 
#menu ul li a {height: 1%;} 
 
 
 
#menu a, #menu h2 {
 
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
 
} 
 
 
 
</style>
 
<![endif]-->
 
</head>
 
<body id="www-tanfa-co-uk">
 
<div id="pagetop">
 
<a href="../../../index.html" title="tanfa :: Home Page" id="toplink"></a>
 
<h1>CSS Pop Out Menu Tutorial Code</h1>
 
<h2>Stage 7 - Fully Working Example</h2>
 
<h3>&laquo; <a href="tutorial-v.html#vs7">return to tutorial</a> :: Stages 
 
[<a href="vs1.html" title="Vertical Example 1">1</a>] 
 
[<a href="vs2.html" title="Vertical Example 2">2</a>] 
 
[<a href="vs3.html" title="Vertical Example 3">3</a>] 
 
[<a href="vs4.html" title="Vertical Example 4">4</a>] 
 
[<a href="vs5.html" title="Vertical Example 5">5</a>] 
 
[<a href="vs6.html" title="Vertical Example 6">6</a>] 
 
<span>[7]</span>
 
</h3>
 
</div>
 
<!-- start Menu HTML -->
 
<div id="menu">
 
<ul>
 
  <li><h2>CSS Drop Down Menus</h2>
 
    <ul>
 
      <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>
 
        <ul>
 
          <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>
 
          <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>
 
          <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
 
        </ul>
 
      </li>
 
    </ul>
 
  </li>
 
</ul>
 
 
 
<ul>
 
  <li><h2>Vertical CSS Pop-Out Menu</h2>
 
    <ul>
 
      <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
 
      <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
 
        <ul>
 
          <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a>	
 
            <ul>
 
              <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
 
              <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>		
 
              <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
 
              <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
 
              <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>			
 
              <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
 
            </ul>
 
          </li>
 
        </ul>
 
      </li>
 
    </ul>
 
  </li>
 
</ul>
 
 
 
<ul>
 
  <li><h2>Horizontal Drop &amp; Pop Menu</h2>
 
    <ul>
 
      <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
 
      <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
 
        <ul>
 
          <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a>
 
            <ul>
 
              <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>
 
              <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>			
 
              <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>
 
              <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>
 
              <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>			
 
              <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>
 
            </ul>
 
          </li>
 
        </ul>
 
      </li>
 
    </ul>
 
  </li>
 
</ul>							
 
</div>
 
</body>
 
</html>

CSSrookie
Offline
newbie
Last seen: 11 years 52 weeks ago
Timezone: GMT-7
Joined: 2010-12-02
Posts: 2
Points: 3

Any one have any ideas on

Any one have any ideas on this ?? please help if somoen knows soemthing about href to heading ont his particular CSS menu