combining two id's that do different things to one div button - html

Question

ok so the thing here is , the only way i can get the password_photo_galleries to go where they need to be is adding an extra button on the navbar to open that info.. what im trying to do is have the navbar button MyGallery bring up both photo_galleries, and password_photo_galleries, but i can't seem to figure out how to get it to combine with that one button.. any help would be much appreciated, i also just thought about something, the only way i can think it might work is make the button My Gallery do a drop down with two buttons My Gallery / Password Gallery but my navbar is -90deg so i dont know how that would work , but just a thought.. either way will work fine.. thanks again
#profile_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
color:#FF00FF;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
#profile_password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
color:#FF00FF;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
#profile_photo_galleries {
width:400px;
height:600px;
color:#000000;
font-family:"Baskerville Old Face",serif;
font-style:italic;
font-size:20px;
background-color:rgba(0,0,255);
position:absolute;
top:200px;
right:-1200px;
padding:40px;
transition:left 0 ease-in-out;
}
#profile_password_photo_galleries {
width:400px;
height:600px;
color:#000000;
font-family:"Baskerville Old Face",serif;
font-style:italic;
font-size:20px;
background-color:rgba(0,0,255);
position:absolute;
top:200px;
right:-1200px;
padding:40px;
transition:left 0 ease-in-out;
}
#profile_photo_galleries:target {
right:80%;
margin-right:-520px;
}
#profile_password_photo_galleries:target {
right:80%;
margin-right:-520px;
}
.photo_gallery {
position:fixed;
bottom:0;
left:0;
width:96.9%;
margin-bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:99;
}
.password_photo_galleries {
position:fixed;
bottom:0;
left:0;
width:96.9%;
margin-bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:99;
}
.photo_gallery .heading,.password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
.password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
.photo_gallery .images a,.password_photo_galleries .images a {
display:block;
float:left;
border:5px solid #000;
margin-right:10px;
margin-bottom:10px;
}
.password_photo_galleries .images a {
display:block;
float:left;
border:5px solid #000;
margin-right:10px;
margin-bottom:10px;
}
.photo_gallery_preview,.password_photo_galleries_preview {
border:1px solid #333;
overflow:auto;
padding:20px 15px;
width:100px;
background-color:#000;
}
.password_photo_galleries_preview {
border:1px solid #333;
overflow:auto;
padding:20px 15px;
width:100px;
background-color:#000;
}
.photo_gallery_name a,.password_photo_galleries_name a {
color:#FFF;
margin-bottom:20px;
display:block;
text-transform:uppercase;
}
.password_photo_galleries_name a {
color:#FFF;
margin-bottom:20px;
display:block;
text-transform:uppercase;
}
.photo_gallery_link {
display:block;
margin-bottom:15px;
}
.password_photo_galleries_link {
display:block;
margin-bottom:15px;
}
.photo_gallery_count {
font-style:italic;
color:#666;
}
.password_photo_galleries {
font-style:italic;
color:#666;
}
HTML CODE FOR THE NAVBAR
<div id="right_menu">
<span>my gallery</span>
<span>Password</span***this is the one i would like to open up with just the button my gallery or if you could make a drop down for a rotation -90deg span for my nav bar that would be awesome****
</div>
here is the navbar , no links
#right_menu {
position:fixed;
font-size:15px;
top:0;
right:0;
background-color:#FF00FF;
width:50px;
height:100%;
}
#right_menu a {
text-align:center;
display:block;
padding:10px;
height:15%;
width:50px;
margin-bottom:0;
text-transform:uppercase;
position:relative;
}
#right_menu a:nth-child(1) {
background-color:#FF00FF;
color:#FFF;
}
#right_menu a:nth-child(1) span {
display:block;
position:absolute;
top:40px;
left:-40px;
width:130px;
color:#FFF;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transition:left .3s ease;
}
#right_menu a:nth-child(1):hover span {
left:-45px;
}

Answer 1

Every DOM element has a single id. you could approximate it using something like this
<div id='id1'><span id='id2'></span></div>
and then use navigation to get what you really want.