3 replies [Last post]
bbcompent1
bbcompent1's picture
Offline
newbie
Last seen: 5 years 2 days ago
Timezone: GMT-4
Joined: 2009-12-30
Posts: 4
Points: 6

Hey folks, I have this web site where the drop down (second level menu) does not connect with the main menu. There is a visible space between the top menu and sub menu. I need some help trying to fix that. The CSS Class is sub-menu. You will see the problem by looking at the attached image. The CSS is as follows:

/* Sub Menu */
 
 
 
/* Header */
 
 
header {
    background: rgba(0,0,0,0.45);
 
   position: relative;
}
.headerInfo { margin: 30px 0 0 20px; }
.headerInfo li { 
    float: left;
    border-right: 1px solid #646464;
    margin-right: 30px;
    padding-right: 30px;
    color: #999;
    text-transform: uppercase;
    font: 13px 'Noticia Text', serif;
    line-height: 21px;
}
.headerInfo li:last-of-type { border: none; margin: 0; padding: 0; }
.headerInfo li a { text-decoration: none; color: #e43733 }
.headerInfo h3 {
    font: 21px 'Just Another Hand', cursive;
    color: #fff;
    margin-bottom: 3px;
}
.headerInfo p { margin: 0; }
.shadowWrapper {
    -moz-box-shadow: 0 5px 17px rgba(0,0,0,0.75);
    -webkit-box-shadow:0 5px 17px rgba(0,0,0,0.75);
    box-shadow:0 5px 17px rgba(0,0,0,0.75);
}
.logoWrapper {
    text-align: center;
    padding-bottom: 80px;
    height: 150px;
    margin-right: 0 !important;
    background: #e5e5e5;
}
 
/* Navigation */
 
.navWrapper {
     margin-left: 0 !important;
     padding: 15px 0 15px 20px;
 
/* background: #e43733; */
background: #000000;
 
 
}
.sf-menu li li, .sf-menu li li li { background: #000000; }
 
.mainNav {
    float: left;
}
.socialNav {
    position: fixed;
    z-index: 99;
    top: 275px;
    left: 0;
}
 
.icon-cancel, .topBarSearch  { display: none; }
.icon-cancel {
    font-size: 14px;
    padding: 0 2px 0 1px;
}
.searchActive { background: #D74340 !important; }
.topBarSearch {
   position: absolute;
bottom: -7px;
left: 33px;
padding: 8px;
width: 250px;
background: #000;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
.topBarSearch:hover { background: #000 !important; }
 
.topBarSearch form, .topBarSearch input { margin: 0 !important; }
 
.screen-reader-text { display: none; }
.topBarSearch #s {
    background: #3D3D3D;
    border: 1px solid #555;
    float: left;
    width: 180px !important;
    margin-right: 15px !important;
    line-height: 19px;
    padding-left: 8px;
    color: #999;
}
.sidebar #s {
    max-width: 70%;
    float: left;
    padding: 7px 4px 7px 8px;
}
.sidebar #searchsubmit {
    float: right;
    margin-top: 0;
}
.widget_search { display: block; float: left; width: 100%; }
.topBarSearch #searchsubmit { 
    border: none; 
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    background: #e43733;
   float: right;
}
.socialNav ul, .socialNav li {
    margin: 0;
}
 
 
.mainNav a  {
        color: #fff;
        text-transform: uppercase;
       font-weight: 500 !important;
        font: 13px 'Arial', sans-serif;
      -webkit-font-smoothing: antialiased;
        padding: 10px;
        margin-right: 10px;
}
.mainNav li:last-child a { margin-right: 0;}
 
.menu-item a, .sub-menu a { opacity: 0.89; }
.menu-item a:hover, .sub-menu a:hover, .current_page_item .sf-with-ul, .current_page_item a:first-of-type, .mainNav .sub-menu .current-menu-item a, .menu-item .sub-menu a:hover { opacity: 1;}
.menu-item .sub-menu a { opacity: 0.89; }
 
.socialNav a {
 
        text-transform: uppercase;
        font-size: 12px;
      -webkit-font-smoothing: antialiased;
        text-decoration: none;
        padding: 4px;
   color: #fff;
}
.socialNav a:hover {
    color: #fff;
}
.socialNav li {
    opacity: 0.7;
    padding: 8px 7px;
cursor: pointer;
       -webkit-transition: all 120ms ease-in ; /* property duration timing-function delay */
       -moz-transition: all 120ms ease-in ; /* property duration timing-function delay */
          transition: all 120ms ease-in ; /* property duration timing-function delay */
}
.socialNav li:hover {
   background: #444;
opacity: 1;
}

AttachmentSize
sample_menu.png29.01 KB
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi bbcompent1, It's hard to

Hi bbcompent1,
It's hard to work out without the markup or a ive example.
I see you remove the margin from UL and LI what about padding.
I would make this your first rule.

.socialNav ul, .socialNav li {
    margin: 0;
    padding:0;
}

then add it back where you need it.

bbcompent1
bbcompent1's picture
Offline
newbie
Last seen: 5 years 2 days ago
Timezone: GMT-4
Joined: 2009-12-30
Posts: 4
Points: 6

Markup???

I did post the markup and an image of the menu behavior. Anyway, so it is the ul and il margin? Let me fiddle with that and get back to you. Thanks Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi bbcompent1, By Markup I

Hi bbcompent1,
By Markup I meant HTML Smile