CODEWITHSUNDEEP
cssdrop-down-menunavigationpositionsubmenu
Jeff Dowell
Jeff Dowell

Reputation: 125

How can I adjust the position of my drop-down menu?

I would like to adjust the positioning of my drop-down menus on my navigation links. I tried adjusting "nav .folder ul li a " but i couldn't get it to move. I would like to move its position down about 10px.

CSS:

body .main-nav li > a,
body .main-nav li > a:visited {
    color: #3b5998;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }

#nav a:hover {
    border-top: solid 4px #b7c3e6;
    color: #b7c3e6;
 }

.header-alignment-left.header-navigation-split #topNav { position:absolute; right: 0px }

.logo-image #topNav nav li a { padding:4px 15px; line-height: 100% }

#nav a { border-top: 4px solid transparent }

#nav .subnav { margin-top: 4 }

#nav a { border-right:0px solid #3b5998; height: 20px }

#nav li:last-child a { border-right: 0 }

#topNav nav .folder ul li a {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out }

#header #topNav nav .folder ul li {
    padding: 0 24px 12px;
    position: relative; }

#header { margin-top: 20px !important }

#topNav { margin-top: 40px }

#nav .subnav ul { padding-bottom: 15px !important }

#nav .subnav ul { padding-top: 15px !important }

Upvotes: 0

Views: 4845

Answers (3)

Barbara Laird
Barbara Laird

Reputation: 12717

The #topNav nav .folder .subnav div has an absolute top of 100%. If you change that to a px value (say 45px) you can move it. 

#topNav nav .folder .subnav {
    position: absolute;
    top: 45px;
    left: 0px;
    background: #ffffff;
    height: 0;
    overflow: hidden;
    opacity: 1;
    z-index: 999;
}

EDIT: Ended up leaving the above below and adding

#topNav nav li.folder {
  height: 32px;
}

Upvotes: 1

majorhavoc
majorhavoc

Reputation: 2415

add margin-top: 10px; to #topNav nav .folder ul

Upvotes: 0

Shahar Galukman
Shahar Galukman

Reputation: 902

Try to add margin-top: 10px; to nav .folder ul

Upvotes: 0

Related Questions