I have an HTML button on my webpage. It will display but you can't interact with it. Both hovering and clicking on the button seems to do nothing. When you click the button a menu is supposed to appear and when you hover the button is supposed to turn red. The problem is the button can't be interacted with.
var mobileMenuButton = document.getElementById("mobile-menu-enter");
var mobileMenu = document.getElementById("mobile-menu-id");
var mobileMenuButtonOnClick = function() {
mobileMenu.classList.remove("hidden");
};
mobileMenuButton.addEventListener("click", mobileMenuButtonOnClick);
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
.mr-0 {
margin-right: 0;
}
.ml-auto {
margin-left: auto;
}
.d-block {
display: block;
}
h1,
h2,
h3,
h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
float: right;
padding-right: 50px;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.hidden {
display: none;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.mobile-nav {
display: none;
position: relative;
}
.mobile-nav-options {
display: table;
}
.hamburger-menu {
background-color: transparent;
border: none;
position: relative;
left: 50px;
}
.hamburger-menu :hover {
color: red;
}
.desktop-nav {
display: none;
}
.mobile-nav {
display: block;
}
<div class="nav-bar">
<nav class="mobile-nav">
<img src="https://c402277.ssl.cf1.rackcdn.com/photos/20852/images/magazine_medium/axolotl_WWsummer2021.jpg?1618758847" class="nav-img">
<div class="nav-options">
<button class="d-block mr-0 ml-auto hamburger-menu" id="mobile-menu-enter">
<div class="line"></div><br>
<div class="line"></div><br>
<div class="line"></div>
The button that is not working
</button>
</div>
</nav>
<div class="hidden" id="mobile-menu-id">
the menu
</div>
</div>
Delete space between .hamburger-menu and :hover. Event click on mobileMenuButton works.
var mobileMenuButton = document.getElementById("mobile-menu-enter");
var mobileMenu = document.getElementById("mobile-menu-id");
var mobileMenuButtonOnClick = function() {
mobileMenu.classList.remove("hidden");
};
mobileMenuButton.addEventListener("click", mobileMenuButtonOnClick);
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
.mr-0 {
margin-right: 0;
}
.ml-auto {
margin-left: auto;
}
.d-block {
display: block;
}
h1,
h2,
h3,
h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
float: right;
padding-right: 50px;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.hidden {
display: none;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.mobile-nav {
display: none;
position: relative;
}
.mobile-nav-options {
display: table;
}
.hamburger-menu {
background-color: transparent;
border: none;
position: relative;
left: 50px;
}
.hamburger-menu:hover {
color: red;
}
.desktop-nav {
display: none;
}
.mobile-nav {
display: block;
}
<div class="nav-bar">
<nav class="mobile-nav">
<img src="https://c402277.ssl.cf1.rackcdn.com/photos/20852/images/magazine_medium/axolotl_WWsummer2021.jpg?1618758847" class="nav-img">
<div class="nav-options">
<button class="d-block mr-0 ml-auto hamburger-menu" id="mobile-menu-enter">
<div class="line"></div><br>
<div class="line"></div><br>
<div class="line"></div>
The button that is not working
</button>
</div>
</nav>
<div class="hidden" id="mobile-menu-id">
the menu
</div>
</div>
You could always use the .toggle() method instead from the classList object to best interact with the hiding and showing on the menu of the left. Additionally, to simulate the burger menu, use a SVG code instead so it looks more pro, as well as adding the red background you are looking for, something like the one on the code below. Take a look at this snippet of code. I certainly hope this helps, pal!
var mobileMenuButton = document.getElementById("mobile-menu-enter");
var mobileMenu = document.getElementById("mobile-menu-id");
var mobileMenuButtonOnClick = function() {
mobileMenu.classList.toggle("hidden");
};
mobileMenuButton.addEventListener("click", mobileMenuButtonOnClick);
body,
html {
height: 100%;
}
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
.mr-0 {
margin-right: 0;
}
.ml-auto {
margin-left: auto;
}
.d-block {
display: block;
}
h1,
h2,
h3,
h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
float: right;
padding-right: 50px;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.hidden {
display: none;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.mobile-nav {
display: none;
position: relative;
}
.mobile-nav-options {
display: table;
}
.hamburger-menu {
background-color: transparent;
border: none;
position: relative;
left: 50px;
}
.hamburger-menu:hover {
background-color: red;
border-radius: 4px;
}
.desktop-nav {
display: none;
}
.mobile-nav {
display: block;
}
<div class="nav-bar">
<nav class="mobile-nav">
<img src="https://c402277.ssl.cf1.rackcdn.com/photos/20852/images/magazine_medium/axolotl_WWsummer2021.jpg?1618758847" class="nav-img">
<div class="nav-options">
<button class="d-block mr-0 ml-auto hamburger-menu" id="mobile-menu-enter">
<!--?xml version="1.0" ?-->
<svg style="color: white" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z" fill="white"></path>
</svg>
</button>
</div>
</nav>
<div class="hidden w-50" id="mobile-menu-id">
MENU GOES HERE
</div>
</div>
I'm trying to use buttons on the right/left sides to scroll horizontally in a div that has multiple a tags, so I can't use the same button to scroll to a #hashtag. What I am trying to do is exactly just as Google Images Search header for different tags:
Link to example
.prsc {
overflow-x: hidden;
overflow-y: hidden;
display: block;
padding-top: 1px;
}
.prs {
/* the elements inside */
display: inline-block;
height: inherit;
left: 20px;
padding-bottom: 5px;
padding-right: 5px;
position: relative;
vertical-align: top;
white-space: nowrap;
float: right;
}
.Jyg {
height: 80px;
margin: -10px 2px 0;
overflow: hidden;
display: block;
}
.ichpcnt {
-webkit-overflow-scrolling: touch;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
padding: 10px 0 0;
white-space: nowrap;
width: 100%;
display: block;
}
.Iyg {
margin-right: 6px;
display: inline-block;
}
.prc {
/* the whole inner */
margin: -30px 0px 0;
padding: 10px 0px 10px 0;
position: relative;
overflow: hidden;
}
.OYi {
height: 90px;
display: block;
}
.allPlacesBtn {
font-family: cairo;
margin-top: -40px;
margin-bottom: 25px;
font-size: 45px;
display: grid;
}
.prp {
background: white;
bottom: 0;
opacity: 1;
position: absolute;
top: 11px;
width: 20px;
z-index: 10;
display: block;
}
<div class="custHdrBtns">
<div class="allPlacesBtn"></div>
<div class="OYi prc">
<div class="prsc prse">
<div class="prs">
<div class="Jyg">
<div class="ichpcnt" id="scrollArea">
<div class="Iyg">
<div class="vc_btn3-container headBtns vc_btn3-center">
link
link
link
link
link
link
link
link
link
link
link
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the key is using white-space: nowrap;
$('#prev').on('click', function() {
$('#menu ul').animate({
scrollLeft: '-=100'
}, 300, 'swing');
});
$('#next').on('click', function() {
$('#menu ul').animate({
scrollLeft: '+=100'
}, 300, 'swing');
});
#menu {
position: relative;
}
ul {
width: 300px;
overflow: hidden;
white-space: nowrap;
display: block;
list-style: none;
padding: 0;
}
li {
width: 80px;
height: 50px;
display: inline-block;
text-align: center;
}
li:nth-child(odd) {
background-color: yellow;
}
li:nth-child(even) {
background-color: blue;
}
#nav {
position: absolute;
top: 0;
width: 300px;
}
#prev {
display: inline-block;
position: absolute;
left: 0;
background-color: #ceaaaa;
padding: 5px;
cursor: pointer;
top: 10px;
font-weight: bold;
}
#next {
position: absolute;
right: 0;
display: inline-block;
background-color: #ceaaaa;
padding: 5px;
cursor: pointer;
top: 10px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item7</li>
</ul>
<div id="nav">
<div id="prev">Prev</div>
<div id="next">Next</div>
</div>
</div>
I am new to Jquery and
I am trying to make a dropdown on my navigation using simple Jquery hover effect, and I think I am using wrong selector on Jquery.
I would like to see the dropdown and be able to navigate when i hover over 'What's New'
Any help would be awesome. Thanks,
See ATTACHED IMG
$(document).ready(function () {
$("li .nav-level-1").hover(
function () {
$('.nav-level-2').slideDown('200');
},
function () {
$('.nav-level-2').slideUp('200');
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
You should use a nested ul for your dropdown menu. You don't need jQuery at all for this. It can all be done with CSS. Take a look at this simple hover effect under the Products tab.
Codepen
HTML
<header class="navbar">
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Cars
<ul>
<li>Ford</li>
<li>Chevy</li>
<li>Toyota</li>
</ul>
</li>
<li>Trucks</li>
<li>Vans</li>
<li>SUVs</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-color: #2EBAE8;
}
.container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
width: 200px;
background-color: #046382;
display: none;
position: absolute;
top: 100%;
left: 0;
float: none;
}
ul ul ul {
top: 0;
left: 100%;
}
ul ul li {
float: none;
}
ul li {
float: left;
padding: 0 10px;
position: relative;
}
ul li:hover > ul {
display: block;
}
ul a {
display: block;
text-decoration: none;
color: white;
line-height: 50px;
transition: color 0.5s;
}
ul a:hover {
color: #E82E82;
}
Your submenu is hidden with visibility: hidden style.
I also separated the handled so that the menu doesn't hide while you're hovering it, and added finish() so that we're not queueing animations.
But yeah, like ncox85 said you should do this with css.
$(document).ready(function () {
$('.nav-level-2').hide();
$("li .nav-level-1").mouseenter(
function () {
$('.nav-level-2').finish().slideDown('200');
}
);
$("li .nav-level-2").mouseleave(
function () {
$('.nav-level-2').finish().slideUp('200');
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
Just use display:none instead of visibility:hidden on class .nav-level-2
If any of you are wondering, I got a good result from just using html/css, got rid of jquery.
Maybe I will use jquery another time. fun lesson for myself and those of you out there. Thanks guys
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display: block;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
When we click the id item on this menu it cover some bottom menu items. Instead of that I want a flexible menu, which means the drop item do not cover any other.
#demo {
margin: 30px 0 50px 0;
font-family: sans-serif;
}
#demo .wrapper {
display: inline-block;
width: 180px;
height: 20px;
position: absolute;
}
#demo .parent {
height: 100%;
width: 100%;
display: block;
cursor: pointer;
height: 150%;
background: #023b3b;
color: white;
z-index: 2;
position: relative;
text-align: center;
}
#demo .parent:hover,
#demo .content:hover ~ .parent {
background: #122112;
}
#demo .content:hover ~ .parent {
z-index: 0;
}
#demo .content {
position: absolute;
top: 0;
display: block;
z-index: 1;
height: 0;
width: 180px;
padding-top: 30px;
}
#demo .wrapper:active .content {
height: 100px;
z-index: 3;
}
#demo .content:hover {
height: 123px;
z-index: 3;
}
#demo .content ul {
background: #339933;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#demo .content ul a {
text-decoration: none;
}
#demo .content li:hover {
background: #122112;
color: white;
}
#demo .content li {
list-style: none;
text-align: left;
color: white;
font-size: 14px;
line-height: 30px;
height: 30px;
padding-left: 10px;
}
<div id="demo">
<div class="wrapper">
<div class="parent">Dashboard</div>
</div><br> <br>
<div class="wrapper">
<div class="parent">Apps</div>
<div class="content">
<ul>
<li>Inbox</li>
<li>Condact</li>
<li>Calender</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<div class="parent">Layouts</div>
<div class="content">
<ul>
<li>Header</li>
<li>Aside</li>
<li>Footer</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<div class="parent">Widjet</div>
</div>
</div>
Check if this could help you. I have added input and label.
#first {
float:left;
width:15%;
color :bisque;
border-color: #023b3b;
border-style : solid;
height: 100%;
background-color :#023b3b;
}
#boa{
height: 5%;
width: 20%;
float: left;
}
.bob{
text-indent: 200%;
line-height: 210%;
font-size: 150%;
font-family: sans-serif;
color: white;
font-weight: bold;
}
.boc{
text-indent: 4%;
color : white;
font-size: 83%;
font-family: sans-serif;
font-weight: normal;
}
.bod{
color:white;
font-size: 100%;
font-family: sans-serif;
line-height: 200%;
list-style-type: none;
}
#demo {
margin: 30px 0 50px 0;
font-family: sans-serif;
}
#demo .wrapper {
display: inline-block;
width: 180px;
}
#demo .parent {
padding: 5px;
display: block;
cursor: pointer;
background: #023b3b;
color: white;
position: relative;
text-align: center;
}
#demo .parent:hover,
#demo .content:hover ~ .parent {
background: #122112;
}
#demo .content:hover ~ .parent {
z-index: 0;
}
#demo .content {
height: 0px;
transition: height 0.3s;
z-index: 1;
width: 180px;
}
#demo .wrapper input[type=radio] {
position: absolute;
opacity: 0
}
#demo .wrapper:hover input[type=radio]:checked + .content {
height: 120px;
}
#demo .content:hover {
height: 123px;
z-index: 3;
}
#demo .content ul {
background: #339933;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#demo .content ul a {
text-decoration: none;
}
#demo .content li:hover {
background: #122112;
color: white;
}
#demo .content li {
list-style: none;
text-align: left;
color: white;
font-size: 14px;
line-height: 30px;
height: 30px;
padding-left: 10px;
}
<div id="first" style="float:left; lngth:60%; ">
<p><img src="image1.jpg" id="boa"><span class="bob">First</span></p>
<p class="boc" >Main</p>
<div id="demo">
<div class="wrapper">
<div class="parent">Dashboard</div>
</div><br> <br>
<div class="wrapper">
<label for="apps" class="parent">Apps</label>
<input type="radio" name="menu" id="apps" />
<div class="content">
<ul>
<li>Inbox</li>
<li>Condact</li>
<li>Calender</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<label for="layouts" class="parent">Layouts</label>
<input type="radio" name="menu" id="layouts" />
<div class="content">
<ul>
<li>Header</li>
<li>Aside</li>
<li>Footer</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<div class="parent">Widjet</div>
</div>
</div>
<p class="boc">Componets</p>
<p class="boc">Help</p>
<p class="bod"> Documents</p>
</div>
You add code in jquery:
$("#demo").hide();
$(".boc").click(function(){
$("#demo").slideToggle();
});
I have 5 social media buttons in a row, 2 of which have menus which are triggered by jquery slidetoggle. The problem is, that when the twitter button is clicked it rearranges the icons as the menu appears and knocks them all out of place. How do i prevent this?
Here is my code:
$(".button").click(function() {
$(this).closest('.comment').find(".box").toggle();
});
#icons {
width: 450px;
padding: 0px!important;
}
.comment {
width: 140px;
float: right;
}
.button {
width: 25px;
display: inline;
margin-right: 5px;
vertical-align: top!important;
height: 25px;
}
.box {
margin-top: -20px;
width: 25px;
}
.box ul {
width: 80px;
height: 35px;
padding: 10px;
background-color: #fff;
}
ul.tw {
border: 0px;
}
li.normal {
margin-right: 25px!important;
width: 80px;
}
li.tw {
margin-right: 60px;
width: 80px;
}
#hidden {
display: none;
}
li {
padding: 0!important;
list-style-type: none;
float: right;
}
a {
padding: 0 !important;
font-family: Arial;
font-size: 12px !important;
text-decoration: underline !important;
color: #000000 !important;
padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body>
<div id="icons">
<div class="comment">
<div class="button">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/facebook_icon.png">
</div>
<div class="box" id="hidden">
<ul class="normal">
<li class="normal">DocJohnson
</li>
<li class="normal">Ask The Doc
</li>
</ul>
</div>
</div>
<div class="comment">
<div class="button">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/twitter_icon.png">
</div>
<div class="box" id="hidden">
<ul class="tw">
<li class="tw">DocJohnson
</li>
<li class="tw">Ask The Doc
</li>
</ul>
</div>
<div class="button">
<a href="http://docjohnsonusa.tumblr.com/" target="_blank">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/tumblr_icon.png" id="socialImage" />
</a>
</div>
<div class="button">
<a href="https://www.youtube.com/user/DOCJOHNSON1976" target="_blank">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/youtube_icon.png" />
</a>
</div>
<div class="button">
<a href="http://instagram.com/docjohnsonusa" target="_blank">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/instagram_icon.png" />
</a>
</div>
</div>
</body>
Fiddle
Not sure if it can break your layout, but it worked adding position:absolute to the #hidden element:
#hidden {
display:none;
position: absolute;
margin-top: -10px;
}
Fiddle. Also added margin-top: -10px because the .box value of -20px was making the div get over the button.
There are a number of CSS things to fix. But the main thing is a combination of position relative and absolute to make the dropdowns position properly.
http://codepen.io/anon/pen/WvLwdx
#icons {
text-align: center;
}
.comment {
display: inline-block;
}
.button {
position: relative;
display: inline-block;
margin-right: 5px;
vertical-align: top;
}
.box {
position: absolute;
top: 30px;
right: 0;
}
.box ul {
margin: 0;
background-color: #fff;
}
ul li {
display: block;
}
.hidden {
display: none;
}
a {
padding: 0 !important;
font-family: Arial;
font-size: 12px !important;
text-decoration: underline !important;
color: #000 !important;
padding-left: 10px;
}
I have copied all of your code to a jsFiddle, all you need to do is add position: absolute to your .box class like so
jsFiddle : https://jsfiddle.net/g1Lfg7y5/
CSS
#icons {
width: 450px;
padding: 0px!important;
}
.comment {
width: 140px;
float: right;
}
.button {
width: 25px;
display: inline;
margin-right: 5px;
vertical-align: top!important;
height: 25px;
}
.box {
margin-top: -20px;
width: 25px;
position: absolute;
}
.box ul {
width: 80px;
height: 35px;
padding: 10px;
background-color: #fff;
}
ul.tw {
border: 0px;
}
li.normal {
margin-right: 25px!important;
width: 80px;
}
li.tw {
margin-right: 60px;
width: 80px;
}
#hidden {
display: none;
}
li {
padding: 0!important;
list-style-type: none;
float: right;
}
a {
padding: 0 !important;
font-family: Arial;
font-size: 12px !important;
text-decoration: underline !important;
color: #000000 !important;
padding-left: 10px;
}
I see lots of inconsistencies here.
First of all turn hidden into a class. It repeats itself more than once so it can't be an id.
Then try:
.hidden
{
display: none;
position: absolute;
z-index: 1000;
}
I tested it and it worked.