Problem menu and submenu

HTML & CSS
1

Hi all.

I am trying to get a submenu to reside below my main menu
when I click on home the corresponding submenu should start always underneath home.
I cannot get this working

the links in the main menu should always look like in the second img.

here some photos so that my words hopefully make more sense. :shifty:

974×68 21.5 KB

966×78 30.3 KB

my css so far:



#menu .navigation{height:106px;width:960px;background-color:transparent;padding:1px 2px 5px 0;margin: 0 auto;}
#menu .navigation li a{font-size:18px;text-decoration:none;outline:none;text-align:left;display:block;float:left;height:18px;overflow:visible;color:#fff;padding: 2px 50px 8px 50px;}
#menu .navigation li.active a{color:#eee;background:url("../images/line_vertical.png");-moz-border-radius:4px;-webkit-border-radius:4px;border-right:1px solid silver;border-left:1px solid silver;}
#menu .navigation li.active ul {display:inline;height:30px;width:600px;border:1px solid red;float:left;background-color: greenyellow;}
#menu .navigation li ul {height:0;width:0;overflow:hidden;}
#menu li a:hover {text-decoration: underline;}

thanks for any help:

Gina :slight_smile:

2

Hi,

It’s hard without the html but I guess you are trying something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    background:blue
}
ul {
    list-style:none;
    margin:0;
    padding:0
}
#menu .navigation {
    height:106px;
    width:960px;
    background-color:transparent;
    padding:1px 2px 5px 0;
    margin: 0 auto;
}
[B].navigation li {
    display:inline
}[/B]
#menu .navigation li a {
    font-size:18px;
    text-decoration:none;
    outline:none;
    text-align:left;
  [B]  display:-moz-inline-box;
    display:inline-block;[/B]
    vertical-align:top;
    height:18px;
    color:#fff;
    padding: 2px 50px 8px 50px;
}
#menu .navigation li.active a {
    color:#eee;
    background:url("../images/line_vertical.png");
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border-right:1px solid silver;
    border-left:1px solid silver;
}
#menu .navigation li ul {
    height:0;
    width:0;
    overflow:hidden;
}
#menu .navigation li.active ul {
    display:inline;
    height:30px;
   [B] width:100%;[/B]
    border:1px solid red;
    float:left;
    clear:left;
    overflow:visible;
    background-color: greenyellow;
}
#menu .navigation li.active ul li{float:left}
#menu li a:hover {
    text-decoration: underline;
}
</style>
</head>
<body>
<div id="menu">
    <ul class="navigation">
        <li class="active"><a href="#">test 1</a>
            <ul>
                <li><a href="#">sub 1</a></li>
                <li><a href="#">sub 2</a></li>
                <li><a href="#">sub 3</a></li>
            </ul>
        </li>
        <li><a href="#">test 2</a></li>
        <li><a href="#">test 3</a></li>
        <li><a href="#">test 4</a></li>
        <li><a href="#">test 5</a></li>
    </ul>
</div>
</body>
</html>

Usually you would place the dropline absolutely so that it doesn’t take place in the flow. Using floats is [URL=“http://www.pmob.co.uk/temp/dropline-persistent-floated2.htm”]a little trickier.

3

Paul
really thanks sooo much :):):slight_smile:
I’ll try straight away

(css can be quite fuzzy)

thx again Gina

4