The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS drop down menu moves right ie7

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #32669

    Hi Everyone,

    Have looked everywhere – searched these forums for similar problems but couldn’t find the right answers so thought i’d start a new thread.
    This is my first website i’ve made and i quickly learnt to hate ie.
    the site is ‘’
    and if you need a look at the code let me know and i’ll post it up. i would have thought this problem could be fixed just by looking at it tho.
    the drop down menu displays correctly below the main list item when hovered, you can hover over each menu item correctly, then return to the main list item and the drop down menu displays to the right not below..
    i don’t get it.

    many thanks!



    *navigation bar or menu bar*/

    #menubar {
    padding: 0;
    margin: 0;

    #menubar ul {
    padding: 0;
    margin: 0;
    line-height: 50px;/*This property centers the text vertically*/

    #menubar li {
    padding: 0;
    margin: 0;
    list-style: none;
    float: left;
    position: relative;

    #menubar ul li a {
    text-align: center;
    font-family: papyrus, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    text-decoration: none;
    font-size: 1.5em;
    height: 50px;
    width: 166px;
    display: block;
    color: #fff;
    background-image: url(images/MenuButton.jpg);
    background-repeat: no-repeat;
    background-position: 0px -50px;
    text-shadow: 1px 1px 2px #333;

    #menubar ul li a:hover {
    background-position: 0px 0px;

    #menubar ul ul li a {
    Height: 30px;
    background: #53aafa;
    border: 1px solid #fff;
    color: #fff;
    font-size: 1em;
    text-shadow: none;
    width: 160px;

    #menubar ul ul li a:hover {
    text-decoration: underline;

    #menubar ul ul li a:active {
    background: #0089fe;

    #menubar ul ul {
    position: absolute;
    visibility: hidden;
    line-height: 35px;
    border: 2px solid #fff;

    #menubar ul li:hover ul {
    visibility: visible;

    *+html #menubar {
    width: 996px;
    height: 50px;
    margin-bottom: -50px;
    zoom: 1;

    would really appreciate the help. don’t care about ie6 – just want it fixed for ie7. the web address is in the post above.
    pls help.

    thank you


    On a slightly unrelated note, only two menu options are showing in Safari…’Products’ and ‘Contact Us’

    Try adding

    #menubar ul ul li { clear: left }
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.