|
CSS - Pure Css Dropdown Menu's - Ie Trouble
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;
}
Similar TutorialsHi 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 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 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, 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 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. 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;
}
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>
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. Im trying to make my site into a CSS layout with dropdown menus. The layout was fine untill i implemented the dropdown menu. Now the center window area is broken. 1. Why is this happening and whats the solution? 2. How can I make the navigation bar extend across the full length of my page area? http://www.nevertap.com/float/ 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 got the menu the working the way I want, except I can't get the last two on the menu to be bold becasue they are like Multimodal Corridor Planning, a category with articles under it. Here is the link: http://www.greatstreetsstlouis.net/...d=32&Itemid=204 I just need to get Site Planning to be bold, and then Choices & Guidelines. I have to use CSS as well, becasue the menu is done through Joomla and is dynamic. I need those last two titles to behave the same way when clicked on like Multimodal Corridor Planning does. Thank you. Here is the code: Code: .extmenu .modulebdr div div div #mainlevel {
font:.8em/14px Verdana,sans-serif;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_active {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#2E69BF;
font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_current {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_active {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#2E69BF;
font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_current {
background: url(../images/bullet_arrow_right.gif) left center no-repeat;
padding-left:9px;
color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel {
padding-left:9px;
}
.extmenu .modulebdr div div div #mainlevel .sublevel_active ul li a.sublevel{
color:#666666;
margin-left:14px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active {
padding:0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_active {
margin-left:11px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_current {
margin-left:10px;
}
.extmenu .modulebdr div div div ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_current {
margin-left:8px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel {
margin-left:7px;
}
Hi, I've been at this for some time now. Currently building a site (development address: mainline.divsharp.com). Menu (left) was Javascript, its now CSS. Works fine in Chrome, Firefox and IE 8, but IE 7 is acting extremely strange. You can see the desired effect if you use a recent version of one of those browsers. When I pull it up in IE 7 on the homepage, I can't hover over the popup like I can in the other, more compliant browsers. It either hides the pane as soon as the mouse gets off the main menu link, or when the mouse leaves the picture once its over the pane. If I then click on, say, "Market Watch" and try to view the menu on an interior page, its even more erratic. I'm about at the end of what I know or can look up how to do here.. If I can get the mouse over some part of the popout pane, it seems that if its over the content area of a div and not padding or margins, it stays open. For example, over the picture or over the grey area to the right... This might suggest something to someone.. Unfortunately, the markup is clogged at best and my style is all over the place. Site is built in Wordpress and is a custom theme. Hopefully this will help: Home page style sheet: mainline.divsharp.com/wp-content/themes/mainline/style.css Interior page style sheet: mainline.divsharp.com/wp-content/themes/mainline/interior.css In those stylesheets, there isn't much discernible organization, but the pieces relating to this problem are near the id's labeled menu_bg in the middle and at the very bottom is where the hover effects are. The popout is achieved like this: Code:
<li id="popout_hov">
<div id="popout">code for menu pane</div>
</li>
#popout_hov #popout {
visibility: none;
}
#popout_hov:hover #popout {
visibility: visible;
}
Thanks. Hello. My site works fine in Firefox 3 of course not sure about IE 7 but in IE 6 the menus bar links are not dropping down ie About Us, Services ect. What did I miss? Site Link Matt 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;
}
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! |
|||||||