- This topic is empty.
-
AuthorPosts
-
August 1, 2012 at 3:28 pm #39167
mckaymultimedia
MemberMy CSS worked fine with first level of the menu. No issues at all. Since I started trying to add drop-down/sub-menus, I have had all sorts of issues.
The best I can manage is having the menu drop down below the main menu like I want it to, but the sub-menu appears inline rather than a vertical list. Also the menu and submenu block appears to be extending higher then I want it to. I have the height set as inherit on everything inside the navigation container, but still I am getting this weird extension of the LI divider. You can see what I mean if you rollover the home menu link in codepen. I have been racking my brain about this for too long and really could use a fresh set of eyes looking at it cause I have tried so many different tweaks to my code now that I am lost. (Note: I got the framework for this drop-down menu from Son of Suckerfish. It’s the only framework I could get to work at least this far.)
Image:
http://technobytes.us/testing/screen-01.jpgCode:
http://codepen.io/anon/pen/zsIqrHTML:
CSS:
#navigation-container {
float: left;
width: 100%;
min-width:960px;
height:33px;
background: #600100 url(images/bg-nav.jpg) repeat-x;
border-top:2px solid #000;
border-bottom:2px solid #000;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
#navigation {
margin: 0 auto;
width: 959px;
min-width:959px;
height:33px;
border-left: 1px solid #760101;
}
#navigation a {
display: block;
height: inherit; /*PART OF THE PROBLEM???*/
width: inherit; /*PART OF THE PROBLEM???*/
}
#navigation li { /* all list items */
/*float: left;*/
height: inherit; /*PART OF THE PROBLEM???*/
width: inherit; /* width needed or else Opera goes nuts *//*PART OF THE PROBLEM*/
}
#navigation ul {
margin: 0;
padding: 0;
height: inherit; /*PART OF THE PROBLEM???*/
list-style: none;
line-height: 1;
}
#navigation ul li {
height: inherit; /*PART OF THE PROBLEM???*/
list-style-type: none;
display: inline;
}
#navigation li a {
display: block;
float: left;
padding: 9px 12px;
color: #fff;
text-decoration: none;
border-right: 1px solid #760101;
}
#navigation li a:hover {background: #000000 url(images/bg-nav-over.jpg) repeat-x; float:}
#navigation li ul {
margin: 35px 0 0 0;
float:left;
height: inherit; /*PART OF THE PROBLEM???*/
width: inherit; /*PART OF THE PROBLEM???*/
position: absolute;
background: #000000 url(images/bg-subnav.jpg) repeat-x;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#navigation li ul ul {
margin: 0 10em 0 0;
}
#navigation li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#navigation li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.
