css - Html dropdown not overlaying on top of other webpage elements -


before posting question, have looked various stack overflow questions , implemented them didn't work me.

please not post question duplicate.

my problem dropdown not coming on top of other elements.

i have posted code in jsfiddle

note: please drag output window towards left proper view of header

in scss window, user profile dropdown handled class navbardropdown

.navbardropdown {   float: right;   padding: 0px 10px;   position: relative;    img {     margin-top: -5px;     height: 40px;   }    ul {     background-color: $base-secondary-color;     padding: 4px 0;     position: absolute;     z-index: 999;     top: 30px;     left: 0;     width: auto;     border: none;     border-radius: 1px;   }    ul {     height: 30px;     padding: 0 40px 0 10px;     display: block;   } } 

i have tried position:absoulute , z-index.

i don't know mistake. appreciated?

by looks of it, reason drop down list hidden because overflows content of nav element, ".navbar". adding css property overflow: visible; should fix immediate problem.


Comments

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -

java - Digest auth with Spring Security using javaconfig -