Horizontal Drop Menu

Community Forums Forums Design Tips and Tricks Horizontal Drop Menu

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Susan 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #42452

    ahtimes
    Participant
    Post count: 2

    Hello, I am trying to get a horizonal drop menu to work on the “Focus” theme which I have customized to look like this: http://166.63.0.14/~villa/

    I want the horizontal menu to align left with the width of the page so it does not hang off to the right of the page as it currently does, but for the life of me I can not get it to stay put within the header div. Any ideas? Here is my css:
    .menu-primary ul,
    .menu-secondary ul,
    #header .menu ul {
    float: left;
    width: 100%;
    }

    .menu-primary li,
    .menu-secondary li,
    #header .menu li {
    float: left;
    list-style-type: none;
    }

    .menu-primary a,
    .menu-secondary a,
    #header .menu a {
    color: #ffffff;
    display: block;
    font-family: Arial, Tahoma, sans-serif;
    position: relative;
    text-decoration: none;
    padding-top: 8px;
    padding-right: 26px;
    padding-bottom: 8px;
    padding-left: 26px;
    }

    #header .menu a {
    padding: 8px 15px 7px;
    }

    #header .menu a {
    font-weight: bold;
    }

    .menu-primary li a:active,
    .menu-primary li a:hover,
    .menu-secondary li a:active,
    .menu-secondary li a:hover,
    #header .menu li a:active,
    #header .menu li a:hover,
    #header .menu .current_page_item a,
    #header .menu .current-cat a,
    #header .menu .current-menu-item a {
    color: #ffffff;
    background-color: #6b5a4f;
    text-shadow: 1px 1px 1px #000;
    position: static;
    }

    .menu-primary .current_page_item a,
    .menu-primary .current-cat a,
    .menu-primary .current-menu-item a,
    #header .menu .current-cat a,
    #header .menu .current-menu-item a {
    color: #ffffff;

    }

    #header .menu li a:active,
    #header .menu li a:hover,
    #header .menu .current_page_item a,
    #header .menu .current-cat a,
    #header .menu .current-menu-item a {
    background-color: #6b5a4f;
    }

    .menu-primary li li a,
    .menu-primary li li a:link,
    .menu-primary li li a:visited,
    .menu-secondary li li a,
    .menu-secondary li li a:link,
    .menu-secondary li li a:visited,
    #header .menu li li a,
    #header .menu li li a:link,
    #header .menu li li a:visited {
    background: none;
    color: #ffff;
    font-size: 12px;
    font-weight: normal;
    padding: 7px 5px;
    position: relative;
    text-transform: none;
    width: 128px;
    }

    .menu-primary li li:last-child a,
    .menu-secondary li li:last-child a,
    #header .menu li li:last-child a {
    border: none;
    }

    .menu-primary li li a:active,
    .menu-primary li li a:hover,
    .menu-secondary li li a:active,
    .menu-secondary li li a:hover,
    #header .menu li li a:active,
    #header .menu li li a:hover {
    background: none;
    color: #FC6;
    }

    .menu-primary li ul,
    .menu-secondary li ul,
    #header .menu li ul {
    height: 35px;
    width: 800px;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    * For IE 8 */
    -ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)”;
    /* For IE 5.5 – 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′);
    background-color: #6b5a4f;
    left: 0px;
    position: fixed;
    }

    #header .menu li ul {
    margin: 0;
    }

    .menu-primary li ul a,
    .menu-secondary li ul a,
    #header .menu li ul a {
    width: 130px;
    }

    .menu-primary li ul ul,
    .menu-secondary li ul ul,
    #header .menu li ul ul {
    margin: -32px 0 0 150px;
    }

    .menu li:hover ul ul,
    .menu li.sfHover ul ul {
    left: 0;
    top: 100%;
    }

    .menu li:hover,
    .menu li.sfHover {

    }

    ul.menu li:hover>ul,
    ul.menu li.sfHover ul,
    #header .menu li:hover>ul,
    #header .menu li.sfHover ul {
    left: auto;
    }

    #header .menu li a.sf-with-ul {
    padding-right: 25px;
    }

    .menu li a .sf-sub-indicator,
    .menu li li a .sf-sub-indicator,
    .menu li li li a .sf-sub-indicator {
    position: absolute;
    text-indent: -9999px;
    }

    #header .menu li a .sf-sub-indicator,
    #header .menu li li a .sf-sub-indicator,
    #header .menu li li li a .sf-sub-indicator {
    background: url(images/icon-down.png) no-repeat;
    height: 16px;
    position: absolute;
    right: 3px;
    text-indent: -9999px;
    top: 12px;
    width: 16px;
    }

    #header .menu li li a .sf-sub-indicator,
    #header .menu li li li a .sf-sub-indicator {
    background: url(images/icon-right.png) no-repeat;
    }

    #wpadminbar li:hover ul ul {
    left: 0;
    }

     

    #57677

    Susan
    Moderator
    Post count: 7526

    Hi, I’m working through the posts which remain unresolved. As you posted this a while ago, I hope your issue has been resolved. If not, please check in, and I will escalate this for you.


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.