2 Replies - 1090 Views - Last Post: 18 May 2011 - 09:17 PM

#1 mdmartiny  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 85
  • Joined: 28-May 10

First time doing css multi level menu

Posted 16 May 2011 - 03:25 PM

Hello Everyone

This is my first attempt at doing a css dropdown menu. I was reading a tutorial about how to do it. I followed the steps as they said that I should. However I am unable to get the code to work properly. I get the first level to work properly but when I move the mouse over the links that say American League or National League. It does not show the list of the teams.

Was the tutorial wrong or did I do something wrong. I am not familiar with doing multi level dropdown menus like this but I would like to learn.

This is the code that I am using to make the menu

<style>
.side_nav {
	width:100px;
	font-size:12px;
}
.side_nav ul {
	margin: 0px;
	padding: 0px;
}
.side_nav ul li {
	height: 25px;
	line-height: 25px;
	padding-left: 10px;
	list-style: none;
	cursor:pointer;
}
.side_nav ul li:hover {
	background-color: #333;
	position: relative;
}
.side_nav ul ul {
	width: 150px;
	display: none;
	position: absolute;
	left: 75px;
	top: 5px;
}
.side_nav ul li:hover ul {
	display:block;
}
.side_nav ul ul li {
	width: 150px;
	float: left;
	display:inline;
}
.side_nav ul ul li:hover {
	text-decoration:underline;
	border:none;
}
.side_nav li:hover ul li ul {
	display:none;
}
.side_nav ul > ul > ul > ul ul li ul {
	left:110px; 
	background-color:#0099CC;
}

.side_nav ul > ul ul li:hover ul {
	display:block;
}
</style>
</head>

<body>
<div class="side_nav">
   <ul>
      <li>Team
         <ul>
            <li>American League
               <ul>
                  <li>Baltimore Orioles</li>
                  <li>Boston Red Sox</li>
                  <li>Chicago White Sox</li>
                  <li>Cleveland Indians</li>
                  <li>Detroit Tigers</li>
                  <li>Kansas City Royals</li>
                  <li>Los Angeles Angels</li>
                  <li>Minnesota Twins</li>
                  <li>New York Yankees</li>
                  <li>Oakland Athletics</li>
                  <li>Seattle Mariners</li>
                  <li>Tampa Bay Rays</li>
                  <li>Texas Rangers</li>
                  <li>Toronto Blue Jays</li>
               </ul>
            </li>
            <li>National League
               <ul>
                  <li>Arizona Diamondbacks</li>
                  <li>Atlanta Braves</li>
                  <li>Chicago Cubs</li>
                  <li>Cincinatti Reds</li>
                  <li>Colorado Rockies</li>
                  <li>Florida Marlins</li>
                  <li>Houston Astros</li>
                  <li>Los Angeles Dodgers</li>
                  <li>Milwaukee Brewers</li>
                  <li>Philadelphia Phillies</li>
                  <li>Pittsburg Pirates</li>
                  <li>St. Louis Cardinals</li>
                  <li>San Diego Padres</li>
                  <li>San Fransico Giants</li>
                  <li>Washington Nationals</li>
               </ul>
            </li>
         </ul>
      </li>
      <li>Year</li>
   </ul>



Any help or explanation would be helpful

Is This A Good Question/Topic? 0
  • +

Replies To: First time doing css multi level menu

#2 crownRoyal89  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 47
  • Joined: 10-May 11

Re: First time doing css multi level menu

Posted 16 May 2011 - 04:01 PM

All of the tutorials I've check out point that the menu's are actually made in div's not classes.

This site maybe of some help to you.

http://www.seoconsul...menus/tutorial/

Also I noticed that your Style tag does not contain the type specified.

<style type="text/css">\

</style>



Hope This is helpful
Was This Post Helpful? 0
  • +
  • -

#3 mdmartiny  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 85
  • Joined: 28-May 10

Re: First time doing css multi level menu

Posted 18 May 2011 - 09:17 PM

View PostcrownRoyal89, on 16 May 2011 - 11:01 PM, said:

All of the tutorials I've check out point that the menu's are actually made in div's not classes.

This site maybe of some help to you.

http://www.seoconsul...menus/tutorial/

Also I noticed that your Style tag does not contain the type specified.

<style type="text/css">\

</style>



Hope This is helpful


Thank You that tutorial did help now it is working the way that I want it to
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1