The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Drop Down Menu
helpplease101
post Aug 18 2014, 11:32 AM
Post #1





Group: Members
Posts: 5
Joined: 7-August 14
Member No.: 21,371



Hello,

I have a drop-down menu at www.sackvilleyouth.weebly.com/resources

I would like to try 2 things with it:

1) To remove the bullets
2) To center it so that "Funds for Youth" appears in the second line and so that the second line is centered

Here is the CSS:

<style>

a img { border: none; }

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

a:active {
text-decoration: none;
}

ul.cssMenu, ul.cssMenu ul
{
z-index: 5000; //
list-style:none;
margin:0; padding:0;
position: relative;
}

/*Style for 1st level menu header*/
ul.cssMenu li
{
position: relative;
float: left;
zoom: 1; /*Needed for IE*/
border: 1px solid;
border-radius: 25px;
background: #FFd018; /*background color of menu header (1st level)*/
}
ul.cssMenu li:hover
{
background: #0099ff /*background color of menu header (1st level) on hover*/;
}
ul.cssMenu li a
{
/*Menu link styles*/
display: block;
padding: 5px;
color:#000000;
font-family: Arial, Times New Roman, Tahoma;
font-size: 12px;
}

/* Building menu items - for 2nd and more level menu items*/
ul.cssMenu ul
{
display:none; /*initially menu item is hidden*/
position: absolute; /*absolute positioning is important for menu to float*/
width: 150px;

/*Formating of menu items*/
border:1px solid #0099FF;
padding:1px;
background:#FFFF00;

/*optional - to change position of 2nd level menu item*/
top: 100%;
left: 0;
}
ul.cssMenu ul li
{
background: #F5F5F5;
color: #000;
border-bottom: 1px solid #DDDDDD;
float: none;
}

ul.cssMenu ul li a
{
width: 100%;
display: block;
color:#000000;
}

/* Menu item position for 3rd level and more */
ul.cssMenu ul ul
{
left: 100%;
top: 0;
}

/* Hover effect for menu*/
ul.cssMenu li:hover > ul
{
display:block;
}
</style>


To remove the bullets I was using


#menu ul{
list-style-type: none;
padding: 0;
margin-left: 0;
}

Under ul.cssMenu, ul.cssMenu ul and that got rid of the bullets in the top menu (but not in the drop-down), but then for some reason that then made the drop-down menus appear behind the menu icons and text below it.


Any advice?

Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 19 2014, 04:30 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



Yeah. And I posed those in your previous thread about the same thing. Have you tried them yet?
http://forums.htmlhelp.com/index.php?showtopic=20614&hl=
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th April 2024 - 12:28 PM