Community Forums › Forums › Archived Forums › Design Tips and Tricks › Horizontal Drop Menu
- This topic has 1 reply, 2 voices, and was last updated 10 years, 8 months ago by Susan.
-
AuthorPosts
-
May 24, 2013 at 6:40 am #42452ahtimesMember
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;
}August 20, 2013 at 2:14 pm #57677SusanModeratorHi, 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.