4 replies [Last post]
Particle Man
Offline
newbie
Last seen: 13 years 34 weeks ago
Joined: 2007-04-04
Posts: 3
Points: 0

This seems like such a simple problem which I would normally be able to overcome but it is just baffling me.

I have created a horizontal CSS single level drop down list following the Suckerfish (http://www.htmldog.com/articles/suckerfish/dropdowns/) style of doing things. However I have given the blocks in the list a height so that they are all consistent (because some of the list entries run on to two lines). However the first level of drop downs starts underneath the text of the rollover cell rather than underneath the block. This means that depending on whether there is one line of text or two the drop down menu appears at different heights.

I really hope this makes sense.

The image will hopefully help. As you can see the "Who are we?" should start below the main bar.

Any help would be much appreciated.

Thank You

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 37 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

It is hard to judge without

It is hard to judge without css/html to view. Do you have a link? If not, please paste your css/html.

- r

Particle Man
Offline
newbie
Last seen: 13 years 34 weeks ago
Joined: 2007-04-04
Posts: 3
Points: 0

CSS and HTML

Thanks for the quick response.

Here is the HTML:





Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras metus purus, condimentum ut, sagittis at, gravida auctor, nunc. Nunc scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum blandit semper erat. Nam pharetra. Vivamus fringilla. In dictum dolor sed diam. Mauris dictum urna sed ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse rutrum, leo a vehicula pulvinar, eros magna facilisis orci, quis ullamcorper ante tellus vel nunc. Vivamus tristique, elit a condimentum ullamcorper, lacus dui ullamcorper sem, ac adipiscing elit nulla id est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac ipsum nec erat bibendum convallis. Curabitur nonummy sagittis leo. Etiam faucibus purus nec erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis porttitor, arcu non tincidunt feugiat, lacus elit commodo nibh, at iaculis ligula enim id libero. Cras vitae ligula. Integer a massa eget urna molestie interdum.


Aenean et mauris. Quisque ligula nisi, interdum vitae, lacinia nec, accumsan dapibus, massa. Sed rhoncus ultrices mauris. Nulla diam lorem, pellentesque laoreet, dictum at, vulputate at, neque. Vestibulum erat quam, dapibus dictum, porta ac, volutpat in, orci. Vestibulum eleifend quam a magna. Aliquam erat volutpat. Ut eleifend, quam nec accumsan sagittis, magna dolor feugiat velit, sit amet sodales risus augue id ligula. Donec quam. Proin sed tortor sollicitudin nibh volutpat aliquet.


Maecenas in pede. Suspendisse dui massa, auctor ac, sodales in, feugiat in, leo. Nunc leo. Praesent vel dui vel dolor tristique molestie. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam consequat. Integer neque. Sed adipiscing, tortor tristique tristique bibendum, justo ante lacinia turpis, eu ultrices justo ante eget metus. Duis eu mi. Nullam fringilla faucibus nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc nulla nibh, consequat in, suscipit nec, aliquet at, justo.






And here is the CSS:
#container {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
width: 740px;
margin:30px auto;
}
.brclear {
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0px;
}

#header {
}
#nav {
background:#0075ba;
font-size:120%;
}
ul {
margin:0 auto;
padding:0;
list-style:none;
}
li {
float:left;
width:7em;
height:2.5em;
margin:0;
padding:5px;
background-color:#0075ba;
color:#fff;

}
li ul {
position:absolute;
width:10em;
left:-999em ;
clear:left;

}

li:hover ul {
left:auto;
}
#content {
background:url(images/3crystalglobes.jpg) top left no-repeat
}

Hope this Helps.

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 37 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Thank you for posting the

Thank you for posting the code.

You need to add the following to your css:

li { position:relative; }

li ul {
top:2.5em;
}

- r

Particle Man
Offline
newbie
Last seen: 13 years 34 weeks ago
Joined: 2007-04-04
Posts: 3
Points: 0

Brilliant

Fantastic! Worked a treat.

And thank you so much for the quick response.