View Single Post
Old 02-06-2017, 01:54 AM   #5
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

ok a very simple sidebar deop down i hashed together for my snippets, its st to display active category based on body id.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>menu</title>
<style>

ul{	list-style:none;
	position:relative;	float:left;	margin:0;	padding:0}
	ul li { clear:both;}

 ul a{	display:block;	color:#333;	text-decoration:none;
	line-height:32px;	padding:0 15px;}

 ul li{	position:relative;	float:left;	margin:0;	padding:0; clear:both}

 ul li a:link{	background:#f6f6f6}

 ul ul{	display:none;	position: relative ;	left:0;	background:#fff; clear:both;
	padding:0}

ul ul li{	float:none;	width:200px}

 ul ul a{	line-height:120%;	padding:10px 15px}

 ul ul ul{	top:0;	left:100%}

 ul li:hover > ul{	display:block}

<!--The hilite code-->
body.home  ul li a:link.home,
body.about ul li a:link.about,
body.services u l li a:link.services,
body.products ul li a:link.products,
body.contact ul li a:link.contact {
   background-color: red ;  }
</style>
</head>
<body class="about">
<h1>CSS Drop Down Menu</h1>
<div>
<ul>
  <li><a  class="home" href="#">Home</a></li>
  <li ><a class="services" href="#">Services</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
         <li class="Deep Menu 2"><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>  <!--  end services-->
  
  
  <li><a class="about" href="#">About</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a class="products" href="#">Products</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>   <!-- end products-->
  <li><a class="contact" href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote