i am new to CSS, XHTML and PHP, and have wrote a style sheet to display a navigation bar, with auto expanding widths etc...all the relative code is below

a:link {color: #008000; text-decoration: none}
a:visited {color: #cccccc; text-decoration: none}
a:active {color: #ff0000; text-decoration: underlined}
a:hover {color: #3300ff; text decoration: underlined}

#navigation {float: left; width: 100%; background: #000; height: 46px; padding: 10px 0px 0px 12px; background-image:url(navbg.png);}

#menu, #menu ul {padding: 0; margin: 0; list-style: none; line-height: 1;}

#menu li {float: left; font-size: 12px; font-weight: normal;}

#menu a {display: block; line-height: 38px; padding: 0px 17px 0px 17px; color: #FFFFFF; font-family: Arial, sans-serif; font-weight: 100;}

#menu a:hover {background: url(navb1.png) no-repeat top left; padding: 0px 7px 0px 17px; margin-right: 5px; font-weight: bold;}

#menu a:hover span {color: #FFFFFF; background: url(navb2.png) no-repeat top right; padding: 12px 5px 13px 0px; position: relative; left: 12px;}

used with the following HTML

    <div id="navigation">
        <ul id="menu">
            <li><a href="url">Link 1<span></span></a></li>
            <li><a href="url">Link 2<span></span></a></li>
            <li><a href="url">Link 3<span></span></a></li>

i want to keep the layout as is, and add a Dropdown Menu to the navigation bar using CSS.

can anybody help me expand my code, to add a drop down menu to the page.

thanks for your help.

Recommended Answers

All 5 Replies

Member Avatar for diafol

There are LOADS of pure CSS dropdown examples. Even more with JS-enhanced dropdowns.

Essentially, the use nested lists (UL/LI). If you're supporting IE < 6, it can be a real pig and you may need to include html tables for a pure CSS solution. Hopefully, you won't be going down this route.

Here's just one example:


Note the nested UL/LI. Using JS can really bring the WOW factor to your dropdwons - e.g. Mootools or jQuery or scriptaculous all have nice animated effects. However, pure CSS solutions should ensure that your menu is usable if users have js turned off for whatever reason.


i have rewrote my menu, and have added a dropdown menu, with rounded corners.

but now i have another problem with my code, and i cant seem to figure out what exactly is causing it.

when i hover over the menu, the main link drops 2 or 3 px... instead of staying inline with the other buttons on the navigation bar.

can somebody please take a look at the following code and tell me why it is doing this.

<!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" >
    <title>Dropdown Test</title>
    <style type="text/css">
html, body { width:100%; text-align:center;}
#nav {width:100%; margin:0px; padding:0px; position:absolute; top: 70px; display:block; background-image:url(navbg.png); background-repeat:no-repeat;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 5px; 
position:relative; padding:15px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { top:5px; background-color:#3d3f44;  -moz-border-radius:10px; -webkit-border-radius:10px; border:1px Solid #999; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:0px 0px; color:#A2E200; text-decoration:none; border:1px Solid #3d3f44;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px Solid #fff;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

        <ul id="nav">
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>

            <li><span>Menu 2</span>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
            <li><span>Menu 3</span>

                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>

Because you told it too...

#nav > li:hover { top:5px; background-color:#3d3f44; -moz-border-radius:10px; -webkit-border-radius:10px; border:1px Solid #999; }

top:5px; is pushing it down by 5px. change it to zero or delete it and it will stop moving.

lol... didnt see that.

thanks very much

Hmm .. it's good post, i use this code and work.. Thank's, i liked

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.