|
CSS - Adx Pure Css Dropdown Menu
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 Similar TutorialsI'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 there. I'm developing a website using Wordpress as the major CMS, it uses a navigation plugin called NAVT which makes dynamic navigation menus and allows you to nest some links under other links. Click here to see how it outputs the HTML. Basically it's a series of unordered lists inside other unordered lists, cluttered with various classes (none of them used by the plugin itself). So basically I want to turn that into a pure CSS only flyout/dropdown menus, I've seen code flying around but with all those classes that NAVT applies I'm struggling to adapt it. Has anyone done something similar to this? Cheers, 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 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. 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 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 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>
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, 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. I'm using the suggestions of those on here and using the http://www.dynamicsitesolutions.com...2/#relatedLinks menu (I'm a little confused over what the differences are but that's the least of my problems) What I want is a 2nd level drop down menu, but I'm clueless on how to go about it..??? Hi I am trying to create a drop down menu on my existing design. Code: http://dfinnema.com/help How would I add a drop down to Page 3 menu that looks like this: Code: http://dfinnema.com/help/images/dropdown_active.png Without the menu: Code: http://dfinnema.com/help/images/dropdown.png Any Ideas / Suggestions? :| Hi all -- I've used plenty of CSS in the past, but I'm currently working on a dropdown menu that is more challenging than I had anticipated. A few things I need to fix that I just cannot figure out: 1) The last <li> in the dropdown seems to be overlapping my border 2) I want to put at least 10px of padding on the left hand side of the dropdown menu 3) I need to turn the carrot in front of each menu item to #ff9900 4) Whenever I try to increase or decrease the space between menu items, it seems as though white lines appear between my menu items. In the interest of full disclosure, I found this CSS out somewhere on the web, and I've been trying to customize it since I didn't feel I had the knowledge to build it from scratch. Normally, I'd prefer to create something on my own, but limited time and knowledge prevented me from doing so this time around. Attached below are my HTML and CSS code. I tried to post a link, but the forum will not allow me. If you can offer any assistance, I would greatly appreciate it. Thanks in advance for your time! HTML CODE: Code: <!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=utf-8" />
<title>Flyouts Page</title>
<link rel="stylesheet" type="text/css" href="menu/menu_style.css" />
<body>
<TABLE cellSpacing=0 cellPadding=0 width=610 border=0>
<TBODY>
<TR>
<TD width="200" valign="top">
<div id="outside">
<ul id="navigation-1">
<li><IMG src="test_graphic.jpg" border=0></A>
<ul class="navigation-2">
<li><a href="" title="Test 1" target="_self" ><strong>> Test 1</strong></a></li>
<li><a href="" title="Test 2" target="_self" ><strong>> Test 2</strong></a></li>
<li><a href="" title="Test 3" target="_self" ><strong>> Test 3</strong></a></li>
<li><a href="" title="Test 4" target="_self" ><strong>> Test 4</strong></a></li>
<li><a href="" title="Test 5" target="_self" ><strong>> Test 5</strong></a></li>
<li><a href="" title="Test 6" target="_self" ><strong>> Test 6</strong></a></li>
<li><a href="" title="Test 7" target="_self" ><strong>> Test 7</strong></a></li>
</ul>
</li>
</ul>
</div></TD>
</TR>
</TBODY></TABLE>
</body>
</html>
CSS CODE: Code: #outside{
border:0px solid #000000;
background:#ffffff;
}
#navigation-1 {
padding:0px 0;
margin:0px;
list-style:none;
width:200px;
height:107px;
border-top:0px solid #000000;
border-bottom:0px solid #000000;
font:normal 8pt Verdana, Arial, Helvetica;
background:#ffffff;
}
#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:200px;
background:#ffffff;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
padding:4px 0;
display:block;
text-align:left;
text-decoration:none;
background:#ebf7f3;
color:#000000;
width:195px;
background:#ffffff;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
padding:4px 0;
display:block;
text-align:left;
text-decoration:none;
background:#ffffff;
color:#000000;
width:195px;
}
#navigation-1 li ul.navigation-2 {
margin:0;
padding:0px 0px 0;
list-style:none;
display:none;
background:#ebf7f3;
width:195px;
position:absolute;
top:110px;
left:0px;
border: 1px solid #cbccce;
}
#navigation-1 li:hover ul.navigation-2 {
display:block;
width:198px;
}
/*the individual menu items*/
#navigation-1 li ul.navigation-2 li {
width:170px;
height:18px;
clear:left;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
clear:left;
background:#ebf7f3;
padding:4px 0px -4px 5px;
width:170px;
border:none;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
clear:left;
background:#ebf7f3;
padding: 4px 0px 0-4px 5px;
width:170px;
position:relative;
z-index:1000;
color:#cbccce;
}
#navigation-1 li ul.navigation-2 li a span {
position:absolute;
top:0;
left:132px;
font-size:10pt;
color:#000000;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
position:absolute;
top:0;
left:190px;
font-size:10pt;
color:#cbccce;
}
.carrot{
color:#ff9900;
}
First I am using Dreamweaver MX2004. I am still new to CSS, have not used it much. Still using tables (yeah i know) for the layout. Mainly because when I've tried positioning in the past, IE doesn't display it right. Layers don't seem to work for me! What I'd like to know is: can I use CSS (the son of suckerfish dropdowns) for my drop down menu in a separate HTML file that would be saved as a library item? I'd like the nav separate so I can update it easily. Should I also use a separate CSS file that would only be associated with the nav? Is necessary to have an external css sheet, if it only applys to this nav? The nav would get dropped into a table row under the top banner. My issue is: will it get positioned right ? And will it view ok in IE??? Hope I explained this right. I fear that what I have already coded, would get messed up if I do this! But due to search engine optimization, I'd like to avoid a fully functioning javascript dropdown. If you have a better suggestion/usage for a dropdown horizontal nav, I'd appreciate your ideas! Thanks for the advice! Valerie Hi, on my site http://www.mattmdesign.com, sometimes when you mouseover the portfolio the menu appears in the wrong spot. someone also said that it is appearing on the left side of the page everytime with mozilla 1.0 Does anyone know how I can make it appear right under the porfolio link every time? Thanks, Matt I'm looking to add a drop down menu for my site but Instead of the menu dropping down i want it to go up and I found a few things about it but nothing really helped me I was wondering how can i get a css drop down to go up? sorry if this is the wrong forum to post on.. but i am clueless on this part i am going to be starting on the script soon just wanted to know how to code the script to make it go up Thank you Smackadoo i'm having a problem with a couple attributes for my CSS dropdowns. view the page here (both CSS and XHTML are on the same page) specifically my .hoverBase:hover .hoverLaunch {} class which reads as such: Code: .hoverBase:hover .hoverLaunch {
display:block;
position:absolute;
top:15px;
left:-3px;
width:70px;
border:3px solid #000000;
text-align: center;
z-index: 30;
}
the problem is that IE6 will not display the .hoverLaunch class like FireBird does, in fact, it does not display at all. Another awesome feature of IE6 is that the :hover i have applied on the .hoverbase does not work either. Any help is appreciated. Thanks in advance. Hey all, having a bit of trouble getting my drop down menu to display properly. It's modeled after the suckerfish menu, only modded a bit. Here's the site...hover over 'machines' to see what i'm talking about (have to use FF, i haven't added the JS for IE yet). The drop down is adopting the rollovers from the mainmenu, and I don't know what to change to make 'em different. Here's the CSS for the menu: Code:
#mainmenu {
width:780px;
height:41px;
margin:auto;
position:relative;
}
#mainmenu li.navigation {
width:78px;
height:41px;
float:left;
text-align:center;
background:#B8A488 url(images/mainmenu_roll.gif) no-repeat;
}
#mainmenu li.navigation a{
background:#66563D url(images/mainmenu_off.gif) no-repeat;
display:block;
text-decoration:none;
color:#F4F1E5;
height:31px;
padding-top:10px;
}
#mainmenu li.navigation a:hover {
background:transparent;
color:#66563D;
}
#mainmenu li#home {
background-image:url(images/home_roll.gif);
}
#mainmenu li#home a{
background-image:url(images/home_off.gif);
}
#mainmenu li#home a:hover {
background:transparent;
}
#mainmenu li#contact {
background-image:url(images/contact_roll.gif);
}
#mainmenu li#contact a {
background-image:url(images/mainmenu_off.gif);
}
#mainmenu li#contact a:hover {
background:transparent;
}
/* BEGIN DROP DOWN MENU */
li ul {
display: none;
position: absolute;
top: 1px;
margin-left:-2px;
background-color:#B8A488;
border-left:1px solid #66563D;
border-bottom:1px solid #66563D;
padding:2px;
z-index:500;
}
* html li ul {
top:26px;
}
/*
li ul li {
padding:0;
}
*/
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{
display: block;
}
Thanks! My second level menu items are not showing in IE, but show fine in firefox. Code: #menucontainer {
width: 100%;
clear: both;
position: relative;
text-align: center;
margin: 0 auto;
padding-left:0px;
padding-top:35px;
padding-bottom:15px; }
#menu {
text-align: center;
display:table;
padding:5;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
background: #eee;
}
#menu ul {
font: small-caps bold 12px/15px "lucida grande", tahoma, arial, verdana, sans-serif;
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}
#menu a {
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 a {
color: #C7C7C7;
background: #000;
text-transform: small-caps;
}
#menu a:hover {
color: #fff;
background: #000000;
}
/* ********* secondary links ************** */
#menu li li a {
color: #C7C7C7;
background: #292A2C;
text-decoration: none;
}
#menu li li a:hover {
color: #FFF;
background: #292A2C;
}
#menu li:hover { z-index:1;}
#menu li {position: relative}
#menu ul ul {
position: absolute;
z-index:100;
left:0;
top:auto;
display:none;
}
div#menu ul ul,
div#menu ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;}
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(behavior.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
}
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}
</style>
<![endif]-->
|
|||||||