How to make sub menues in a dropdown menu?
I have a drop down menu made in css. When you hover over the text (<ul>) the menu appears (the <li> appears). I wanted to know, how to make a submenue, that when you hover over the <li>'s an other menu (submenu) would appear and would offer other options. -Windows xp
Hi Bobicool,http://users.tpg.com.au/j_birch/plugins/superfish/
- Andy
This is a bit complicated...I'm only starting in html/css php/mysql
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<META NAME="description" CONTENT="The teen tech podcast is a tech podcast talking about everything tech related! Also there are reviews, news and a forum! If you get bored your stupid!" />
<META NAME="keywords" CONTENT="teen, tutorials, web, reviews, news, forum, fun, technology, podcast, tech, teentechpodcast, twitter, etc..." />
<META NAME="AUTHOR" CONTENT="someone">
<title>TeenTechGuy.com, One teen, One guy and a massive industry to cover! **Pre Pre alpha**</title>
<link rel="stylesheet" href="style3.css" type="text/css" media="all">
<link rel="shortcut icon" type="image/png" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" href="menu/menu_style.css" media="all">
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/accordeon.js"></script>
</head>
<body>
<!-- all the page -->
<div id="wrapper">
<!-- The header -->
<div id="header">
<a href="index2.htm" ><img src="images/logo3.png" width="247" height="104" alt="Logo" a href="index2.htm" class="no_cadre"></a>
<!-- The links -->
<div class="menu">
<ul>
<li><a id="current" href="index.html" target="_self" >Home</a>
</li>
<li><a href="news,html" target="_self" >News</a>
<ul>
<li><a href="vidgamenews.html" target="_self">Video Game News</a></li>
<li><a href="" target="_self">Tech News</a></li>
</ul>
</li>
<li><a href="reviews.html" target="_self" >Reviews</a>
<ul>
<li><a href="vidreviews.html" target="_self">Video Game Reviews</a></li>
<li><a href="hardwarereviews.html" target="_self">Hardware Reviews</a></li>
<li><a href="softreviews.html" target="_self">Software Reviews</a></li>
<li><a href="otherreviews.html" target="_self">Others...</a></li>
</ul>
</li>
<li><a href="teentechpodcast.html" target="_self" >Podcast</a>
<ul>
<li><a href="teentechguy.html" target="_self">Teen Tech Guy</a></li>
<li><a href="fav.html" target="_self">My Favorites</a></li>
</ul>
</li>
<li><a href="tutorials.html" target="_self" >Tutorials</a>
<ul>
<li><a href="gimptuts.html" target="_self">Gimp Tutorials</a></li>
<li><a href="csstuts.html" target="_self">CSS Tutorials</a></li>
<li><a href="htmltuts.html" target="_self">HTML tutorials</a></li>
<li><a href="windowstuts.html" target="_self">Windows Tutorials</a></li>
<li><a href="vidtuts.html" target="_self">Video Tutorials</a></li>
<li><a href="othertuts.html" target="_self">Others...</a></li>
</ul>
</li>
<li><a href="http://techforums.freeforums.org/index.php" target="_self" >Forum</a>
</li>
<li><a href="about.html" target="_self" >About</a>
<ul>
<li><a href="aboutme.html" target="_self">About Me</a></li>
<li><a href="aboutsite.html" target="_self">About the site</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="sous"><img src="images/sous.png" style="padding:0px" /></div>
<!-- End of header -->
<!--
<div id="menulinks">
</div>
-->
<!--
<div id="page_top">
</div>
-->
<!-- All the page content is here **The container** -->
<div id="page_container">
<!-- Top of the conatainer (rounded corners) -->
<h2 id="page_top">Topic of the day:</h2>
<!-- Where the text/images etc.. goes -->
<div id="contentarea">
<p><a href="chamilionaire.mp3">Chamilionaire</a></p>
<script language="javascript">
<!--
var part1 = "raphael_dore";
var part2 = "hotmail.com?subject=Hello Raph";
var part3 = "Contact me";
document.write('<a href="mai' + 'lto:' + part1 + '@' + part2 + '">');
document.write(part3 + '</a>');
// -->
</script>
</div>
<!-- Sidebar/menu to naviguate in the site -->
<div id="sidebar">
<div class="bloc">
<h3>Navigation</h3>
<h2 class="ascenseur">Tests</h2>
<div>
<ul>
<li>Mp3's</li>
<li>TV's</li>
<li>Games</li>
<li>Software</li>
<li>Hardware</li>
</ul>
</div>
<h2 class="ascenseur">Categories</h2>
<div>
<ul>
<li>Games</li>
<li>Tech</li>
<li>Web coding/web design</li>
</ul>
</div>
<h2 class="ascenseur">Reviews</h2>
<div>
<ul>
<li>Mp3's</li>
<li>TV's</li>
<li>Games</li>
<li>Software</li>
<li>Hardware</li>
</ul>
</div>
</div>
<div class="Finbloc"></div>
</div>
<!-- The footer -->
<div id="footer">
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="CSS Valide !">
</a>
<a href="http://www.twitter.com/videogameteen" ><img src="images/twitter.png" width="65px" height="18px" title="Join the Video Game Teen on twitter!" alt="www.twitter.com/videogameteen" class="no_cadre"></a>
Coded and designed by: Teen tech guy, all rigths reserved</p>
</div>
<!-- End of footer -->
</div> <!-- end page_container -->
</div> <!-- end wrapper -->
</body>
</html>
and here is the css code for the menu:
Code:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:18px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#ffffff;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#gggggg;
text-decoration:none;
}
.menu li ul{
background:#e10606;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#3386b6;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
backgroud:url(images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
.menu
{
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}
Last edited by bobicool; 07-21-2009 at 05:45 PM .
There is a fairly simple guide to creating a CSS drop down menu here . It is up to you to make it look pretty though.
Simple CSS dropdown
Here is a simple CSS dropdown menu I whipped up for ya...HTML(index.html): CSS(styles.css):
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Bookmarks