Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dropdown Menu Help

    I have a non Dropdown menu using html 5. The Css and Html Code are below to help

    CSS Code for Header Navigation
    Code:
    /* Header Navigation CSS */
    header nav {float:right;padding:13px 24px 0 0}
    header nav li {float:left;font-size:18px;line-height:3em;text-transform:uppercase;padding-left:21px;margin-left:19px;background:url(../images/divider.gif) repeat-y left top}
    header nav li:first-child {background:none;padding-left:0;margin-left:0}
    header nav li a {color:#fff;text-decoration:none}
    header nav li.current a, header nav li a:hover {color:#82b704}
    header .top-info {position:absolute;left:45px;top:17px}
    HTML Navigation Bar Code Non Dropdown. Coded with HTML 5
    Code:
    <header>
    		<div class="container">
    			<div class="header-box">
    				<div class="left">
    					<div class="right">
    					<nav>
    						<ul>
    							<li class="current"><a href="index.html">Home</a></li>
    							<li><a href="services.html">Services</a></li>
    							<li><a href="hosting.html">Hosting</a></li>
    							<li><a href="solutions.html">Solutions</a></li>
    							<li><a href="support.html">Support</a></li>
    							<li><a href="contacts.html">Contacts</a></li>
    						</ul>
    					</nav>
    				</div></div></div>		
    		</div>
    	</header>
    How can i convert the Navigation Bar to a Dropdown Navigation Bar that doesn't use Javascript

  • #2
    New Coder
    Join Date
    Feb 2012
    Posts
    25
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Hi Mate,

    What you will need todo is add another ul within a li, for instance:

    Code:
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a>
       <ul>
       <li><a href="#">Golf Shoes</a></li>
       <li><a href="#">Golf Clubs</a></li>
       <li><a href="#">Golf Shirts</a></li>
       </ul></li>
    
    <li><a href="#">Contact Us</a></li>
    You would then have to code your css to pick the ul within the li...

    Code:
    li ul {
      
    }
    
    or
    
    ul li ul {
    
    }
    Hope this makes sense, if not there are some great examples on the internet, just google it...

    Thanks,

    Scott
    Last edited by ScottBaxter; 02-16-2012 at 12:56 AM. Reason: proof reading

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    343
    Thanks
    3
    Thanked 37 Times in 37 Posts
    Hope this makes sense, if not there are some great examples on the internet
    Like this one: Create a Drop-Down/Fly-Out Menu with CSS, even if I say so myself.

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    25
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Frankie View Post
    Like this one: Create a Drop-Down/Fly-Out Menu with CSS, even if I say so myself.
    Haha nice!! :-)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •