Drop Down Menu

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Hello,
How do you make a Drop Down Menu?
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi BBC Idents

Unfortunately, we do not support drop-down menus right now.

However, we have an alternative solution that you can try, although it may not be exactly what you need.

You can create a drop-down list inside the body of your page. Here is a link for the HTML code you can use to achieve this: Adding a dropdown menu to a webpage

Another option is to create subpages and then link to them from your webpage.

I hope this helps! Please get back to us if you need more help.

Thanks
Nazlie
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi BBC Idents,

You can use CSS to make a drop down menu. Here is an article about creating drop-down menus with CSS: Creating drop down menus with CSS

If you don't feel like copying all the codes and editing them, you can use this CSS drop down menu generator: Drop down menu generator

You can add all the links you want, then at the end, all you have to do is drag and drop an HTML widget and paste the code right at the top of the page, and then, take all the pages out of the current menu (By clicking "Edit Navigation" and dragging all pages out of navigation) and then, your menu will be there! Also, you can put that code inside a div and then position where the old menu was, like position it like this:

<!--

First, put the code in a div. Then, give the div an ID of "nav"

<div id="nav">
<here is the code for the menu>
</div>

Then add this CSS to the page:

<style type="text/css">

#nav {
position: absolute;
top:100px;
right:600px;
}

</style>

But remember, you will have to position it better, this is not accurate, this is just a guess. So, if it is down from the top to much, lower the number of pixels from the top. If it is to the left to much, lower the number of pixels from the right. Once you have it all positioned, your done! You will have your own drop down menu!

-->

Hope this helps!

--
Nathan
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
Thanks!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem!
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
Hello
It's BBC Idents Here

How do i get the Menu in the Center
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Hi there BBC Indents,

You should be able to use <center>Your menu </center>

I hope this helps.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hey Jeremy, how did you put HTML tags in a reply without having to use <!-- and -->?
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
Can you add me on MSN Please

bbcidents@hotmail.co.uk
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
It is CSS And it still will not work
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Ok then, if that does not work, then, in the CSS, right below "right:600px;" put "align: center" and see if that works. (Remember to place align: center before the closing bracket } tag.) So the CSS will look like this: (But the numbers for right and top would be different according to how you positioned it)
<!--

<style type="text/css">

#nav {
position: absolute;
top:100px;
right:600px;
align: center;
}

</style>

Hope this works for you! if it doesn't please let me know.

Nathan

-->
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
Can you do this for me Please Because I am Crap at CSS.

http://britishtvidents.yolasite.com/
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, all you have to do is insert that above code somewhere on the page in an HTML widget. Just copy that and place it in an HTML widget (above the Navigation code).
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
Still not working
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hey BBC Indents, please use this code then:

<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:100%;}
ul.pureCssMenu ul ul{position: absolute;left:100%;top:-3px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:1px 1px 1px 1px;
background-color:#ffffff;
background-repeat:repeat;
border-color:#cccccc #cccccc #cccccc #cccccc;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:228.10px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:5px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:left;
background-color:#ffffff;
border-width:1px;
border-color:#FFFFFF;
border-style:solid;
text-align:left;
text-decoration:none;
padding:2px 5px 2px 10px;
_padding-left:0;
font:bold 17px Arial;
color: #000000;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#cccccc #111111 #111111 #cccccc; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3px;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#cccccc;
border-color:#cccccc;
border-style:solid;
font:bold 17px Arial;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#cccccc;
border-color:#cccccc;
border-style:solid;
font:bold 17px Arial;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #ffffff !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:50px;width:50px;
height:50px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
#nav {
position: absolute;
top:100px;
right:600px;
align: center;
}
</style>
<!-- End PureCSSMenu.com STYLE -->
<!-- Start PureCSSMenu.com MENU -->
<center> <ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="index">Home</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-one">BBC One</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-two">BBC Two</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-three">BBC Three</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-four">BBC Four</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="other-bbc-services"><span>Other BBC Services</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-hd-idents">BBC HD</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-alba-idents">BBC Alba</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-news">BBC News</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-parliament">BBC Parliament</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-dvd">BBC DVD</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>BBC Regions</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-english-regions">BBC English Regions</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-wales">BBC Cymru Wales</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-scotland">BBC Scotland</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="bbc-northern-ireland">BBC Northern Ireland</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="links">Links</a></li>
</ul></center>
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
Still not working
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Sorry, I was trying to edit that but it would not work, what is the CSS you are using to position it right now? I know the CSS, but, I don't know how much pixels it is from the top and from the right, do you mind copying it so I can make this code better so you don't have to edit it?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Also, please delete that other code above that I gave you above because that does not work right now.
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
How about i give you my login and you have a look?
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
Still not Working?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--
Are you on it? When I try to save it, it keeps saying "Another version of this page has been saved" I hope no one other than me is on it! I wish there was a feature like Gmail where we can sign other people out if they are on it! Also, I found another problem, you did not have a <div id="nav"> and </div> wrapped around the navigation code which the CSS I gave you wasn't doing anything without that. But its fine now because I am fixing it.

-->
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
I am on the Site Updating Something. Sorry
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
It's okay.
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
Right i am going out back in 30mins
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I got it fixed BBC Indents! You can see the preview: http://sitebuilder.yola.com/sites/S3/... The only way i could get it fixed was to put it in a column divider and put the menu in the right side of the divider and move it into the middle. All the CSS for centering didn't work because the other CSS that that website provided was over riding all the other CSS and would not let me center it. I even tried putting it into a div and centering it and sure enough it did not work. So, I just put it in a column divider. You can login and see. I hope I got it the way you wanted it! :)

Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Also, would you like me to add that menu code to every page for you?
Photo of British TV Idents

British TV Idents

  • 40 Posts
  • 0 Reply Likes
No Thank you. Thank you so much for helping me. And thank you to the other people that help me also.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Your welcome! Also, you know yesterday, my icon was different. And then I changed it so it is different now. Just wanted to let you know! I am glad I got to help you!