|
CSS - How To Add Dropdown To Navigation Menu On Wordpress Site
I aim to create my own wordpress theme eventually, but for now I have been trying to customize free open source themes made by others.
I have a test one set up at http://www.theepicnetwork.com/gfn My query here is that I am trying to make that navigation menu function as a dropdown menu, but I can't seem to do it. I managed to make it Wordpress 3.0 compatible so I can edit the menu items through the wp admin cp. But i just need to successfully give it a drop down function. Here is all my code. ------- NAV MENU CSS Code: /* Navigations*/ #nav { position:relative; padding:0; margin:0 auto; height:68px; width:1002px; background:url(images/nav_bg.png) no-repeat center top; } #nav ul { position:absolute; z-index:1; top:0; left:50px; width:900px; height:65px; padding:0; margin:0; list-style:none; } #nav li { float:left; margin:0; padding:0; list-style:none; } #nav a { display:block; padding:27px 20px; float:left; border:none; font:bold 12px Myriad Pro, Helvetica, Arial, sans-serif; color:#fff; text-transform:uppercase; } #nav a:hover{ color:#f0ff21; background:url(images/nav_over.gif) repeat-x center top; }
INTENDED DROPDOWN CSS - I copied this from one of my other sites. Code: #dropmenu, #dropmenu ul {margin-top:0px; margin-left:3px;padding:0px; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#0A7B05; font-weight:bold;} #dropmenu a {display:block; padding:6px 1em; color:#000; border-right:0px solid #000; text-decoration:none; background:transparent url(images/menu-button.png);font-weight:bold;} #dropmenu a:hover {background:transparent url(images/menu-button-hover.png); color:#fff;} #dropmenu li {float:left; position:relative;} #dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;} #dropmenu ul a {border:1px solid #000;} #dropmenu li ul {border-top:0px solid #000; width:14.1em;} #dropmenu li ul a {width:12em; height:auto; float:left; border-bottom:1px solid #000;} #dropmenu ul ul {top:auto;} #dropmenu li ul ul {left:12em; margin:0px 0 0 10px;} #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;} #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}
HEADER.PHP MENU LAYOUT Code: <div id="nav"> <ul id="dropdown"><li><a href="<?php echo get_option('home'); ?>">Home</a></li> <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'nav' ) ); ?> </ul> </div>
----- any help will be appreciated Similar TutorialsCode: http://www.blametruthproject.com/home Hey CSS gods So I need some help with my dropdown menus, they are currently going behind the content on my posts in my blog, I think this could be fixed with CSS but I guess you guys could tell me that. Thanks, Neil. I'm editing a CSS drop down navigation that uses <ul> and <li>. Is there a way to change the background color & rollover in just one of the dropdowns? The code is below in two sections. I've highlighted the list that I'd like to change the background color of. Thanks for your help! Code: <div id="wrap"> <ul id="navbar"> <!-- The strange spacing herein prevents an IE6 whitespace bug. --> <li><a href="#"><IMG SRC="d_images/navigation_01.gif" border="0"></a> </li> <li><a href="#"><IMG SRC="d_images/navigation_02.gif" border="0"></a> <ul> <li><a href="summit_09registration.cfm">Register</a></li><li> <a href="summit_09scholarship.cfm">Scholarships</a></li></ul> <li><a href="#"><IMG SRC="d_images/navigation_03.gif" border="0"></a> <ul> <li><a href="summit_09awards.cfm">Leadership Awards</a></li><li> <a href="summit_09party.cfm">Anniversary Party</a></li><li> <a href="summit_09work.cfm">Work Project</a></li><li> <a href="summit_09dine.cfm">Dine Arounds</a></li><li> <a href="summit_09jazz.cfm">Jazz Fesitval</a></li><li> <a href="summit_09networking.cfm">Networking</a></li></ul> </li> <li><a href="#"><IMG SRC="d_images/navigation_04.gif" border="0"></a> <ul> <li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li> <li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul> </li> <li><a href="#"><IMG SRC="d_images/navigation_05.gif" border="0"></a> <ul> <li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li> <li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul> </li> <li><a href="#"><IMG SRC="d_images/navigation_06.gif" border="0"></a> <ul> <li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li> <li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul> </li> <li><a href="#"><IMG SRC="d_images/navigation_07.gif" border="0"></a> <ul> <li><a href="summit_09hotel.cfm">Conference Hotel</a></li><li> <a href="summit_09travel.cfm">Travel</a></li><li> <a href="summit_09neworleans.cfm">New Orleans</a></li></ul> </li> </ul></div> Code:
<style type="text/css">
#navbar {
margin: 0;
padding: 0;
height: 0;}
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding-bottom:0px;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
border: 0px;
color: #fff;
font-family: helvetica;
font-size: 8pt;
font-style: bold;
font-color: #ffffff;
text-decoration: none;}
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-image: url(../images/summit_nav_back.gif);}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-image: url(../images/summit_nav_back.gif);
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-image: url(../images/summit_nav_red.gif); }
</style>
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
<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>
I have a bit of an issue with a drop down script I'm working on. It's a CSS menu built from ul/li/a tags with an iframe thrown in for IE6 sake. My problem is 2 fold. The first problem is in firefox. There is 2-3px of mystery padding/margining on my tags. I didn't put it there, nor does it show up in browsers other than firefox. My second problem is a safari 2 issue. The dropdowns appear to be hidden behind some kind of container, very weird if you ask me. I'm using jQuery for my script manipulation (if you don't know about it, learn about it. Its laziness is astounding!) [Edit: link updated] http://programmer .whipplehill .com/wes/newDD/list/getPageList.asp Any help would be great! Thanks --Wes Hi, For some reason my website is not showing in IE8, just a blank white screen?. I've checked the source code, and above the doctype declaration, a comment is appearing Code: <!-- Include the header --> My website It is working fine in other browsers, but not IE8. I cannot see where this comment is comming from though?. the code for my header.php is : here Hi I have been trying to remove certain items from the admin bar which appear at the top of all WordPress pages. I've managed to remove the 'visit' menu from it by reading a forum elsewhere and editing CSS but I have had no luck with researching how to remove the site name that appears first on the left of the admin bar. Does anyone here know how I can do it? Thanks Of course I've seen lots of CSS navigation using image rollovers, and others using dropdowns, but I haven't been able to find any that use both at the same time. I'm trying to put it on a WordPress site ... Any links or help would be much appreciated! Laura S. Hey, I'm a beginner just starting out and I ran into a problem building Site Navigation Bars for a practice-website. I would like a Navigation Bar that goes horizontally across the header, as well as a separate navigation bar that goes vertically down my sidebar. I had several questions regarding this endeavor. My current CSS code for my header div#header { width: auto; height: 100px; background: #ffffff url(DSC09762.jpg); padding: 5px; border-bottom: #000000 1px solid; } What I would like to add: ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a { display:block; width:60px; background-color:#dddddd; } 1) How would I properly nest the latter part of the CSS code to the original? 2) Since I want to customize the design of the list that goes vertically down my side bar as well...I am concerned that I have to add an ID or Class Specification to each list. Am I correct in thinking this? Any tips regarding the preferred method? Help is much appreciated. Thanks! Hello, I sincerely apologize ahead of time for what I think to be the craziness of this request, but I'm about to go bonkers. I have a website set up for a guild through guildomatic and I have some customizations applied courtesy of another, more css-savvy individual. He used a "custom css" and some JavaScript to do some skinning so that his theme looked like another theme. I've made further tweaks using my good ol'fashioned try try until you succeed mentality (some C++/Perl experience) but there is one problem that I just can't wrap my head around. There is a navigation bar (including login/logout/register links) inside a table tagged "crumb" that no matter what I do I cannot get it centered so that it stays in the correct position when the window changes size. I would like for the "crumb" to show up above the banner and centered (the banner is centered too) so that they move with eachother whether your viewport is large or small. Am I completely missing something here or is there a rule that I'm not following? I've tried applying the "auto" setting to the right and left margins in various different levels of the structure and figure I either haven't found the right combination or I'm going about this the wrong way. I have tried disabling the custom CSS and JS to make sure they aren't interfering and I still can't make this happen so far. Any help would be greatly appreciated. Thanks for reading! -Ryan Here's the code: Code:
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:100000001;"></div>
<div id="root">
<table id="root_table">
<tr id="adminConsoleContainer">
<td colspan="1">
<table class="controls">
<tr>
<td class="notices"></td>
<td class="configure">
<ul class="nav controls">
<li>
<img alt="Upgrade" class="raw_icon" src="(URL address blocked: See forum rules)" title="Upgrade" />
<a href="(URL address blocked: See forum rules)=2481105406&cep=b69e9d1e6f0577c6d79da3f5d9b8e910">Add Services</a>
</li>
<li>
<img alt="Administrator Console" class="raw_icon" src="(URL address blocked: See forum rules)" title="Administrator Console" />
<a href="/console">Administrator Console</a> </li> </ul> </td> </tr> </table> </td> </tr> <tr> <td id="banner">
<div class="ggcode">
<table cellpadding=0 cellspacing=0 width="1050" style="margin-left:auto;margin-right:auto;">
<tr>
<td width="20">
<img src="(URL address blocked: See forum rules)">
</td>
<td style="text-align:left;vertical-align:top;background-image:url((URL address blocked: See forum rules));background-repeat:repeat-x;">
<img style="align:top; padding-top:0px; width:970px; height:229px" src="(URL address blocked: See forum rules)">
</td>
<td width="20">
<img src="(URL address blocked: See forum rules)">
</td>
</tr>
</table>
<script type="text/javascript" src="(URL address blocked: See forum rules)"></script>
</div>
</td>
</tr>
<tr>
<td >
<table id="crumb">
<tr>
<td id="nav">
<div class="ggcode">
<div id="menuSection">
<a href="/">Home</a> - <a href="/forums">Forums</a> - <a href="/members">Roster</a> - <a href="/raids">Raids</a> - <a href="/items">Items</a> - <a href="/raids/attendance">Attendance</a> -
<a href="/dkp">TOPP</a> - <a href="(URL address blocked: See forum rules)">Logs</a>
</div>
</div>
</td>
<td id="user_welcome"> Welcome, Valcore. <a href="/user/logout">Log out</a><br/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
Hi, everybody I'm trying to attached the CSS code you see below to the HTML/PHP code all the way at the bottom. I have tried renaming the ID to Class and replacing navigation with menu1 but no luck. How would I go about attaching this piece of CSS to the code below? Code:
.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:37px; background:#fff url(button1.gif); position:relative; border:0px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:right; height:37px; line-height:37px; color:#aaa; text-decoration:none; font-size:13px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}
How do I attach the above CSS to the HTML/PHP piece below? PHP Code: <div id="navigation"> <?php if ( function_exists( 'wp_nav_menu' ) ) { // Added in 3.0 ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'dropmenu', 'container' => '', 'container_id' => '', 'fallback_cb' => 'revert_wp_menu_page' )); ?> <?php } else { ?> <ul id="dropmenu"> <li id="<?php if (is_home()) { ?>home<?php } else { ?>page_item<?php } ?>"><a href="<?php bloginfo('url'); ?>" title="Home">Home</a></li> <?php $header_page_navigation = get_theme_option('header_page_navigation'); if($header_page_navigation == '') { ?> <?php wp_list_pages('title_li=&depth=1&sort_column=menu_order'); ?> <?php } else { ?> <?php wp_list_pages('exclude='. $header_page_navigation . '&' . 'title_li=' . '&' . 'depth=' . '1' . '&' . 'sort_column=menu_order'); ?> <?php } ?> </ul><!-- DROPMENU PAGE END --> <?php } ?> <div class="clearfix"></div> </div><!-- NAVIGATION END --> 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..??? 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? 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... 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 */
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 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. |
|||||||