Member Avatar for revski

hi

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

<body>
    <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>
        </ul>
    </div>
</body>

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.

  • 4 Contributors
  • 5 Replies
  • 159 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by rowiki
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:

http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx

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.

Member Avatar for revski

hi

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" >
<head>
    <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; }

   </style>
</head>
<body>
        <ul id="nav">
            <li><span>Hmmmmmmm</span>
                <ul>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
               </ul>
            </li>

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

                <ul>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
               </ul>
            </li>
        </ul>
</body>
</html>
Member Avatar for drjohn

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.

Member Avatar for revski

lol... didnt see that.

thanks very much

Member Avatar for rowiki

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.