|
CSS - Help With Drop Down Menu Of Horizontal Navigation
I'm trying to get my horizontal navigation to work for a PTA page I'm creating. New to CSS and I think I've got a bit of the gist of it... but I'm really struggling with this. I've mostly "found" the coding I needed and then modified it to suit my needs.
As a designer, though, I still want it to look the way I want it to and I'm not quite able to accomplish that. Basically, I would like a drop down menu added to the navigation I've created here - lwptsa . org/newsite/ This is the solution I found - lwptsa . org/newsite/dropdown . html But I am unable to get the dark blue to continue to the end of the container. ** ACK, not allowed to post images. You can find the image I'm referring to he lwptsa . org/newsite/images/navigation . jpg I'd like to fix the left margin spacing and it's coloring (A), making the lines between the buttons/blocks white (B) and having the blue flush with the white containers above and below (A). I'd also like to keep the top lines between the drop-down menu (C) but remove it from the main menu/navigation (B). Hopefully this makes sense. My style sheets a No drop-down menu, but working spacing and white separating lines (id - navigation): lwptsa . org/newsite/ Code: body
{
margin: 20px;
padding: 0;
font: 100%/1.3 arial;
font-size: medium;
color: #000;
background: #ccc;
}
h1, h2, h3, h4, h5, h6
{
margin: 0 0 1em;
line-height: 1.1;
}
h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
font: 80%/1.3 helvetica, arial, sans-serif;
}
img { border: none; }
a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }
a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }
a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }
#container
{
margin: 0 auto;
width: 1024px;
background: #fff;
}
#container table
{
font: 80%/1.3 helvetica, arial, sans-serif;
}
#header
{
font-style:italic;
font-size:small;
color: #00693e;
background: #fff;
text-align: center;
height: 115px;
padding: 20px 20px 20px 30px;
}
#navigation
{
font-size:small;
float: left;
width: 1024px;
background: #002664;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation ul ul
{
position: absolute;
background: #d1d5da;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}
#navigation li a
{
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { color: #a3d869; }
#content-container
{
float: left;
width: 1024px;
background: #fff;
}
#content
{
height: inherit;
clear: left;
float: left;
width: 590px;
padding: 0 20px 0 0;
margin: 20px 0 20px 30px;
display: inline;
border-right: 1px solid #00693e;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 340px;
padding: 20px 0;
margin: 0 20px 0 20px;
display: inline;
}
#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }
#footer
{
font-size: x-small;
clear: both;
color: #fff;
background: #002664;
text-align: center;
padding: 5px;
height: 1%;
}
#translator
{
text-align: center;
margin: auto;
position: absolute;
}
Drop-down menu, but issue with the blue not continuing to the end and weird issues with separating lines and margins (id - menu): lwptsa . org/newsite/dropdown . html Code: body
{
margin: 20px;
padding: 0;
font: 100%/1.3 arial;
font-size: medium;
color: #000;
background: #ccc;
}
h1, h2, h3, h4, h5, h6
{
margin: 0 0 1em;
line-height: 1.1;
}
h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
font: 80%/1.3 helvetica, arial, sans-serif;
}
img { border: none; }
a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }
a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }
a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }
#container
{
margin: 0 auto;
width: 1024px;
background: #fff;
}
#container table
{
font: 80%/1.3 helvetica, arial, sans-serif;
}
#header
{
font-style:italic;
font-size:small;
color: #00693e;
background: #fff;
text-align: center;
height: 115px;
padding: 20px 20px 20px 30px;
}
#menu ul
{
font-family: Arial, Verdana;
font-size:small;
margin: 0;
padding: 0;
list-style: none;}
#menu ul li
{
display: block;
position: relative;
float: left;}
#menu li ul { display: none; }
#menu li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #002664;
margin-left: 1px;
white-space: nowrap;}
#menu ul li a:hover { background: #00693e; }
#menu li:hover ul {
display: block;
position: absolute;
}
#menu li:hover li {
float: none;
font-size: 11px;
}
#menu li:hover a { background: #00693e; }
#menu li:hover li a:hover { color: #fff;background: #008d53; }
#content-container
{
float: left;
width: 1024px;
background: #fff;
}
#content
{
height: inherit;
clear: left;
float: left;
width: 590px;
padding: 0 20px 0 0;
margin: 20px 0 20px 30px;
display: inline;
border-right: 1px solid #00693e;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 340px;
padding: 20px 0;
margin: 0 20px 0 20px;
display: inline;
}
#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }
#footer
{
font-size: x-small;
clear: both;
color: #fff;
background: #002664;
text-align: center;
padding: 5px;
height: 1%;
}
#translator
{
text-align: center;
margin: auto;
position: absolute;
}
Any and all help welcome. I'm trying to redesign the look and information of the PTA's website. a. Similar TutorialsHi 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 am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image. I would really like your help on this been trying to do it for weeks now!! Cheers Hi, I have a horizontal css menu that looks great in FF but doesn't align correctly in IE. Is anyone able to help me with a fix for IE browsers? HTML is Code:
<!-- Begin Navigation -->
<div id="navigation">
<ul class="nav">
<li><a href="default.html">HOME</a></li>
<li><a href="rangemaster/about.html">ABOUT RANGEMASTER</a>
<ul>
<li><a href="http://www.rangemaster.co.uk/index_535.htm" target="_blank">COMPANY HISTORY</a></li>
<li><a href="http://www.rangemaster.co.uk/index_65.htm" target="_blank">PRODUCTS</a></li>
<li><a href="brochure.html">REQUEST BROCHURE</a></li>
<li><a href="http://www.rangemaster.co.uk/ProdLocator.aspx" target="_blank">HOW TO BUY</a></li>
<li><a href="rangemaster/recipes.html">GREAT RECIPE IDEAS</a></li>
</ul>
</li>
<li><a href="falcon/about.html">ABOUT FALCON</a>
<ul>
<li><a href="falcon/history.html" target="_blank">COMPANY HISTORY</a></li>
<li><a href="http://www.falconappliances.com/290.htm" target="_blank">PRODUCTS</a></li>
<li><a href="brochure.html">REQUEST BROCHURE</a></li>
<li><a href="http://www.falconappliances.com/ProdLocator.aspx" target="_blank">HOW TO BUY</a></li>
<li><a href="falcon/recipes.html">GREAT RECIPE IDEAS</a></li>
</ul>
</li>
<li><a href="aga/about.html">ABOUT AGA</a>
<ul>
<li><a href="http://www.aga-web.co.uk/92_243.htm" target="_blank">COMPANY HISTORY</a></li>
<li><a href="http://www.aga-web.co.uk/89.htm" target="_blank">PRODUCTS</a></li>
<li><a href="brochure.html">REQUEST BROCHURE</a></li>
<li><a href="http://www.aga-web.co.uk/90_253.htm" target="_blank">HOW TO BUY</a></li>
<li><a href="aga/recipes.html">GREAT RECIPE IDEAS</a></li>
</ul>
</li>
<li><a href="rayburn/about.html">ABOUT RAYBURN</a>
<ul>
<li><a href="http://www.rayburn-web.co.uk/50.htm" target="_blank">COMPANY HISTORY</a></li>
<li><a href="http://www.rayburn-web.co.uk/44.htm" target="_blank">PRODUCTS</a></li>
<li><a href="brochure.html">REQUEST BROCHURE</a></li>
<li><a href="http://www.rayburn-web.co.uk/48.htm" target="_blank">HOW TO BUY</a></li>
<li><a href="rayburn/recipes.html">GREAT RECIPE IDEAS</a></li>
</ul>
</li>
<li><a href="survey.html">FIND YOUR PERFECT COOKER</a>
<li><a href="gallery.html">PHOTO GALLERY</a>
<li><a href="brochure.html">BROCHURE REQUEST</a>
</ul>
</div>
<!-- End Navigation -->
and CSS is Code:
ul.nav,
.nav ul{
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
height: 25px;
width: 835px;
}
ul.nav{
display: table;
background: url(../_images/menu.gif);
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 6px 6px;
color: #FFFFFF;
text-align:left;
}
ul.nav li>ul{
display: none;
position: absolute;
width: 150px;
margin-left: -10px;
margin-top: 6px;
}
ul.nav li:hover>ul{
display : block;
}
.nav ul li a {
display: block;
padding: 2px 10px;
color: #FFFFFF;
}
.nav a{
text-decoration: none;
color: #FFFFFF;
}
.nav ul li a{
background-color: #000000;
filter:alpha(opacity=80);
opacity: 0.8;
-moz-opacity:0.8;
}
.nav ul li a:hover {
background-color: #B3191E;
}
.nav ul li a:active {
background-color: #B3191E;
}
Many thanks... Hello: I inherited a site which was designed by an SEO firm. They have a 2 level horizontal drop down menu which isn't working in Internet Explorer 6. The website URL is http://www.chrisspencerhomes.com. When you hover over the links Communities, Home Plans, Available Homes and Gallery; the drop down menus do not appear in IE6. The website works great in Firefox and IE7. I attached the CSS file to this post. Can someone help me fix the CSS code so it will work on IE6? Thank you for all your time and help. Hi all! I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to. The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up You can check out the site at: cleopatra.gebodesign.no The files are at: gebodesign.no/cleopatra/menu.php gebodesign.no/cleopatra/stylesheet.css Thanks for any input I dont understand what I am missing, the menu is suppose to be a drop down menu (and suppose to be horizontal, but i havent got that far yet) but its not dropping, its displaying everything? I would appreciate any help on making it work correctly, thanks much! -Sean nav_style.css file: Code: body {
font-family: Arial, Helvetica, sans-serif;
}
#nav {
width: 200px;
font-family: Arial, Helvetica, Sans-serif;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
border-bottom: 1px solid #ed9f9f;
}
#nav li a:link, #nav li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #b51031;
color: #ffffff;
text-decoration: none;
}
#nav li a:hover {
background-color: #711515;
color: #ffffff;
}
#nav ul ul {
margin-left; 12px;
}
#nav ul ul li {
border-bottom: 1px solid #711515;
color: #ffffff;
}
#nav ul ul a:link, #nav ul ul a:visited {
background-color: #ed9f9f;
color: #711515;
}
#nav ul ul a:hover {
background-color: #711515;
color: #ffffff;
}
and here is the head_nav.php file: Code: <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?> <!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> <title>?</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="css_inc/nav_style.css" /> </head> <body> <div id="nav"> <ul> <li><a href="#">Services</a> <ul> <li><a href="#">Cinematography</a></li> <li><a href="#">Photography</a></li> </ul> </li> <li><a href="#">Video</a> <ul> <li><a href="#">Demo Reel</a></li> <li><a href="#">Music Video</a></li> <li><a href="#">Commercial</a></li> </ul> </li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">About Valliant</a> <ul> <li><a href="#">Biography</a></li> <li><a href="#">Resume</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li><a href="#">Links</a></li> <li><a href="#">Home</a></li> </ul> </div> </body> </html> Please help me how to center Ultimate Horizontal Drop-Down Menu Demo on DIV ultimate.horizontal.html 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>Ultimate Horizontal Drop-Down Menu Demo</title> <link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/dropdown/themes/default/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" /> <!--[if lt IE 7]> <script type="text/javascript" src="js/jquery/jquery.js"></script> <script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script> <![endif]--> </head> <body> <h1>Ultimate Horizontal Drop-Down Menu Demo</h1> <div id="catmenu"> <ul id="nav" class="dropdown dropdown-horizontal"> <li><a href="./">Home</a></li> <li><span class="dir">About Us</span> <ul> <li><a href="./">History</a></li> <li><a href="./">Our Vision</a></li> <li><span class="dir">The Team</span> <ul> <li><a href="./">Brigita</a></li> <li><a href="./">John</a></li> <li><a href="./">Michael</a></li> <li><a href="./">Peter</a></li> <li><a href="./">Sarah</a></li> </ul> </li> <li><a href="./">Clients</a></li> <li><a href="./">Testimonials</a></li> <li><a href="./">Press</a></li> <li><a href="./">FAQs</a></li> </ul> </li> <li><span class="dir">Services</span> <ul> <li><a href="./">Product Development</a></li> <li><a href="./">Delivery</a></li> <li><a href="./">Shop Online</a></li> <li><a href="./">Support</a></li> <li><a href="./">Training & Consulting</a></li> </ul> </li> <li><span class="dir">Products</span> <ul> <li><a href="./" class="dir">New</a> <ul> <li><a href="./">Corporate Use</a></li> <li><a href="./">Private Use</a></li> </ul> </li> <li><a href="./" class="dir">Used</a> <ul> <li><a href="./">Corporate Use</a></li> <li><a href="./">Private Use</a></li> </ul> </li> <li><a href="./">Featured</a></li> <li><a href="./">Top Rated</a></li> <li><a href="./">Prices</a></li> </ul> </li> <li><a href="./">Gallery</a></li> <li><a href="./">Events</a></li> <li><a href="./">Careers</a></li> <li><a href="./" class="dir">Contact Us</a> <ul> <li><a href="./">Enquiry Form</a></li> <li><a href="./">Map & Driving Directions</a></li> <li><a href="./">Your Feedback</a></li> </ul> </li> </ul> </div> </body> </html> css/dropdown/dropdown.css Code:
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
display: block;
/*margin: 0;
padding: 0;*/
}
ul.dropdown {
position: inherit;
z-index: 597;
/* float: left;*/
}
ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
text-align:left;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
/* left: 0;*/
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
css/dropdown/themes/default/default.ultimate.css Code:
#catmenu{
text-align:center;
width:100%;
background:#f6f6f6;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
height: 34px;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
ul.dropdown {
font-weight: bold;
}
ul.dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #eee;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
width: 150px;
margin-top: 1px;
}
ul.dropdown ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
* @level sep ul, .class
*/
ul.dropdown *.dir {
padding-right: 20px;
background-image: url(images/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
background-image: url(images/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 10px;
padding-left: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
css/dropdown/themes/default/default.css Code:
#catmenu{
text-align:center;
width:100%;
background:#f6f6f6;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
height: 34px;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
ul.dropdown {
font-weight: bold;
}
ul.dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #eee;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
width: 150px;
margin-top: 1px;
}
ul.dropdown ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
* @level sep ul, .class
*/
ul.dropdown *.dir {
padding-right: 20px;
background-image: url(images/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
background-image: url(images/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 10px;
padding-left: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
Thank you. I have a menu, click he http://progra.ro/demomenu/ This menu not appear correctly in Internet Explorer 6 due to "SPAN" element. Anyone know how to fix this problem leaving the span element intact in HTML ? All browser show the menu correctly, except IE6.Thanks! Hi everyone, I am trying to make a horizontal navigation near the top of my website. But I can't seem to make it center but AND horizontal, i've only been able to center it but not horizontal... or have it horizontal but not center. This is my CSS so far. Quote: ul#nav li { display:inline; margin: 0 auto; width: 100%; text-align:center; } ul#nav li a { display:block; height:48px; width:113px; background: transparent url(images/nav.png); margin: 0 auto; text-indent:-9009px; } ul#nav li a:hover {background-position:0 -48px} ul#nav li#photos a { width:139px; margin: 0 auto; background-position:-113px 0; } ul#nav li#photos a:hover {background-position:-113px -48px} My home link and photo link are currently centered and on top of each other in a vertical fashion with this code. Please help! I'm making a horizontal navigation menu using lists and CSS. It looks fine in IE, but in Mozilla, the double border on the bottom appears just beneath the top one, and the next line shows up after the unordered list. Hard to explain - you'd basically have to check it out for yourself: http://www.michaelaparicio.com/ Any help would be greatly appreciated! Thanks. Regards, Mike Aparicio I have been searching on the level world wide web for a tutorial about how to get CSS down for a horizontal navigation bar that uses different images for each individual button's off and on states? Many of the tutorials I have found use some sort of background or two state images, and then write text on top the the images. What if the buttons are designed in a non-arial/verdana/times/san serif font? I assume it would be best to just use images for the nav bar, but then, how do I write the CSS for a nav bar that's using a specific image as it's off stage, and then switches to another image when you scroll over it? I'm a CSS novice, struggling to understand the nuances of some open source CSS I'm using for a site. The main horizontal navigation has an extra item at the end of the row and I can't figure out why. Can you help me get rid of it? Here is my include for the navigation: <ul> <li><a href="/index.shtml">Home</a></li> <li><a href="/about.shtml">About</a></li> <li><a href="/ultreyas.shtml">Ultreyas</a></li> <li><a href="/weekends.shtml">Weekends</a></li> <li><a href="/FAQs.shtml">FAQs</a></li> <li><a href="/servant_community.shtml">Servant Community</a></li> <li><a href="/resources.shtml">Resources</a></li> <li><a href="/stay_in_touch.shtml">Stay in Touch</a></li> <li><a href="/donate.shtml">Donate</a></li> </ul> Here is the CSS: /*----------------------------*/ /* 2.4 - Navigation - Level 2 */ /*----------------------------*/ .nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;} .nav2 ul {float: left; width: 770px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(64,134,204); font-weight: bold;} .nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;} .nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;} .nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;} .buffer {clear: both; width: 770px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);} I'd like "Donate" to be the last item, but there is another empty box appearing to the right of it. Much obliged, Laurie 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;
}
hello. I am currently using a simple horizontal top menu with a vertical drop down. I would like to change the vertical drop down to be horizontal, multi column, and should accomodate more than one line, if possible. The example I'm going for is used as top navigation he nfl - baltimore ravens home page and he ge home page Here is the code I'm using currently (would like it to be all CSS). #### ul#mainNavigation { padding-left:185px; } ul#mainNavigation li { padding:0 16px; float: left; display:inline; position: relative; list-style: none; color:White; _width:1px; } ul#mainNavigation li.Seperator { padding:0px; _width:1px; } ul#mainNavigation li.over { background-color:white; } ul#mainNavigation li.over a { color:Red; } ul#mainNavigation li a { color:White; text-transform:uppercase; text-decoration:none; font-weight:bold; display:block; } ul#mainNavigation a:hover { color: Red; } ul#mainNavigation li a { display: block; } ul#mainNavigation li p { height:19px; } ul#mainNavigation li ul { display: none; position: absolute; background-color:Black; opacity:.8; filter: alpha(opacity=80); -moz-opacity: 0.8; margin-left:-16px; } ul#mainNavigation li.over ul { display: block; z-index:999; } ul#mainNavigation li.over ul li { float: none; background:none; border:none; white-space:nowrap; padding:0px; } ul#mainNavigation li.over ul li a { color: white; padding:5px; border-bottom:solid 1px black; } ul#mainNavigation li.over ul li a:hover { background: #3d1f6e; color: white; } ~~~~~~~ HTML ~~~~~~~~~~~~~~ <ul id="mainNavigation"> <li> <p><a href="Mainlink1.html">Mainlink1</a></p> <ul> <li><a href="link2.html">LINK 2</a></li> <li><a href="link3.html">LINK 3</a></li> <li><a href="link4.html">LINK 4</a></li> <li><a href="link5.html">LINK 5</a></li> <li><a href="link6.html">LINK 6</a></li> <li><a href="link7.html">LINK 7</a></li> </ul> </li> <li> <p><a href="Mainlink2.html">Mainlink2</a></p> <ul> <li><a href="link2.html">LINK 2</a></li> <li><a href="link3.html">LINK 3</a></li> <li><a href="link4.html">LINK 4</a></li> <li><a href="link5.html">LINK 5</a></li> <li><a href="link6.html">LINK 6</a></li> <li><a href="link7.html">LINK 7</a></li> </ul> </li> </ul> #### Thank you, in advance! ~ lahddah Hi All, I have a new site and it has a bug that I don't know how to fix. The navigation and sub navigation is done with a list that is styled with CSS to be horizontal. I am not an expert at this, but learned it from a site, but unfortunately can't remember where The thing is, the site works most of the time. But when pages load slow, sometimes the list gets displayed as a normal vertical list and the entire "look" of the navigation is ruined. I'm sure I've done something wrong, but I don't know what. Are there any CSS experts here who can set me straight? The site is http://www.thehousebreakingbible.com/training/index.htm Thanks for your time, Dana Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
HTML: 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>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
For my horizontal drop-down menu, the menu items that overlap the content disappear for some reason in IE7. Here is the link... sweetless.zxq.net I am an absolute newbie to CSS, so I'm not sure if I am missing something really simple? -S Hi I am following a list aparts suckerfish dropdown tutorial. So far I have managed to get everything working for Mozilla. The javascript bit at the end, enabling it to work for explorer is troubling me. can anyone help? Do I put the javascript in the CSS file or the Html? I've tried both but neither seem to work! Is there a better way to do this? Thanks Hi there, I have not done any html/CSS in a LONG time and have just got back into it. I am having some problems with a drop down, where, when the sub menu is hovered over, it will not go away again until the mouse is moved either up above the menu bar or off the browser page. I would like the sub menu to be hidden when the mouse is off the sub menu item. An example is here (oops, I can't post a URL) 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>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(images/carpet.gif);
width:100%;
margin: 0px;
}
#wrapper {
position: relative;
margin: auto;
width:840px;
top: 20px;
height: 920px;
}
#index3-03_ {
position:absolute;
left:5px;
top:45px;
width:840px;
height:263px;
background-image: url(images/thinslice.png);
background-repeat: no-repeat;
z-index: 2;
background-position: -66px -142px;
}
#navbar {
position: absolute;
top: 31px;
right: 0px;
margin: 0;
padding: 0;
width: 780px;
left: 38px;
height: 37px;
}
#navbar li {
list-style: none;
float: left;
padding-left: 20px;
font-size: 14px;
}
#navbar li a {
display: block;
text-decoration: none;
list-style-type: none;
list-style: unordered;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 5px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
text-decoration: none;
color: #363795;
text-align: center;
}
#navbar li a:hover {
color: #B00D46;
}
#navbar li ul {
display: none; }
#navbar li:hover ul, #navbar li.hover ul {
position:absolute;
display: block;
left:-42px;
top:-1px;
width:840px;
margin: 0;
background-repeat: no-repeat;
float: left;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0px;
z-index: 5;
clear: none;
background-image: url(images/fatslice.png);
background-position: -62px -281px;
height: 500px;
}
#navbar li:hover li, #navbar li.hover li {
float: left;
padding-left: 25px;
padding-bottom: 25px;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #363795;
position: relative;
left: 125px;
top: 25px;
}
#navbar li li a:hover {
color: #B00D46;
text-align: left;
position: relative;
left: 125px;
top: 25px;
}
#foobar1 {
position: absolute;
left: 62px;
top: 1px;
clear: both;
}
#foobar2 {
position: absolute;
left: 149px;
top: 1px;
clear: both;
}
#foobar3 {
position: absolute;
left: 32px;
top: 1px;
clear: both;
}
-->
</style>
<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="index3-03_">
<ul id="navbar"><li><a href="index.html" target="_self">HOME</a></li>
<li><a href="usage.html" target="_self">THIS IS BROKEN</a>
<ul>
<span id="foobar1"><a href="index.html" target="_self">HOME</a></span>
<span id="foobar2"><a href="usage.html" target="_self">THIS IS BROKEN</a></span>
<span id="foobar3"><a href="faq.html" target="_self">FAQ's</a></span>
<li><a href="parents.html" target="_self">PARENTS</a></li>
</ul>
</li>
<li> <a href="faq.html" target="_self">FAQ's</a></li>
</ul>
</div>
</body>
</html>
any help would be much appreciated |
|||||||