0

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
8
Views
7 Years
Discussion Span
Last Post by rowiki
0

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.

0

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

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.