|
CSS - Css Navigation Drop Down Menu Not Working, Help?
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> Similar TutorialsHi I have used this drop down navigation as the main navigation on my website, it drops down perfectly in firefox but won't drop down in IE??? Is there something I am missing or could add to make it work?? My sites below and css byronyoga(dot)com byronyoga(dot)com(slash)templates(slash)css(slash)style.css (the style is down the bottom of the css) Thanks. 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. Hello, and thanks so much in advance for any assistance you could offer. Let me start by stating that I have limited computer knowledge. I'm having problems with a drop-down menu, but if you really don't think the drop-down menu is good (I got it from somewhere else and then tweaked it through guess-and-check work), then I'll listen if you can recommend me a better one. But I'm afraid to spend the high amount of hours it would take me to switch to a different type of drop-down menu, only for someone else to tell me the new one isn't good, so please don't suggest an alternative unless you're positive it's much better. The problem with my drop-down menu is that it doesn't work well in IE9. Note that it's designed to work when you hover over an image, as opposed to over text, and I'd like to keep it this way. The problem is that only the first item on the first drop-down level appears in IE9. Or, if you're in compatibility view, everything works except the margin or padding seems to throw off the background-color highlight when you hover over with your cursor, instead of highlighting the whole item it just gives a bar of highlight at the top of the item. I'm not overly concerned about the highlighting issue, but I realize many people won't have compatibility mode on in their browsers, so it won't work for them at all. Here is the CSS code for the drop-down menu, followed by an example of it in use: Code: ul#css3menu,ul#css3menu ul{
list-style:none;border-width:0px;}
ul#css3menu ul{
display:none;position:absolute;98%;right:1px;-moz-box-shadow:0.7px 1px 1px #777777;-webkit-box-shadow:0.7px 1px 1px #777777;box-shadow:0.7px 1px 1px #777777;background-color:#FDFCDC;padding:0px 0px 0px 0px;border:1px solid #0D0D0D;}
ul#css3menu li:hover>*{
display:block;}
ul#css3menu li:hover{
position:relative;background-color:transparent;}
ul#css3menu ul ul{
position:absolute;top:-2px;right:100%;}
ul#css3menu{
display:block;font-size:0;float:left;}
ul#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
margin:0;}
ul#css3menu ul>li{
margin:0;}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
ul#css3menu a{
display:block;text-align:right;font:bold 15px "arial narrow";color:#FF0000;background-color:#0D0D0D;border-width:0px;border-style:none;}
ul#css3menu ul li{
float:none;margin:0;}
ul#css3menu ul a{
text-align:right;padding:3px 0px 3px 0px;background-color:#0D0D0D;border-width:0px;border-style:none;font:bold 15px "arial narrow";color:#FF0000;padding-right:6px;padding-left:6px;}
ul#css3menu li:hover>a{
background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu span{
display:block;overflow:visible;}
ul#css3menu ul li:hover>a{
background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu._>li>a{
padding:0;}
So here is an example of the drop-down menu. This is only part of it, as the whole thing is very long. I think you can understand how it works like a tree, but let me know if you want more details. Code: <div style="position:absolute; top:53px; right:130px; z-index:6;">
<span class="menu"><ul id="css3menu">
<li class="toplast"><span><a class="noyellow" href="http://www.themetaldiscourser.com/aggregator/index.php"><img src="http://www.themetaldiscourser.com/images/menulink-aggregator-2.png" style="filter:alpha(opacity=90); opacity:0.90; width:123px; height:18px;"></a></span>
<ul>
<li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/business-career-and-technology-index.php">Business, career & technology</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/accolades.php">Accolades</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/charity.php">Charity</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/instructional.php">Instructional</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/legal-controversy.php">Legal controversy</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/miscellaneous-business-and-career.php">Miscellaneous business and career</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/live-performance.php">Live performance</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/incidents.php">Incidents</a></span></a></li>
</ul>
</li>
<li><a href="#"><span><a href="/aggregator/marketing.php">Marketing</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/popularity.php">Popularity</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/technology.php">Technology</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/instrumentation.php">Instrumentation</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/internet.php">Internet</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/production.php">Production</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/radio.php">Radio</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/internet-radio-stations.php">Internet radio stations</a></span></a></li>
</ul>
<li><a href="#"><span><a href="/aggregator/video.php">Video</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/video-games.php">Video games</a></span></a></li>
</ul>
</li>
<li><a href="#"><span><a href="/aggregator/stores.php">Stores</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/store-reviews.php">Store reviews</a></span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/genre-qualification-and-discourse-index.php">Genre qualification & discourse</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/academia.php">Academia</a></span></a>
I then bring in this drop-down menu on every page with: Code: <?php include("header.html"); ?>
I'm really so grateful for any suggestions. I recall the drop-down menu had problems in earlier versions of IE, which I managed to fix thanks to the help of others, so I though the problems were settled. I definitely don't have enough knowledge to fix this on my own, but if you truly believe I should switch to a new type of drop-down menu then I'm very willing to take your advice about that and put in the work. Ideally I already have a good drop-down menu that just needs to be tweaked, but hey, who knows. PS - I do have this at the top of my page, which in similar situations I see is often cited as being the problem if it's missing: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> dawuster.com/test/index2.htm I can't figure out why my "Manufacturers" css drop menu on the left side doesn't work. It works it its own .htm document when i was developing it but once I stick it in to a pre-existing page, it won't function. Thanks in advance! Hi, I'm totally new to css so all help appreciated First, here's my site: www. hornet .edu .hk /dev As you can probably see, I'm trying to edit a template for joomla. The drop down menu for 'Test 1' is split up, so once I hover beyond 'Sub Test 1' the menu disappears. I want my submenu items to stick together so that it'll work, but I don't know where to start. can anyone help? thanks! templace.css: /*****************************/ /*** Core html setup stuff ***/ /*****************************/ html { height: 100%; margin-bottom: 1px; } form { display:inline; } body { margin: 0px 0px 0px 0px; width: 100%; display: table; background:url(../images/bg_page.png) #DDDDDD top repeat-y; } body, td{ font-family: "Trebuchet MS"; font-size: 13px; color: #000; line-height: 1.3em; } a:link, a:visited { text-decoration: none; font-weight: normal; } a:hover { text-decoration: underline; font-weight: normal; } input.button { cursor: pointer; } input.inputbox{ background:#FFF; font-size: 11px; color: #000; border: 1px solid #DBDBDB; height: 17px; padding:2px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } p { margin-top: 0; margin-bottom: 5px; } img { border: 0 none; margin:0px; } /*****************************************/ /*** Template specific layout elements ***/ /*****************************************/ #page_bg { padding: 0px; margin: 0px; } div#top_menu{ height:54px; margin:0px auto; width: 980px; } #topnav{ height: 54px; width:980px; margin: 0px; padding:0px; margin-top:8px; font-weight: bold; text-transform:uppercase; } #topnav ul { margin: 0px; padding: 0px 20px; width: auto; float: left; list-style-type:none; } #topnav ul li{ margin: 0px; padding: 0px; height: 42px; float: left; position: relative; margin-top:7px; margin-left:7px; } #topnav ul li a{ color: #000; font-weight: bold; text-decoration: none; padding: 0px 12px 0px 12px; height:42px; line-height:35px; display: block; float: left; -webkit-border-radius-topright: 8px; -webkit-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-topleft: 8px; } #topnav ul li a:hover{ background-color: #444444; text-decoration: none; font-weight: bold; color: #fff; } #topnav ul li ul ul { margin: -50px 0 0 297px; z-index: 100; } #topnav ul li li { width:auto; height: 30px; margin-left:0px; -webkit-border-radius: 8px; -moz-border-radius: 8px;} #topnav ul li li a { color: #FFFFFF; text-transform: none; display: block; background: none; width: 277px; border-left: 0px; padding: 0px 10px 0px 10px; height:30px; line-height:30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; } #topnav ul li li a:hover{ background: none; background-color: #FFFFFF; left: 0; width: 277px; padding: 0px 10px 0px 10px; height:30px; } #topnav ul li ul { left: -999em; top: 26px; left: 0; display: block; height: 36px; width: 277px; position: absolute; z-index: 99; left: -999em; clear: left; margin-top: 0px; margin-left: 0px; padding-left:0px; } #topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { left: -999em; } #topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; } #topnav ul.menu li{ background-image:none; } div#main_bg{ margin:0px auto; width: 980px; text-align:left; } div#h_area{ margin:0px auto; width: 980px; height:559px; text-align:left; padding-top:10px; } div#h_area img{ margin-left:14px; } .logo{ display: block; float:left; padding-top:5px; margin-bottom:10px; margin-left:10px; width:520px; } a.logo,a.logo:link,a.logo:hover, a.logo:visited{ font-size:37px; line-height: 58px; color:#000; text-decoration:none; font-weight:normal; font-family: "Trebuchet MS"; } div#position0{ float:right; text-align:left; margin-right: 20px; margin-top: 10px; } div#position0 div.search{ width: 222px; height:46px; text-align:left; background: url(../images/search_bg.gif) top left no-repeat; } div#position0 div.search .inputbox { background:#FFF; width: 156px; height: 17px; font-size: 11px; color: #000; margin:10px 0px 0px 50px; border: 1px solid #DBDBDB; padding:5px 2px 2px 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } div#position0 label{ display:none; /* joomla 1.6 update */ } #leftcolumn{ margin-left:9px; padding:0px; width:205px; float:left; } #rightcolumn{ margin-right:9px; padding:0px; width:205px; float:right; } #maincolumn{ width:520px; float:left; margin:0px 10px 0px 10px; padding:0px; overflow:hidden; } #maincolumn_middle{ width: 730px; float:left; margin:0px 10px 0px 10px; padding:0px; overflow:hidden; } #maincolumn_big{ width: 957px; float:left; margin:0px 10px 0px 10px; padding:0px; overflow:hidden; } div.path{ margin:10px 0 0 0px; padding: 5px; padding-left:30px; background:url(../images/breadcrumbs_bg.png) top left no-repeat; } div.nopad { float:left; padding:0 0px 15px 0px; } div.nopad ul { clear: both; } /*joomla 1.6 update start */ .item-separator { height:10px; line-height:10px; } .items-more { border:1px solid #0F0; } table.category{ border:1px solid #CCC; width:100%; text-align:center; } table.category th,table.category td{ padding:2px 6px; } table.category thead{ background:#EEE; } .jcat-children ul,.jcat-children li{ margin:0; list-style:none; } .jcat-children li a{ background:url(../images/bullet_green_arrow.png) no-repeat 0 12px; display:block; padding:5px 5px 5px 15px; font-size:0.9em; } .image-left { float:left; margin:0 15px 5px 0; } /*joomla 1.6 update end */ #leftcolumn div.moduletable_menu, #leftcolumn div.moduletable_menu, #leftcolumn div.moduletable, /* joomla 1.6 update */ #leftcolumn div.module_menu, #leftcolumn div.module{ margin: 10px 0px 0px 0px; padding:0px; width: 205px; } .article_column { padding-right:10px; } #rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{ margin: 10px 0px 0px 0px; padding: 0px 0px 3px 0px; width: 205px; } div.bannergroup_text { margin:0px 13px 15px 13px; } .bannerheader { font-weight:bold; margin-bottom:10px; } .banneritem_text { margin-bottom:10px; } .bannerfooter_text { margin-bottom:10px; } #leftcolumn div.module_menu, #rightcolumn div.module_menu, /* joomla 1.6 update */ #leftcolumn div.moduletable, #rightcolumn div.moduletable, /* joomla 1.6 update */ #leftcolumn div.moduletable_menu, #rightcolumn div.moduletable_menu, /* joomla 1.6 update */ #leftcolumn div.module_menu div div div, #leftcolumn div.module div div div, #rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{ background: url(../images/rub_bottom.png) center bottom no-repeat; } #leftcolumn div.module_menu div div div, #leftcolumn div.module div div{ margin: 0px; padding: 0px; padding-bottom:5px; width: 205px; height:auto; } #leftcolumn div.module_menu div div div div, #leftcolumn div.module div div div div{ background: none; padding:4px 8px; } #leftcolumn h3, #rightcolumn h3{ text-align: left; padding-left:15px; height: 42px; width: 190px; line-height: 40px; color:#FFFFFF; font-size:19px; margin:0px; font-weight:normal; text-shadow: #1F1616 1px 1px 1px; } table.poll thead td { text-align: left; padding-left:10px; } table.poll td { text-align: left; } #leftcolumn ul.menu li ul{ list-style: none; } .pollstableborder { margin: 5px 0px 10px 0px; } .poll td div{ display:inline; } /* forms #leftcolumn .moduletable ul, #rightcolumn .moduletable ul { margin: 6px 0; list-style: none; } #leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li { margin: 0; padding: 0 2px; } .moduletable ul { padding:5px 10px 5px 12px; margin:0px; } .moduletable ul li { padding:0px 10px 5px 15px; margin:0px; line-height:18px; }*/ #leftcolumn ul.menu li#current ul li, #rightcolumn ul.menu li#current ul li { margin: 0px; padding: 0px; } ul.menu { padding:5px 10px 5px 12px; margin:0px; } ul.menu li{ padding:0px 10px 5px 15px; margin:0px; } ul.menu li ul { padding:0px 0px 5px 0px; margin:0px; } ul.menu li ul li{ padding:0px 0px 0px 15px; border:none; } ul.menu li#current ul li a{ margin-left:15px; text-decoration:none; } ul.mostread { padding:5px 10px 5px 12px; margin:0px; } ul.mostread li{ padding:0px 10px 5px 15px; margin:0px; line-height:18px; } ul.latestnews, ul.weblinks { padding:5px 10px 5px 12px; margin:0px; } ul.latestnews li, ul.weblinks li{ padding:0px 10px 5px 15px; margin:0px; line-height:18px; } div.componentheading{ font-size:16px; font-size:19px; margin:7px auto; } td.contentheading{ font-weight:normal; vertical-align:top; font-size:19px; height:30px; color:#363636; background: url(../images/contentheading_ico.png) left top no-repeat; } table.contentpaneopen td.contentheading{ padding-left:34px; } table.contentpaneopen{ border-collapse: collapse; margin-left:5px; } td.buttonheading{ padding:0px 2px 0px 2px; } table.contentpaneopen td{ padding:0px; } .contentpaneopen p{ line-height:22px; } span.small, td.createdate, td.modifydate{ font-size:11px; color:#999999; } span.pagination span, span.pagination a{ padding:5px; } form#login-form { /* joomla 1.6 update */ padding: 0px; margin: 0px; } fieldset.userdata { /* joomla 1.6 update */ border: none; margin: 0px; padding:10px 10px 10px 20px; } form#login-form ul { /* joomla 1.6 update */ margin:0px 0px 20px 0px; width:120px; } form#login-form ul li{ /* joomla 1.6 update */ padding: 0px; margin: 0px; list-style: disc; background-image:none; } form#login-form ul li a { /* joomla 1.6 update */ text-align: left; font-size: 10px; color: #858585; } #login-form #modlgn-username, #login-form #modlgn-passwd{ width:150px; } div#bottom { width:100%; margin:0px auto; background:#000000; float:left; } div#f_area{ background:#757575; margin:0px auto; width: 960px; text-align:left; margin-bottom:3px; } #f_area div.newsflash { color:#FFF; padding:5px 10px; } #f_area div.moduletable, #f_area div.moduletable_menu{ float: left; margin:10px 5px 10px 5px; width: 309px; } #f_area h3{ text-align: left; vertical-align:bottom; height: 35px; width: 294px; color:#FFFFFF; font-size:21px; font-family:"Trebuchet MS", Tahoma, Verdana; font-weight:normal; margin:0px; padding-left: 10px; padding-top:15px; } /* joomla 1.6 update start */ /* pagenav */ #main ul.pagenav { list-style-type:none; padding:0; overflow:hidden } ul.pagenav li { display:inline-block; padding:0px; margin:0; } #main ul.pagenav li { line-height:2em } ul.pagenav li a { border: 1px solid #ccc; display:inline; background:#eee; padding:2px; text-decoration:none } ul.pagenav li.pagenav-prev { float:left } ul.pagenav li.pagenav-next { float:right } .article-info { margin:10px 0 10px 0px; font-size:0.9em; } .article-info-term { display:none } /* ++++++++++++++ icons ++++++++++++++ */ ul.actions { text-align:right; padding:0 ; width:100%; margin:0 } ul.actions li { display:inline } ul.actions a { text-decoration:none } /* ++++++++++++++ items more ++++++++++++++ */ .items-more { padding-top:10px; } .items-more h3 { font-weight:normal; margin:0; padding:5px 5px 5px 5px; font-size:1.4em } .items-more ol { line-height:1.3em; list-style-type:none; margin:0; padding:10px 0 10px 2px; } .items-more ol li { padding:2px; } .items-more ol li a { display:inline; margin:0; font-weight:normal; padding:5px 5px 5px 20px; } .items-more ol li a:hover, .items-more ol li a:active, .items-more ol li a:focus { font-weight:normal; padding:5px 5px 5px 20px; text-decoration:none } /* ++++++++++++++ pagination ++++++++++++++ */ #main .pagination { margin:10px 0 ; padding:10px 0 10px 0px; } #main .pagination ul { list-style-type:none; margin:0; padding:0; text-align:left; } #main .pagination li { display:inline; padding:2px 5px; text-align:left; border:solid 0px #eee; margin:0 2px } .pagenav {padding:2px} #main .pagination li.pagination-start, #main .pagination li.pagination-next, #main .pagination li.pagination-end, #main .pagination li.pagination-prev {border:0} #main .pagination li.pagination-start , #main .pagination li.pagination-start span { padding:0 } p.counter { font-weight:bold; } /* ++++++++++++++ blog ++++++++++++++ */ .cols-1 { display: block; float: none !important; margin: 0 !important; } .cols-2 .column-1 { width:46%; float:left; } .cols-2 .column-2 { width:46%; float:right; margin:0 } .cols-3 .column-1 { float:left; width:46%; padding:0px 5px; margin-right:4% } .cols-3 .column-2 { float:right; width:46%; margin-left:0; padding:0px 5px } .cols-3 .column-3 { float:left; width:100%; padding:0px 5px } .items-row { overflow:hidden; margin-bottom:10px !important; } .column-1, .column-2, .column-3 { padding:10px 5px } .column-2 { width:55%; margin-left:40%; } .column-3 { width:30% } .blog-more { padding:10px 5px } /* ++++++++++++++ readmore ++++++++++++++ */ .readmore a:link,.readmore a:visited,a.readmo link,a.readmo visited { color: #ccc; background: #222; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: none; padding:4px 8px; margin-top:10px; } .readmore a:hover,.readmore a:active,.readmore a:focus,a.readmore a:hover,a.readmore a:active,a.readmore a:focus { background: #333; color: #fff; } a.readmo hover,a.readmo active,a.readmo focus { background: #333; color: #fff; } /* joomla 1.6 update end */ /* System Standard Messages */ #system-message { margin-bottom: 20px; } #system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;} /* System Error Messages */ #system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;} /* System Notice Messages */ #system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;} #syndicate{ float:left; padding-left: 25px; } /* --- slider --- */ #slider{ width: 960px; height:415px; margin-top:5px; margin-left:10px; background:url(../images/loading.gif) no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } .nivo-controlNav { position:absolute; left:860px; bottom:10px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url(../images/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url(../images/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } .nivo-caption { text-shadow:none; font-family: Helvetica, Arial, sans-serif; } .nivo-caption a { color:#efe9d1; text-decoration:underline; } /* --- end slider --- */ I am really stuck on this, can someone guide me to a tutorial or a working double row menu bar that works for both IE and Firefox. I have made several attempts on Spry and CSS but to no avail and no-one has been able to rectify it. Theres always something not going right on both browsers with the double row drop down menu bars I have attempted. The double row drop down menu bar looks like this: [menu1][menu2][menu3] [menu4][menu5][menu6] ............................[menu6a] ............................[menu6b] 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;
}
Can someone point me to a tutorial for designing a navigation bar. I liked the current navigation bar at www.sonystyle.com . I have the image rollover scripts for the menu, but need to know how to design the graphics. I know that they use some transparent gifs as well, but need to learn how the image rollovers are being created in either fireworks or photoshop. If someone knows a tutorial for similar menu bar design then please let me know. Thanks Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Hello, I want to create Vertical Navigation menu with pure CSS. Navigation menu will have main menus name. When user click on any of main menu, it should open list of sub-menu under same navigation(menubar). i mean like tree naviation but sub-menus should open under same menus. Navigation menu is vertical menus. Example: please go to : http://www.projectseven.com/tutorials/navigation/swapclassmenu/index.htm Under Overview:How it works section: Please click on See the finished SwapClass menu link. In that page they have left hand side vertical nav-menu with sub-menus open under same navbar. I want to create like above example. Is there any tutorials or open source for this? Thank you, tec I want to make a left side navigation menu that nested menus popup beneath the parent menu when click the parent menu, submenus will be closed when clicks parent menu again How can do that using css and html? Ok, 'guys' I've hit a snag. I'm trying to redesign my website and am using blueprint css framework for the first time in my life. I've tested the layout in FF3.6, Google Chrome v8.0, Safari for Windows v5.03, IE8, and IE8 in compatibility mode [to emulate IE7]. It works great in ALL browsers I tested except emulated IE7. In this mode, the menu completely disappears except for a separate div that holds the left nav image. I have validated the html and my customized css file and have gotten rid of all errors found...but, still cannot get the nav menu to show up in emulated IE7 mode. So, I'm hoping Kravvitz or some other CSS god will come to my rescue. the short link to my dev page is http://drw65.servehttp.com/ this is a url redirect link that will redirect to my personal webspace from my ISP. thanks for reading. Hello I have a site uptogether but having a problem with my top navuigation.I have my whole pag centered in the container but the navigation is to the left and i cant seem to move it.Here is the code I have used for the navigation :- #navigation { BACKGROUND: url(../_images/navbg.jpg) #0038ba repeat-x; WIDTH: 700px; HEIGHT: 35px; } #menu { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #ffffff; PADDING-TOP: 11px } #menu .item { PADDING-RIGHT: 20px; PADDING-LEFT: 20px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-DECORATION: none } #menu .item A { COLOR: #ffffff; TEXT-DECORATION: none } #menu .item A:hover { COLOR: #ffc45d; TEXT-DECORATION: none } #categories { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; WIDTH: 240px; PADDING-TOP: 9px; TEXT-ALIGN: center } .catSelect { FONT-SIZE: 100%; WIDTH: 200px } .catSelectOrange { BACKGROUND: #ffae22 } Can anyone help me please. Cheers Stevo!! I'm working with a superfish menu. I re-colored the images and replaced them with the old images in the css. For some reason, the menu-btn_rtur is not showing up. I want it there when the menu is inactive, like you see right when you go to the home page. At some obvious points, it will need the sub indicator arrow. My client wants to launch today, so I'm really under the gun and need help-- eternally grateful to anyone who responds. Smile Site Link:staging.phantasea.net/cpi/ CSS I added: Code: #navigation-menu ul.sf-menu > li > a {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-btn_rtur.png) top right no-repeat;
display: block;
padding: 0 20px 0 0;
color: #ffffff;
text-decoration: none;
border:0 none;
cursor: pointer;
}
#navigation-menu ul.sf-menu > li > a > span {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-btn_ltur.png) top left no-repeat;
display: block;
padding: 10px 0 10px 20px;
color:#FFF;
line-height:22px;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-with-arrow-btn_rtur.png) top right no-repeat;
padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator { /* give all except IE6 the correct values */
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
background: url(../images/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
}
ORIGINAL CSS: Code: /* Begin Main Navigation Menu */
#navigation-menu {
position:absolute;
right:20px;
top:5px;
font-size:14px;
height:40px;
}
.navigation-menu {
position:relative;
z-index:22;
}
#main-menu {
background: url(../../common-images/main-menu-btm-border.png) repeat-x scroll 50% 100% transparent;
width: 100%;
position:relative;
z-index:101;
height:56px;
margin-bottom:-6px;
}
#dropdown-holder {
display: block;
position:relative;
}
#navigation-menu > ul {
padding-top: 7px;
}
#navigation-menu > * {
padding:0;
margin:0;
font-size: 1em;
}
#navigation-menu ul.sf-menu {
padding: 10px 0 0 0;
}
#navigation-menu ul.sf-menu > li {
background:none;
list-style: none;
float: left;
margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu a.default-cursor {
cursor: default;
}
#navigation-menu ul.sf-menu > li > a {
background: url(../images/menu-btn_r.png) top right no-repeat;
display: block;
padding: 0 20px 0 0;
color: #E8E8E8;
text-decoration: none;
border:0 none;
cursor: pointer;
}
#navigation-menu ul.sf-menu a {
line-height: 1.2em;
padding:8px 16px;
}
#navigation-menu ul.sf-menu a > span.sf-sub-indicator {
top: 17px !important;
}
#navigation-menu ul.sf-menu ul a > span.sf-sub-indicator {
top: 0.9em !important;
}
#navigation-menu ul.sf-menu > li > a > span {
background: url(../images/menu-btn_l.png) top left no-repeat;
display: block;
padding: 10px 0 10px 20px;
color:#FFF;
line-height:22px;
}
#navigation-menu ul.sf-menu > li {
margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
background: url(../images/menu-with-arrow-btn_r.png) top right no-repeat;
padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul:hover {
background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator { /* give all except IE6 the correct values */
background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li > a:hover {
background: url(../images/menu-active-btn_r.png) top right no-repeat;
color: #FFF;
text-decoration: none;
}
#navigation-menu ul.sf-menu > li > a:hover span {
background: url(../images/menu-active-btn_l.png) top left no-repeat;
color: #555;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a,
#navigation-menu ul.sf-menu > li.current_page_item > a {
background: url(../images/menu-active-btn_r.png) top right no-repeat;
color: #6A6A6A;
text-decoration: none;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span,
#navigation-menu ul.sf-menu > li.current_page_item > a > span {
background: url(../images/menu-active-btn_l.png) top left no-repeat;
color: #00717D;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span:hover,
#navigation-menu ul.sf-menu > li.current_page_item > a > span:hover {
background: url(../images/menu-active-btn_l.png) top left no-repeat;
color: #555;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
}
/* End Main Navigation Menu */
I have a CSS, drop-down navigation menu for my company's site, at the top of every page: http://www.mediamogulsweb.com/. It works fine in Firefox and IE6. At first it seems to work in IE7. But if you mouse over the pop-out menus a few times, you'll notice that every so often the menu breaks (in IE7). My guess is that it has to do with the display property set for the embedded unordered lists in the menu. But I have "display" set to "none", so it seems like I shouldn;t be having this problem. Can anyone help? thanks... Hey guys, Can someone help me with the following code? I've attempted two fixes, one that alters caching with JavaScript, and another fix with apache, but the server admin is restricting access to the config file. Does anyone know a work around besides these two methods (even if it's semantically incorrect)? 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*- Menu Tabs I--------------------------- */
#tabsI {
float:left;
width:100%;
/*background:#EFF4FA;*/
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
padding-bottom: 1px;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://exploding-boy.com/images/cssmenus/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://exploding-boy.com/images/cssmenus/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body>
<ul>
<div id="tabsI">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
</ul>
</div>
</body>
</html>
Hi, I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal. I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible. Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine. If any body could help me this would be great. This is what the index.html file looks like; <body> <div id="wrapper"> <div id="topwrapper"></div> <div id="mainwrapper"> <!-- Header Start --> <div id="header"> <div class="center"> <!-- Logo Start --> <div id="logo"> <a href="./index.html"><img src="./images/logo.png" alt="logo" /></a> </div> <!-- Logo End --> <div id="headerright"> <!-- Menu Navigation Start --> <div id="mainmenu"> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://" class="selected">Home</a> <li><a href="./about.html">About</a> <ul> <li><a href="#">Our Company</a></li> <li><a href="#">Vision and Mission</a></li> <li><a href="#">Testomonials</a></li> </ul> </li> <li><a href="#./.html">Services</a> <li><a href="./.html">Vehicles</a> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a> </li> </ul> </li> <li><a href="./.html">Testomonials</a> <ul> </ul> <li><a href="./html">Contact</a></li> </ul> </div> </div> <!-- Menu Navigation End --> </div> </div> </div> Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example. Well, i'm designing a website for myself and i've run into a setback(i'm totally new to web design) with the navigation and how it appears in firefox. Heres how it displays in IE, and firefox.(well my url has been blocked so showing a picture may not be possible) I'd like it to appear in firefox the same as IE.. Heres the html code: Quote: <div id="Navigation"> <ul> <li><a href="main.htm"><b>Homepage</b></a></li> <li><a href="home.html">About Me</a></li> <li><a href="home.html">My Interests</a></li><br> <li><a href="home.html">Cool Sites</a></li> <li><a href="home.html">My Opinions</a></li> </ul> </div> Css code thats formatting the <div> and its contents. Quote: #Navigation { width: 9em; border-left: 3px #000000 solid; padding: 0 0 1px 0; magin-bottom: 2px black; font-family: Verdana; background-color: #202020; color: #4b225b; text-align:c enter; font-size: 10pt; font-weight: normal; } #Navigation ul { list-style: none; margin: 0; padding: 0; border: none; } #Navigation li { border-bottom: 1px solid #202020; margin: 0; } #Navigation li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px #202020 solid; background-color: navy; color: #ffffff; text-decoration: none; width: 100%; } #Navigation li a:hover { border-left: 10px solid black; background-color: black; color: #white; } I wonder if its possible to help me find the cause of the issue as i'd prefer that it appear the same in both IE and Firefox >.> Thank you for your help |
|||||||