Jump to content

Search the Community

Showing results for tags 'navigation'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar




Website URL








Found 38 results

  1. Good day everyone! I will admit right off the hop that I know very little about javascript programming but I hope that with your help, I can learn something today. I've looked on w3 and elsewhere to find my answer but I have not been successful. I think what I'm trying to do is simple... Using w3.css, I am trying to create a navigation menu that will include more than one dropdown menu. I have the menu working to a point. Right now if I click on the three links with sub menus, the sub menus will display. However, they do not 'hide' unless I click on the top-menu link. That is, if I click on 'Training', the sub menu appears but will only disappear if I click on 'Training' again. Of course I want the sub-menu to disappear if I click anywhere outside the sub-menu or have another sub-menu appear if I click on its top-menu link. I've attached my html file for you to have a look. Any help and guidance would be greatly appreciated. Thanks so much! Have a great day! <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <div class="w3-container"> <ul class="w3-navbar w3-light-grey"> <li><a href="#">Home</a></li> <li class="w3-dropdown-click"> <a onclick="myFunction()" href="#">Manuals <i class="fa fa-caret-down"></i></a> <div id="sub-menu" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Power Unit/Truck/Bus Safety Inspections and Standards</a> <a href="#">School Bus Safety Inspections and Standards</a> <a href="#">Trailer/Semi-Trailer Safety Inspections and Standards</a> <a href="#">Motorcycle Safety Inspections and Standards</a> </div> </li> <li class="w3-dropdown-click"> <a onclick="myFunction2()" href="#">Forms <i class="fa fa-caret-down"></i></a> <div id="sub-menu2" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Supply Form</a> <a href="#">Backup Forms</a> <a href="#">Station Application</a> </div> </li> <li class="w3-dropdown-click"> <a onclick="myFunction3()" href="#">Training <i class="fa fa-caret-down"></i></a> <div id="sub-menu3" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </li> <li><a href="#">Who to Call</a></li> </ul> </div> <script> function myFunction() { var x = document.getElementById("sub-menu"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } function myFunction2() { var x = document.getElementById("sub-menu2"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } function myFunction3() { var x = document.getElementById("sub-menu3"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> test.html
  2. W3.CSS Dropdown content issues

    I'm having an odd issue with a drop-down menu using w3.css and the w3-bar, w3-dropdown-hover & w3-dropdown-content classes to create a drop-down navigation menu. When the dropdown content contains only one or two links, it works fine, but anything more causes the dropdown content width to extend far further than necessary. I'm sure I'm doing something wrong, but I followed the example given on https://www.w3schools.com/w3css/w3css_navigation.asp and I can't see where I've messed it up. I've attached a screenshot showing the oddly wide dropdown menu, and the live site can be visited at www.aridsmart.com if anyone wants to check out my CSS and HTML.
  3. Changing Object Size in Relation to Window

    I recently took over somebody else's website and am trying to get an element to size up and down when the window changes size. I tried to add Position: Absolute; to no avail. I currently have it as Position: Fixed so it moves with the scroll. Specific page is here and I'm referring to the three sidebar nav menus on the left. #mySidenav a { position: fixed; /* Position them relative to the browser window */ left: -25px; /* Position them outside of the screen */ transition: 0.3s; /* Add transition on hover */ padding: 15px; /* 15px padding */ width: 200px; /* Set a specific width */ text-decoration: none; text-align: center; font-size: 18px; /* Increase font size */ color: white; /* White text color */ border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */ } #mySidenav a:hover { left: 0; /* On mouse-over, make the elements appear as they should */ text-decoration: underline; } #board { top: 320px; background-color: #5d2a2c; } #blog { top: 380px; background-color: #5d2a2c; } #kidswehelp { top: 440px; background-color: #5d2a2c; Any help would be beyond amazing.
  4. Hey guys. So I have just learned the basics of HTML and CSS and I am on my way to creating my first real website. But I have this problem - I have a navigation bar with a dropdown button (which contains links to products). And when I am going to create a new html page - lets say another product (that sits inside the dropdown) I then have to update the navigation bar code on every page I have. This is not wise to do - repeating the same code, error prone, etc. Is there a proper way to write navigation bar once and have it on every page? I mean, can I embed it somehow? Or embed product pages? Thanks.
  5. w3-sidenav accordions issue

    Hi, I'm trying to setup a sidenav with multiple accordion dropdowns. The first one seems to work fine but the rest just reopen the first in the list. Anyone any idea what I'm doing wrong? It may well be blatantly obvious as I'm no expert! Thanks, Dave. The code I'm using (css) is: ____________________________________________________________________________________ <nav class="w3-sidenav w3-light-grey w3-card-2" style="width:140px;"> <a href="index.php">Home</a> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">First group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="one.php">one</a> <a href="two.php">two</a> <a href="three.php">three</a> </div> </div> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">First group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="four.php">four</a> <a href="five.php">five</a> <a href="six.php">six</a> </div> </div> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">Second group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="four.php">four</a> <a href="five.php">five</a> <a href="six.php">six</a> </div> </div> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">Third group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="seven.php">seven</a> <a href="eight.php">eight</a> <a href="nine.php">nine</a> </div> </div> <a href="https://twitter.com/my_page" target="_blank"><img src="/img/twitter.gif" width="100px"></a> <a href="https://www.facebook.com/my_page/" target="_blank"><img src="/img/facebook.gif" width="100px"></a> </nav> ____________________________________________________________________________________
  6. Hi there, I just recently started using w3.css and was looking for some code template for a navigation bar, that is responsive. Here on your website there is just one useful suggestion for a collapsing navigation bar (near the end). Sadly this didn't help me with a navigation bar, which has a dropdown element, since these links won't be displayed on small devices (especially since hovering is not supported on most respective devices). So I made a few alterations based on the try it code (original code here) to make it work. I wanted to post my modifications here so, if you think they are useful, they might be implemented as another code snippet for orientation on the w3.css navigaton page. Hope you enjoy, if not so be it my code: <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <ul class="w3-navbar w3-large w3-black w3-hide-small"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li class="w3-dropdown-hover"><a href="#">Dropdown Hover</a> <div class="w3-dropdown-content w3-card-4"> <a href="#">Sublink 3a</a> <a href="#">Sublink 3b</a> <a href="#">Sublink 3c</a> </div> </li> </ul> <a class="w3-center w3-hide-medium w3-hide-large" href="#" onclick="myFunction()"> <div class="w3-black" style="padding: 8px 16px"> ☰ </div> </a> <div id="demo" class="w3-hide w3-hide-large w3-hide-medium"> <ul class="w3-navbar w3-left-align w3-border-top w3-large w3-black"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Dropdown Hover</a> <ul class="w3-navbar w3-left-align" style="padding-left: 15px;"> <li><a href="#">Sublink 3a</a></li> <li><a href="#">Sublink 3b</a></li> <li><a href="#">Sublink 3c</a></li> </ul> </li> </ul> </div> <div class="w3-container"> <p>In the example below, the navigation bar is replaced with a button (☰) in the center when shown on tablets and mobile devices. When the button is clicked, the navigation bar will be displayed stacked. Dropdown Menus will be displayed, since mobile devices don't support hovering.</p> <p>Resize the screen to see the effect.</p> </div> <script> function myFunction() { var x = document.getElementById("demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> Peace and love
  7. Hello W3Schools! Its been a while I am trying to help a friend setting up he's webshop. It is already online but trying to make it look more nice according to webdesign template - this is hes website shop (www.thai-online.dk) i have already changed A LOT on this design, now i mostly need the menu... as you see the menu navigation has a lot of categories, and he told me that he wanted to add a lot more in the future if this shop could run online, so i am trying to figure out a solution for this. I already like the design myself, except the menu, so i have come to a solution that i am working on and hopefully you can help me out, work with me. As you see i currently have added 13 Categories, now my idea is to code some PHP into the menu on OpenCart so that if the menu design is ABOVE "1100px" in width AND has more than 7-8 categories on the menu, it will only show the 7-8 categories and at the end of it all show a little plus sign "+", when clicked on the plus sign a little side-menu will appear out from that little plus sign. The reason for using the 1100px width thing is to know if its on a pc orr on a mobile (if you know a better way please tell me, this is just to show you what i want) i know for sure the "plus sign" already has been made somewhere, but how to actually do it? We are using opencart version or something like that... this is the code i found on the .tbl file: <?php foreach ($categories as $category) { ?> <?php if ($category['children']) { ?><li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><span><?php echo $category['name']; ?></span> <img width="8" height="8" class="menu-close" src="catalog/view/theme/atr374opc2101/image/menu_close.gif" /><img width="8" height="8" class="menu-open" src="catalog/view/theme/atr374opc2101/image/menu_open.gif" /></a> <div class="dropdown-menu"> <div class="dropdown-inner"> <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?> <ul class="list-unstyled"> <?php foreach ($children as $child) { ?><!-- --><li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li><!-- --><?php } ?> </ul> <?php } ?> </div> <a href="<?php echo $category['href']; ?>" class="see-all"><span><?php echo $text_all; ?> <?php echo $category['name']; ?></span></a></div> </li><?php } else { ?><!-- --><li><a href="<?php echo $category['href']; ?>"><span><?php echo $category['name']; ?></span></a></li><?php } ?> <?php } ?> On another note, we are also using BootStrap (latest version) to make the design responsive. And the reason why i use the 1100px width, like i said before is because of knowing if the screen is that wide AND to tell if i should be adding the category addon... if the screen however is less than 1100px (or so...), the menu should be normal. Reason why i do this is because i already like the responsive design, i only need to edit the PC-Screen design a little bit so the menu can fit without problems. Hope you all can help out one way or another, still struggling with this little thing Thanks in advance and again, its been a while, so..... HELLO // rootKID
  8. center navigation

    Hi, I've downloaded a template and I'm now editing it in Dreamweaver. I am trying to center the top navigation menu, and from some reason I can't do it. Please see attached screen shot of the style sheet. Any advice would be helpful. Many thanks
  9. this the code for the navigation of a template i want to add an external page in the menu so what should i do for adding an external html page in this menu navigation. <div id="top-menu"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a class="menu" href="#templatemo_home_page">Home</a></li> <li><a class="menu" href="#templatemo_service_page">Services</a></li> <li><a class="menu" href="#templatemo_work_page">Projects</a></li> <li><a class="menu" href="#templatemo_team_page">Our Team</a></li> <li><a class="menu" href="#templatemo_contact_page">Contact</a></li> </ul> </div> </div>
  10. CSS: Responsive Navigation Menu

    Hello, I recently added different menu navigations for specific pages on my site: millcityenergy.com using the wordpress plug-in page specific menu items while it works fine for desktop, the mobile version displays all the pages in the dropdown (select a page). I've tried different custom css codes and as a novice, I have been unsuccessful. Screenshot attached. Any idea of how to narrow down the pages and/or follow the same navigation as desktop? Any help will be greatly appreciated. Thank you, Lauren
  11. W3 Schools Navigation Bar

    I recently found W3 Schools site related to my search for information on navigation bars. What I am most interested in learning is how to build a navigation bar that matches what W3 Schools has on their own website. I especially want to learn how to build a navbar that has dropdowns that behave the like the ones they have for Tutorials and Examples. I have been unable to locate anything on their tutorials that would show me an example of how that is done. If anyone has any or could point me in the direction of where I can find some examples, I would be extremely thankful.
  12. Okay, so I'm trying to use: http://codyhouse.co/gem/3d-rotating-navigation/ but the text from my nav bar and buttons appear above it when I scroll down.. https://gyazo.com/fdb218e18dbe364635fd9652c693eaaa https://gyazo.com/f26263256f2a0e55488150d9ff008b10 Anybody know hot to fix this? :3 Thanks
  13. Hello All, I've been having an issue with getting this code to work on one site that was copied from another site that it works fine on. The code is basically to make the main navigation button show an "active" style to reflect what page (section/page) your on. The site I'm trying to get it work on now is: http://mototrbo.spcomm.com and this is the code I'm using: <script> $(function () { setNavigation(); }); function setNavigation() { var path = window.location.pathname; path = path.replace(//$/, ""); path = decodeURIComponent(path); $("#menu a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('current-menu-item'); $('li.current-menu-item').parents().not('ul').addClass('current-menu-item'); } }); }</script> Any thoughts and/or help would be greatly appreciated! Thanks in advance, mh
  14. Hello, I had some help here a little while ago on getting some code to work so that the buttons of the main navigation of the site reflected with page and/or section you are in/on. I am trying to re-use the code on a new site and am running into some issues...mainly, it's not working. The new site is here: http://clarkwireless.oiw10.com I ended up using this code to target all the "main/top layer" buttons: <script> var current = window.location.href; if ( current == "http://clarkwireless.oiw10.com" || current == "http://clarkwireless.oiw10.com/" || current == "http://clarkwireless.oiw10.com/index.htm" ){ jQuery('#menu > li > a[href=/index.htm]')().addClass("active"); } else if ( current.indexOf("http://clarkwireless.oiw10.com/about-us/") > -1 || current.indexOf("http://clarkwireless.oiw10.com/news") > -1 || current.indexOf("http://clarkwireless.oiw10.com/resources") > -1 || current.indexOf("http://clarkwireless.oiw10.com/videos") > -1 || current == "http://clarkwireless.oiw10.com/contact-us.htm" ){ jQuery('#menu > li > a[href$=/about-us/index.htm]').parent().addClass("active"); }</script> And I ended up using this code to catch the buttons in the drop downs: <script> $(function () { setNavigation(); }); function setNavigation() { var path = window.location.pathname; path = path.replace(//$/, ""); path = decodeURIComponent(path); $("#menu a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('active'); $('li.active').parents().not('ul').addClass('active'); } }); } </script> I've tried a few things with the CSS and within the Javascript, but it's a little over my head. Any help would be greatly appreciated! m@
  15. There is a rough sample of what's going on at saczee.com/ZTEST/build20-11.html Pay little attention to the code, though. It deliberately violates "best practices" and is less than half done. It simply gives an idea of what the mega-menu structures are intended to do. Also keep in mind, the positions and sizes of the mega-panels are not fixed - and will change from edition to edition (of an online newspaper). The solution, if there is one, must be something that works independent of other features of containers and their styling. It needs to pretty much confine itself to matters of visibility in hovered and toggled states and invisibility at other times. Setup: Its a routine inline-block navbar. there's underlayment containers for certain function and class switches on the list-items themselves for certain functions (on/off/active/dropdown/etc...) nothing special. the anchors are kept relatively clean and have no function except those without submenus - they serve as links - the others just serve as titles for submenus. Straightforward to that point. There are also two primary types of li links - ones that will have dropdown menus of some sort, others that will have mega-menu like panels that use divs as their principle content containers rather than ul/li submenus. Problem: The problem is handling the event actions on the list items. In particular, the gaps or deadspace if one is in hover mode. The mega-panels may be absolutely positioned anywhere on the page. So, when one hovers a navbar link the panels appear, but in traversing to the panel one must pass through unhovered-space (containers that are not associated (often cannot be) with the navbar structure at all. I can get the panels to appear, I can move them around and size them as I wish. I cannot manage to 1) keep them visible when leaving the link to go to them, 2) keep the link hover style active when I leave the list-item. My visibility is controlled with opacity, visibility and overflow and the panels put in block mode when visible (for a variety of reasons I do not wish to use negative margins or display:none properties to handle visibility.)What I've looked at a lot of toggle featured solutions like bootstrap and such. don't want to use them. Other simpler solutions I've seen with jquery, js and css combinations just miss what I'm trying to accomplish. I'm guessing some combination of css and js will do the trick, but I've no js experience. What I'd settle for: To be able to hover from the li to the separate div panels without losing the hover effect on the link or the visibility of the mega-panel. When the pointer is on the panel, both visibilities should remain. Then, when the hover is removed from the panel the panel should become invisible again and the style on the link go back to its unhovered state. What I'd like is: on hover the link styling for hover lights up and the mega-panel appears (stays on as long as the link is hovered. One can then travel to the panel and both elements remain in hover state. if one then clicks either the link or the panel, both are toggled and retain the hovered state visibility. If either are then clicked, then the panel becomes invisible and the link loses its hover styling when the pointer leaves it. I figure the thing takes a combination of js and css classes to put on the event initiators and their targets. If anyone has seen this somewhere or has/can create something like that, my thanks in advance. I haven't found anything like it elsewhere.
  16. Navigation menu bugged

    Hello, I'm very new to CSS and I have a small issue with a navigation menu. Whenever I have a full screen and I don't resize my browser nothing is wrong. However whenever I resize on some pages the bottem of the navigation is gone. In the following picture the bug will be displayed: When I have my full screen again and refresh the page it will be normal again as displayed in the following picture: This bug makes mobile devices have issues from time to time and cannot see the whole navigation. If you need a live view you can navigate to my test page located here: http://testingcss.hostingsiteforfree.com/ Thank you for reading and have a nice day.
  17. Hi! My site's navigation looks and works pretty clean for computer use and viewing but when I pull it up on my iphone it's pretty sloppy.. I am looking for a way to code it for mobile devices so its a clean responsive look and user functionality isn't difficult to figure out.. Here is the site.. www.asamusic.us Thanks!!
  18. I just put together my own website on Weebly and need someone to give me some feedback on ease of navigation, the photos of my work, the text, and overall. I would also like to know what is the best way to advertise to get people to my site. I have almost a non-existent budget for more advertising since I'm also applying to outdoor juried shows. I have already tried Google adwords but got nowhere with that. Thanks in advance www.silverclouddesigns.net
  19. Hi everyone. I have been trying to solve a problem that top navigation css affects other div menus. (margin, background color) Here my all source are: <!doctype html> <style> @charset "UTF-8"; body { font: 9pt, Helvetica, Arial, sans-serif !important; font-family: Sans-Serif; margin: 0px; padding: 0px; border:0px; color: #333; } dl, dt, dd{margin:0px; padding:0px; border:0px;} dl, dt, dd a, a:visited, a:hover, a:focus{margin:0px; padding:0px; border:0px;} div {border:0;} Img {border:0;} Img Img a:visited, Img a:hover {border:0; margin:0; padding:0;} a {margin:0; padding:0; border:0;} ul, li{list-style:none; border:0px; padding:0px; margin:0px;} ul, li a, a:visited, a:hover, a:focus{list-style:none; border:0px; padding:0px; margin:0px;} #wrapper{width:1000px; *zoom:1; margin:0px; padding:0 10px 0 10px; text-align:center;} #wrapper:after{content:""; clear:both; display:block; } #top_logo{ width:1000px; height:70px; border:#000 1px solid; text-align:center; } #top_logo ul li a, a:visited, a:hover{ position:relative; width:140; height:32px; padding:19px 430px 19px 431px; } #top_lang{ *zoom:1; position:absolute; width:1000px; top:0px; padding:0px; margin-top:2px; float:right; } #top_lang:after{content:""; clear:both; display:block;} #top_lang ul{position:relative;} #top_lang ul li{float:right;} #top_lang ul li a, a:visited{ margin:0; padding:0 1px 0 0; border:0; display:block; width:17px; height:12px; } #top_menu{width:1000px; height:50px; margin-bottom:20px; clear:both; border:1px #FF0000 solid;} #top_menu ul{position:relative;} #top_menu ul li{float:left; text-align:center;} #top_menu a, a:visited{ margin:0; padding:0; border:0; display:block; width:166px; height:32px; padding-top:18px; background-color:#345a92; color:#fff; font-size:10pt; font-weight:bold; text-decoration:none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } #top_menu a:hover{background-color:#0575b2; font-weight:bold;} #top_menu ul li:last-child a, a:visited{ margin:0; border:0px; padding:0; width:170px; height:32px; padding-top:18px; } #top_menu ul li:last-child a:hover{ background-color:#cf4e56; } #top_menu ul li:last-child a:after{content:""; clear:both;} /* Top Menu CSS end */ </style> <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="dist/iepp.min.js"></script> <![endif]--> <body> <div id="wrapper"> <!-- top start --> <!-- language selection start --> <div id="top_logo"> <ul> <li><a href="index.php"><img src="Images/Logo_KFCSED.jpg" title="HOME" alt="to main page"></a></li> <!-- <li><img src="Images/main_slogan.jpg" id="slogan"></li> --> </ul> </div> <div id="top_menu"> <ul> <li><a href="about_us.php">About Us</a></li> <li><a href="get_involved.php">Get Involved</a></li> <li><a href="project.php">Projects</a></li> <li><a href="Partners.php">Partners</a></li> <li><a href="contact_us.php">Contact Us</a></li> <li><a href="#">DONATE</a></li> </ul> </div> <!-- top_navi menu end --> <!-- top end --> </div> </body> </html> div id "top menu" affect other divs and change all background color - top_logo, and other main contents. (I put example preview of IE8) Could you explain me why this li a, a:visited affects others? Have no idea.......and it is killing me! Thanks in advance.
  20. Transparent Navigation Bar

    good day! so im working on a certain parallax website, newbie here aneways. The problem is i want my navigation bar to be transparent just like this site : http://www.xplaye.com/en/ i tried using opacity and background :transparent but it does not work at all. it only gives me a navigation that has a white background and i really want it to be transparent as if menu items were floating. anyone who has an idea? answers are greatly appreciated. thanks a lot CHEERS! heres my css : .nav{ height: 40px; width:auto;}.nav ul li{ list-style:none; text-decoration:none; display: inline-block; padding: 10px; padding-right:20px; float: right; }.nav ul li a { text-decoration: none; color:#FFF; font-family:Calibri; }.nav ul li a:hover { color: #6be0d6;}.nav ul li a:active{ color: #6be0d6; }
  21. Collapsible Sidebar Navigation links

    Hi. I've worked with HTML a bit in the past but I'm a bit rusty. Actually, I'm very rusty as it's been some time. When the Home page for my online shop loads, the sidebar navigation links are all open - both the Parent links and all the sub-links as well-and I want just the Parent links to appear as closed, and then have all the associated sub links open when the Parent link is clicked. Subsequently, all the subsection links would open and close when clicked, either individually or when the Parent link is reclicked to close the entire section. As it is now, there about 50 links open when the Home Page loads and the sidebar looks very messy and cluttered, and downright confusing and intimidating. What code would I use to get the Parent Links to be visible first (and closed) when the Home Page loads, and then have all the other links open and close as needed? Thanks.
  22. Navigaiton font color; 2 types

    How to change only part of the font to a different color in a navigation link? See my website; www.cleareyesight-batesmethod.info On the left < is the navigation. I want the top words in each pages navigation to be in green and the rest of the text to stay navy blue. Example, in the home page, top navigation; I want NATURAL EYESIGHT IMPROVEMENT to be green. The rest of the text under it to stay navy. When I try to change the color it does not work and it also causes spaces between the 2 different colored text. How to do this? Maybe in html? Thanks, Mary
  23. Good day! how can i get rid of those extra space on my dropdwon menus? (see attachment) any ideas? thanks a lot! Cheers! neways heres my code <div class="nav"> <ul> <li>Contacts</li> <li>e-Book</li> <li>Blog</li> <li>Projects <ul> <li>On-going Projects List</li> <li>Completed Project List</li> <li>Project Gallery</li> </ul></li> <li><a href="services.html">Our Services</a> <ul> <li>Industrial Commercial Residential</li> <li>Supply and Installation</li> </ul> </li> <li><a href="about.html">About Us</a> <ul> <li><a href="general.html">General Information</a></li> <li>Organizational Chart</li> <li>Executive Team</li> <li>Business Objective</li> <li>Affiliate</li> <li>Vehicles & Equipment</li> <li>Contractor Liscense</li> <li>Commendations</li> <li>Bonding Capability</li> <li>Location Map</li> <li>Career</li> <li>Testimonial</li> </ul></li> <li><a href="index.html">Home</a></li> </ul> </div> .nav{ padding-top: 50px; margin-right: 10%; color:#666; text-decoration: none; } .nav ul li{ float:right; display: inline-block; text-decoration: none; padding: 10px; }.nav ul li a:link{ text-decoration:none; color:#333;}.nav ul li:hover{ color:#fad814; }.nav ul li a:active{ color: #fad814;}.nav ul li a:visited{ color: #666;}.nav ul ul { visibility: hidden; position: absolute; top: 120px; display: block; background-color: #444; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; transition: all .2s ease-in-out; padding-bottom:1px; margin: 10px 0px 0px 0px;}.nav ul li:hover > ul { opacity: 1; visibility: visible; margin:0px; z-index: 30; display: block; }.nav ul li ul li{ margin-left: 0px; list-style:none; text-decoration:none; float:none; display: block; border: 0; box-shadow: 0 1px 0 #111, 0 2px 0 #666; color: white;}.nav ul li ul li:hover{ background-color:#FC0; color:white; }.nav ul li ul li a:visited{ color: white !important;}.nav ul li ul li:first-child{ border-top-right-radius:5px; -moz-border-top-right-radius:5px; -webkit-border-top-right-radius:5px;}.nav ul li ul li:last-child{ border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; box-shadow: 0 0px 0 #111, 0 0px 0 #666;}.nav ul li ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;}
  24. Drop Down Menu Not Working

    My navigation's drop down menu just quite working. I'm not sure what the problem is. The coding is all there and looks fine, so does the CSS. I don't see anything that should be effecting it. Help? You can see the design here: http://sugar-baby.org/The navigation SHOULD drop down like this: http://i43.tinypic.com/1zodpbb.jpg
  25. Alright. So I'm attempting, quite unsuccessfully, to make the navigation bar at the top of my page to be the full width of whatever screen it is being viewed on. It's one of those simple navbars you can find tutorials on everywhere. (If I get some of the lingo wrong here, feel free to correct. I'm still learning.) ul {list-style-type:none; margin:0; padding:0; overflow:hidden;}li {float:left;}a:link,a:visited {display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:12px; text-decoration:none;}a:hover,a:active {background-color:#7A991A;} <ul><li><a href="home">Home</a></li><li><a href="portfolio">Portfolio</a></li><li><a href="services">Services</a></li><li><a href="contact me">Contact Me</a></li></ul> I'd appreciate any sort of help.