|
CSS - Pure Css Drop Down Menu
Hi guys,
Say I have a verticle menu, down the left hand side of my site. I want it so when you hover over each link, there are additional links that fly out to the right - of course you got that by the thread name. However, I'm having a bit of trouble, I don't know where to start really as many of the tutorials found are flawed in one way or another (that i've found). Some manage to push the rest of the nav links under it down, so basically Im asking how do I manage to create a nav where the fly out menu manages to 'stick' at the top of all content (to the right and the links under), pure CSS. Any additional tips on how to do this would be brilliant. Thanks in advance, Joe. Similar TutorialsI searched on google so that to build a pure CSS drop down menu. I have successfully followed some of the tutorials. However I always get stuck in some place or another. I have tried another attempt to do this but I am not getting the wanted results. Basically I want to make the drop down menu work on IE6, IE7 and FireFox. The first problem I face on IE7 is that the menu is not always displayed where I want it (under the link element) and on FireFox it is displayed ON it and not under it. The following is the code. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>scjchoir</title>
<style>
/***** ribben *****/
div#ribben{
width: 506px;
margin: 0 auto;
padding:0px;
}
div#ribben div#nav2{
background: #111;
height: 40px;
}
div#ribben div#nav2 ul{
margin: 0;
padding: 0;
list-style: none;
}
div#ribben div#nav2 ul li{
float: left;
margin: 0px;
padding-top: 6px;
}
div#ribben div#nav2 ul li a:link,
div#ribben div#nav2 ul li a:visited {
float: left;
margin: 0 1px 0 0;
font-size: 8pt;
font-weight: normal;
text-decoration: none;
padding: 6px 15px;
color: #ccc;
font-weight: bold;
}
div#ribben div#nav2 ul li a:hover,
div#ribben div#nav2 ul li a:active {
color: #fff;
}
div#ribben div#banner img{
display:block;
}
/***** submenu *****/
div#nav2 ul li ul {
display:none;
position:absolute;
background:#111;
color:#fff;
clear:both;
}
div#nav2 ul li:hover > ul {
display: block;
}
div#nav2 ul li ul li{
clear:both;
padding:10px;
width:150px;
}
</style>
</head>
<body>
<div id="page">
<div id="ribben">
<div id="nav2">
<ul>
<li><a href="index.html">Home</a></li>
<li>
<a href="events.html">Events</a>
<ul>
<li>Forthcoming Events</li>
<li>Previous Events</li>
<li>Archives</li>
</ul>
</li>
<li><a href="members.html">Members</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="store.html">Store</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I am at a lost on how I can do this. If anyone knows of any good tutorials please let me know. I do not want to waist anyones time, however the tutorials I found were not that good. Thanks for any Replies, Regards, Sim085 Hello. After days of searching, I have found my ideal menu system. I am trying to mimic it with some minor changes, due to the layout I already have for my website. I think the biggest problem is the fact that my second level drop down menu needs to be contained inside my first level menu boxes. These boxes also expand based on screen width. Here is the barebones version of Stu Nicholl's 'Simple Drop Down Menu': Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}
/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:149px;
padding:7px 0;
color:#000;
background:#949e7c;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#d4d8bd;
}
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="index.html">MENUS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../layouts/index.html">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
And here is my implementation of it. I was thinking the problem could be with the absolute positioning, but I really don't know anymore... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
html {
margin:0;
padding:0;
}
body {
margin: 0;
padding: 5px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
background-color: #eee;
color: #000;
}
.clear {
clear:both;
font-size:0;
line-height:0;
}
/* Top Navigation */
#topNav {
margin: 10px 0px;
border: 1px solid #ff0;
}
#searchBox {
margin: 0;
padding: 0;
float: left;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #fff;
text-align: center;
}
#nav {
margin: 0px 0px 0px 155px;
padding: 0;
border: 1px solid #0f0;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li {
margin-left: 8px;
float: left;
/*
position: relative;
z-index: 100;
*/
display: inline;
width: 23%;
height: 125px;
border: 1px solid #000;
background-color: #235;
background-repeat: no-repeat;
background-position: 50% 100%;
}
#nav table {
/*
position:absolute;
z-index:80;
*/
border-collapse: collapse;
left: -1px;
top:25px;
}
#nav a {
display: block;
font-size: 1.5em;
color: #FFF;
background: #c7013f;
text-decoration: none;
text-align: center;
}
#nav ul li:hover a, #nav ul a:hover {
background-color: #235;
}
#nav ul ul {
margin: 0;
padding: 0;
visibility: hidden;
border: 1px solid #0f0;
/*
position: absolute;
*/
}
#nav ul ul li {
margin: 0 auto;
height: 1em;
width: 95%;
}
#nav ul li:hover ul, #nav ul a:hover ul{
visibility: visible;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#searchBox {
margin-right:-3px;
}
#nav {
margin-left:8px;
height:1%;
}
</style>
<![endif]-->
</head>
<body>
<div id="topNav">
<!-- Search Box -->
<div id="searchBox">
Welcome, <b>John Doe</b>!
[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
<form action="" name="search">
<input type="text" size="14" name="searchQuery" />
<input type="submit" value="Search" />
</form>
</div>
<div id="nav">
<ul>
<li>
<a href="#">Foundation<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear"> </div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#">Volunteer<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear"> </div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#">Submission<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear"> </div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#">Recipients<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear"> </div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<div class="clear"> </div>
</ul>
<div class="clear"> </div>
</div>
</div>
</body>
</html>
Sorry for the lengthy code, but it was the simplest way to explain my exact situation. Thanks for any help you can give me! Hi guys, I recently learned about pure css drop down menus. Now if you look at my site in FF, and IE, you see in IE, it just doesn't display correctly. Why is this? Tips on fixing this? www.projectfinalfantasy.com Regards, Joseph Man. So I have been working on a menu for my site and it's almost perfect except for one little problem. The dropdown menu displays correctly except for a page that you can only reach from that dropdown menu, you can visit the page here tylerkingdom.com/miltons_ethos/good.html. When hovering over "Case Studies" it repeats that background onto the Sub Nav but if you go back to the homepage and hover over "Case Studies" it displays correctly. I've hacked away at this for hours and still can't figure it out. If anyone has an idea please let me know. I have pasted the CSS below. Thanks Code: /* NAVIGATION */
#navigation {
float: right;
width: 420px;
margin-top: 15px;
}
#navigation ul {
display: inline;
list-style-type: none;
float: left;
margin: 0px;
padding: 0px;
}
#navigation ul li {
float: left;
margin-left: 20px;
height: 25px;
width: 120px;
}
#nav li {
float: left;
position: relative;
list-style: none;
height: 45px;
width: 120px;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 20px;
padding-top: 0;
padding-right: 0;
padding-bottom: 18;
padding-left: 0;
}
/* main level link */
#nav a {
text-decoration:none;
display: block;
margin: 0;
padding-bottom: 22px;
}
/* sub levels link hover */
#nav a:link, #nav a:visited {
background: none;
border: none;
color: #666;
font-size: 14px;
}
#nav a:hover, #nav a:active {
color: #E2383F;
font-size: 14px;
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
width: 130px;
position: absolute;
top: 39px;
left: 0;
background-color: #eee;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #b4b4b4;
border-bottom-color: #b4b4b4;
border-left-color: #b4b4b4;
margin-left: 10px;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
padding-left: 35px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
#nav #nav_case {
background-image: url(../images/case.gif);
background-repeat: no-repeat;
}
#nav .current_case a, #nav #nav_case:hover {
background-image: url(../images/case_hover.gif);
background-repeat: no-repeat;
}
#nav #nav_quiz {
background-image: url(../images/quiz.gif);
background-repeat: no-repeat;
}
#nav .current_quiz a, #nav #nav_quiz:hover {
background-image: url(../images/quiz_hover.gif);
background-repeat: no-repeat;
outline: none;
}
#nav #nav_about {
background-image: url(../images/about.gif);
background-repeat: no-repeat;
}
#nav .current_about a, #nav #nav_about:hover {
background-image: url(../images/about_hover.gif);
background-repeat: no-repeat;
}
Hi folks Looking for a pure css dropdown menu to replace my dhtml one, I do very much like the Adx menu, as compared with suckerfish, for reasons which include: covers select and flash items on the page can colorise the hover background color right across the menu, giving a sense of link hierarchy on a narrow page, the final menu will double back on itself, and also reposition itself vertically if needed I've managed to solve one issue that their code did not seem to, if anyone is interested - removing the space between li items which IE creates - feel free to use the code he http://ied.gospelcom.net/adxmenustest2.html (I've just chosen some garish colors for the moment, so I can see what is going on.) One thing I want to do is add drop shadows. Right hand is OK - just a background image. To achieve a bottom drop shadow, I've added a small li item with a background image. Problem is, adding this extra li item at the end of each menu extends the length of the UL container, considerably more than is needed. In FF, it looks OK, (though there are a few unnecessary pixels above the shadow li item, but in IE, it extends way down below where the drop shadow li item is! Any ideas for removing this extra depth, ie pushing the ul border up, or another way of putting in a drop shadow. I have tried other things as well as an end li item, but the effect is the same! I suppose I could cover it up instead, but a css solution to do it properly would be better! Thanks for your wisdom! Tony I have a pure css menu that I like but it does not work with IE. works exactly as I want in firefox. in IE when I hover over the menu bar the list do not become visible any one know what I need to do to make it work? Thanks BadIdea The page code is Code: <html> <head> <meta name="author" content="Jeffrey Bourque"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="no-cache"> <link rel="stylesheet" type="text/css" href="menuCss.css" /> <title>Operations Control</title> </head> <body> <div class="mainheader"> <table> <tr><td><img src="img/sitelogo.png" width="135" height="59"/></td><td><h1>Operations Control</h1></td></tr> <tr><td colspan="2"><?php echo "Welcome! $useid "; ?> -- <a href="../logout.php" class="nh"> Log Out</a></td></tr> </table> </div> <div id="navMenu"> <ul> <li><a href="#">Home</a> <ul> <li><a href="#">My Evaluations</a></li> <li><a href="#">My Approvals</a></li> <li><a href="#">My Actions</a></li> <li><a href="#">Phone List</a></li> <li><a href="#">Training</a></li> <li><a href="#">Change Password</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Manufacturing</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Quality</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Engineering</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Planning</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">My Actions</a></li> <li><a href="#">Phone List</a></li> <li><a href="#">Change Password</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Accounting</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Materials</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Engineering</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <br class="clearFloat" /> </div> <!-- end navMenu --> </body> </html> The Css is Code: body
{
margin:0;
padding:0;
background:#D0E2DD;
}
.mainheader
{
background:#F2F2F2;
margin:0;
padding-left:30px;
padding-top:20px;
padding-bottom:5px;
padding-right:10px;
}
.mainheader h1
{
color:#000000;
font-size:36px;
}
.navBar
{
background:#7777BB;
color:#2554C7;
line-height:30px;
}
.endBar
{
clear:both;
background:#FFFFFF;
padding:0px 10px;
border-bottom:1px solid #808080;
}
.floatR
{
float:right;
}
#navMenu
{
margin:0;
padding:0;
}
#navMenu ul
{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li
{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#7777BB;
}
#navMenu ul li a
{
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#ffffff;
border:1px solid #ffffff;
text-shadow:1px 1px 1px #000000;
}
#navMenu ul ul
{
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul
{
visibility:visible;
}
#navMenu li:hover
{
background:#aaaaaa;
}
#navMenu ul li:hover ul li a:hover
{
background:#F2F2F2;
color:#000;
}
#navMenu a:hover
{
color:#0088ff;
}
.clearFloat
{
clear:both;
margin:0;
padding:0;
}
I followed the online examples pretty closely but for some reason the effect isn't working how it is supposed to. You'll see what i mean he http://www.mr-danny.com/example.html could anybody tell me what i'm doing wrong? Code:
<html>
<head>
<style type="text/css">
ul#menu{
position:relative;
top:163px;
left:405px;
display: inline;
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li{
display:inline;
list-style-type:none;
}
ul#menu li ul.submenu{
display:none;
}
ul#menu li ul.submenu li{
display:block;
}
ul#menu li:hover > ul.submenu{
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li class="home"><a href="" title="">Heading 1</a></li>
<li class="services"><a href="" title="">Heading 2</a>
<ul class="submenu">
<li><a href="" title="">sub 2-1</a></li>
<li><a href="" title="">sub 2-2</a></li>
</ul>
</li>
<li><a href="" title="">Heading 3</a></li>
<li><a href="" title="">Heading 4</a>
<ul class="submenu">
<li><a href="" title="">sub 4-1</a></li>
<li><a href="" title="">sub 4-2</a></li>
</ul>
</li>
<li><a href="" title="">Heading 5</a>
<ul class="submenu">
<li><a href="" title="">sub 5-1</a></li>
<li><a href="" title="">sub 5-2</a></li>
</ul>
</li>
</ul>
</body>
</html>
I've created my first attempt at a pure CSS drop-down menu using an AlistApart article as a guide. It works great in Firefox, but in IE the menu's are reloading the background image and the list bullet images each time you move to a new link in the drop down. The page is here Any ideas? Here is the CSS for the Menu (not cleaned up so pardon it's rag-tagness): Code: ul {
padding: 0;
margin: 0;
list-style: none;
}
/* First Level */
li {
float: left;
position: relative;
width: 10em;
}
li#first {
border-left-width: 2px;
}
li#last {
border-right-width: 2px;
}
/* Second Level -- Drop Downs */
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: url(../images/backgroundvert.gif) bottom left no-repeat;
padding: 3px 0 3px 8px;
border-right: solid 1px #777777;
}
/* Reset for all non-IE Browswers*/
li > ul {
top: auto;
left: auto;
}
/* Show Second Level when First Level is Rolled Over */
li:hover ul, li.over ul{ display: block; }
a {
text-decoration: none;
}
a:link {
color: #080;
}
a:visited {
color: #790;
}
a:active {
color: red;
}
a:hover {
text-decoration: underline;
}
#nav a {
font-weight: bold;
color: #149AF1;
font-size:13px;
}
#nav a {
text-decoration: none;
}
/* Drop Down Menu Links */
#nav li li a {
display: block;
font-weight: normal;
color: #149AF1;
padding: 0.2em 10px 0 15px;
background-image:url(../images/bullet.gif);
background-repeat:no-repeat;
}
#nav li li a:hover {
padding: 0.2em 10px 0 15px;
background-image:url(../images/bullet2.gif);
background-repeat:no-repeat;
text-decoration: underline;
}
#navs {
border:1px 0 0 0;
border-right: 0;
width: 100%;
padding-left:4px;
height:20px;
padding-top:3px;
}
.nonlink {
font-weight: bold;
color: #149AF1;
font-size:13px;
cursor:default;
}
Hi, This renders ok in firefox but not in IE, it places extra space between the elements. Can someone correct it for me please, i cant see where im going wrong. Thanks. the CSS: Code: #menu {
margin: 0px;
padding: 0px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
#menu ul {
border: 0px;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#menu ul li {
display: block;
text-align: left;
padding: 0px;
margin: 0px;
}
#menu ul li a {
border-top: none;
border-bottom: 1px solid black;
padding: 2px;
margin: 0px;
text-decoration: none;
display: block;
}
#menu a:link, #menu a:visited {
color: black;
text-decoration: none;
}
#menu a:hover, #menu a:active {
background-color: #fffed9;
}
the html: Code:
<div id="menu">
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>
</div>
plug this in and view it in ie and you'll see what i mean. Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! I working on a CSS to display a round-shouldered-tab menu. My result is acceptable: http://rickduley.webs.com/roundShoulderTabMenu.jpg except for the fact that the tabs are set below the menuBar on which the are supposed to display. I have run out of ideas. Would someone please set me on the right path? Thanks. P.S.: the code is at http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb - you have to delete the 'dot key gee bee' suffix. Hi, I am working on my site, and was wondering if anyone knew how to do a menu like this http://www.vh1.com/music/ The one on the left in blue.. how it turns to white. I am pretty sure this is done with css. Can anyone tell me how this is done? Thanks Hi, I am trying to make a drop down menu using only CSS. I want to be able to set the width of the menu and don't want the width to be dependant of size of the menu option. This is the XHTML code (I am using 1.0 strict): <div class="option"> <form name="navigation"> <select name="selectname" SIZE="1"> <option class="">not wide enough</option> <option class=""></option> <option class=""></option> <option class=""></option> </select> </form> </div> And the CSS part: div.option { position: absolute; top: 10px; left: 0px; width: 520px; height: 50px; z-index: 3; font-family: verdana, arial, helvetica, sans-serif; font-size: 10px; } What I would really like is to set the menu width to preffered (in pixels) and not as wide as the phrase "not wide enough" makes it. Is this possible with CSS. I am rying to avoid Javascript and tables (btw I'm using only divs as much as possible. Can someone point me where to look for this kind of thing. Thanks. The code is here on an old Proboards test site: http://kayaoti.proboards.com/index.cgi The menu in the black bar is just one I used from a free code. It works fine except when you hover over the items, the drop-down tabs are out of alignment. I'm not code-savvy enough to know how to make them drop straight down or how to move them so they look nicer, but I'm guessing someone here could help me out in that regard. How can I edit the code (shown below) or whatever else to make the drop-down tabs look better aligned with the menu items? Code: <style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 748px; background: #000; float: left; } #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu h2 { color: #000; background: #000; text-transform: uppercase; } #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #000 #000 #000 #000; margin: 0; padding: 2px 3px; } #menu a { color: #fff; background: #000000; text-decoration: none; } #menu a:hover { color: #fff; background: #000; } #menu li {position: relative;} #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: absolute; top: 0; left: 100%; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, 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 a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> <div id="menu" style="position:relative; left:301px; top:483px;"> <ul><li><a href="http://dominionwolves.proboards.com/"><IMG SRC="http://i44.tinypic.com/24zb1vq.png" border="0"></a></li></ul> <ul><li><IMG SRC="http://i43.tinypic.com/311lyra.png" style="position:relative; left:-40px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus">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><IMG SRC="http://i39.tinypic.com/2cne1d5.png" style="position:relative; left:0px; top:2px;"> <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><IMG SRC="http://i40.tinypic.com/24ffxu1.png" style="position:relative; left:55px; top:2px;"> <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><IMG SRC="http://i42.tinypic.com/15cerno.png" style="position:relative; left:65px; top:2px;"> <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>
Ok I am creating a CSS/Javascript Horizontal drop down menu and everything looks great except when I go down and highlight items on my submenu the styles go away on the Menu Item Selected, how can I have those attributes maintain when I go on it's sub elements? Thanks alot Seth Code:
<div id="Nav">
<ul class="menu">
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#" onclick="javascript:showlayer('sm_1')">
Profile
</a>
<ul class="submenu" id="sm_1">
<li><a href="#">Portfolio</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">About Me</a></li>
</ul>
</li>
<li>
<a href="#">
Contact
</a>
</li>
<li>
<a href="#" onclick="javascript:showlayer('sm_2')">
Login
</a>
<ul class="submenu" id="sm_2">
<li><a href="#">Friends</a></li>
<li><a href="#">Family</a></li>
<li><a href="#">Admin</a></li>
</ul>
</li>
</ul>
</div>
Code: ul, li
{
margin:0; border:0; padding:0; list-style:none;
}
#Nav
{
font-size:11px;
color:#3b5d14;
font-weight:bold;
padding:4px;
height:30px;
font-family: Lucida Sans;
}
#Nav .menu li
{
/*background:url(Images/Light/Left-Menu.png) left top no-repeat;*/
height:30px;
float:left;
margin-right:10px;
}
#Nav .menu li a
{
color:#F1F1F1;
width: 75px;
text-decoration:none;
padding:0 10px;
height:30px;
line-height:30px;
display:block;
float:left;
padding:0 26px 0 10px;
background:url(Images/Light/Right-Menu-Off.png) right top no-repeat;
font-family: Lucida Sans;
}
#Nav .menu li a:hover
{
color:#666666;
background: url(Images/Light/MenuRight.png) right top no-repeat;
}
#Nav .menu li:hover
{
background: url(Images/Light/Menu-Hover.png) left top no-repeat;
}
#Nav ul .submenu
{
border:solid 1px #7ea3bb;
margin-left: auto;
margin-right: auto;
/*border-top:none;*/
background:#FFFFFF;
position:relative;
top:1px;
width:100px;
padding:6px 0;
clear:both;
z-index:2;
display:none;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);opacity:.95
}
#Nav ul .submenu li
{
background:none;
display:block;
float:none;
margin:0 6px;
border:0;
height:auto;
line-height:normal;
/*border-top:solid 1px #DEDEDE;*/
}
#Nav .submenu li a
{
background:none;
display:block;
float:none;
padding:6px 6px;
margin:0;
border:0;
height:auto;
color:#105cbe;
line-height:normal;
}
#Nav .submenu li a:hover
{
background:#ebf4fa;
}
Hi all, I am trying to style a drop-down menu. I'd like the hover state to have a transparent cut out on the menu... and the bottom of the drop down to be rounded. Probably makes more sense in the picture... which I am apparently not allowed to post. grrr. So think little triangle, but instead of being a different color, it is a transparent cut out. I've been banging my head into the keyboard for a couple of hours and can't seem to find the right way to tackle this. The problem is compounded by some of the menu items not have submenus. I'd like those to hover as if they were the bottom link in the drop down... ie, a notched edge and rounded bottom border. I would really appreciate anyone pointing me in the right direction here. Many thanks, -helga |
|||||||