...

View Full Version : Dropdown Menu Help



phillipw1994
02-15-2012, 11:15 PM
I have a non Dropdown menu using html 5. The Css and Html Code are below to help

CSS Code for Header Navigation

/* 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

<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

ScottBaxter
02-16-2012, 12:56 AM
Hi Mate,

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




<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...




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

Frankie
02-16-2012, 02:18 PM
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 (http://www.website-laten-maken-amsterdam-nh.nl/blog/how-to-make-a-menu-with-css.php), even if I say so myself.

ScottBaxter
02-16-2012, 03:08 PM
Like this one: Create a Drop-Down/Fly-Out Menu with CSS (http://www.website-laten-maken-amsterdam-nh.nl/blog/how-to-make-a-menu-with-css.php), even if I say so myself.

Haha nice!! :-)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum