2 replies [Last post]
somnomania
somnomania's picture
Offline
newbie
Last seen: 6 years 31 weeks ago
Timezone: GMT-5
Joined: 2013-12-25
Posts: 2
Points: 3

So I've been messing around on one of my side tumblrs, making it pretty and practicing my coding skills. I wanted a dropdown menu for part of it, because there were enough links that having them all visible all the time would take up a lot of space. I tried splicing in code for such a thing and then modifying it to fit the rest of my CSS, but that wasn't working, so I ended up on a site where you just put your titles and links in and it makes the code for you. It's working great, but only on the one page I've been working on. I copied the CSS and relevant HTML onto a couple of the similar pages, but the menu isn't showing up there. I'd think it was an issue of div ids, but they don't work like that, not when it's completely separate pages. I'm totally baffled at this point, and I'd appreciate some guidance on it.

Here's the page I was doing all the fine-tuning on. I actually wouldn't mind some guidance on how to get the dropdown menus to sit along the bottom edge of the band at the top; I tried to get it to do that but it's either all the way in the upper right, or below the band entirely. I'd love to have it down a bit, since the upper right is where the Tumblr buttons are.

Here's the relevant part of the CSS and HTML; all I've done is copy this same part and put it into the appropriate place on other pages. As far as I can tell there's nothing different on the other pages, and all tags are closed properly and everything. Two other pages where I've tried to get the menu working are here and here.

#cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 'Habibi' serif;
  font-size: 12px;
  width: auto;
  float: right;
}
#cssmenu ul {
    background-image: url('http://24.media.tumblr.com/tumblr_mai5xkLw1i1rfymxfo1_400.png');
  height: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
}
 
#cssmenu li {
  float: left;
  padding: 0px;
}
#cssmenu li a {
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  color: #cccccc;
}
#cssmenu ul ul a {
  color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #7e3934;
  color: #FFFFFF;
  text-decoration: none;
}
#cssmenu li ul {
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 200px;
  z-index: 200;
  /*top:1em;
	/*left:0;*/
 
}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {
  background: url('sub_sep.png') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 200px;
}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #7e3934;
  color: #ffffff;
  text-decoration: none;
}
#cssmenu p {
  clear: left;
}
 
 
</style>
</head>
 
<body>
 
<div id="container1">
    <div class="title">Central group
    </div>
<div id='cssmenu'>
<ul>
   <li><a href='/'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Clan Groups</span></a>
      <ul>
         <li><a href='/ashfall'><span>Ashfall Waste</span></a></li>
         <li><a href='/clan'><span>Central group</span></a></li>
         <li><a href='/gladeveins'><span>Gladeveins</span></a></li>
         <li><a href='/highperch'><span>Highperch</span></a></li>
         <li><a href='/homestuck'><span>Homestuck</span></a></li>
         <li><a href='/bw'><span>Linguistics</span></a></li>
         <li><a href='/redsands'><span>Red Sands</span></a></li>
         <li><a href='/tsunami'><span>Tsunami Flats</span></a></li>
         <li class='last'><a href='/zephyr'><span>Zephyr Steppes</span></a></li>
      </ul>
   </li>
   <li class='has-sub last'><a href='#'><span>Other Junk</span></a>
      <ul>
         <li><a href='/pairs'><span>Pairs</span></a></li>
         <li><a href='/cooldowns'><span>Cooldowns</span></a></li>
         <li><a href='http://tinyurl.com/ns9c38y'><span>Clan List</span></a></li>
         <li class='last'><a href='http://tinyurl.com/keckzt3'><span>Stats</span></a></li>
      </ul>
   </li>
</ul>
</div>
</div>

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

Hi somnomania, Try:

Hi somnomania,

Try:

#cssmenu{
margin-top:40px;
}

and remove the background image from #cssmenu ul

somnomania
somnomania's picture
Offline
newbie
Last seen: 6 years 31 weeks ago
Timezone: GMT-5
Joined: 2013-12-25
Posts: 2
Points: 3

The margin-top finally got it

The margin-top finally got it to sit where I wanted it to, thank you. I swear I'd tried that, but I guess I didn't have a good combo of that and the size of the dropdown boxes. And I tried your suggestion to remove the background image, but it didn't help with my primary problem, and I like how it looks with it there, so I put it back. The menus still aren't showing up on any other pages I've put the code on.