trying to fix a CSS bug for some code that someone else wrote. I'm no CSS expert, so I'm having trouble trying to find what is giving me this problem. This page is supposed to have 4 main menu buttons at the top. The user can hover over each and it will display a sub menu. This work fine in FF and IE, but in Safari and Chrome the buttons end up in the same spot, causing them all to display sub menus when you hover over the first button.
Link to HTML: http://www.blogtrog.com/code.aspx?id=c4c62a1a-af8f-4bfc-a3c3-f1fbf9013b3d
Here's the chunk of CSS that controls the main menu:
.top-bar {
background: url('/img/top-gradient.jpg') repeat-x top;
height : 50px;
}
.top-bar-content {
width : 1000px;
margin-left: auto;
margin-right: auto;
}
.menu-bar {
background : url('/img/menu-gradient.jpg') repeat-x top;
height : 25px;
vertical-align : middle;
}
.menu-bar-content {
height : 25px;
width : 1000px;
color : #ffffff;
font-weight : bold;
margin-left: auto;
margin-right: auto;
}
.footer-bar {
width : 1000px;
text-align : right;
margin-left: auto;
margin-right: auto;
}
hr {
border : none 0;
border-top : 1px dashed #333333;
width : 100%;
height : 1px;
}
/* menu */
ul#menu
{ margin:0; padding:1px 0; list-style:none; width:1000px; height:21px; font:normal 12px arial, verdana, helvetica; font-weight: bold;}
ul#menu li
{ margin:0; padding:0; display:block; float:left; position:relative; width:160px; }
ul#menu li a:link,
ul#menu li a:visited
{ padding:4px 0; display:block; text-align:left; text-decoration:none; color:#ffffff; width:160px; height:13px; }
ul#menu li:hover a,
ul#menu li a:hover,
ul#menu li a:active
{ padding:4px 0; display:block; text-align:left; text-decoration:none; color:#ffffff; width:158px; height:13px; }
/* sub menu */
ul#menu li ul.sub-menu
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:158px; position:absolute; top:21px; left:-1px; border:1px solid #990000; border-top:none; }
ul#menu li:hover ul.sub-menu
{ display:block; }
ul#menu li ul.sub-menu li
{ width:158px; clear:left; width:158px; }
ul#menu li ul.sub-menu li a:link,
ul#menu li ul.sub-menu li a:visited
{ clear:left; background:#d6d6d6; padding:4px 0; width:158px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; color:#333333;}
ul#menu li ul.sub-menu li:hover a,
ul#menu li ul.sub-menu li a:active,
ul#menu li ul.sub-menu li a:hover
{ clear:left; background:#d6d6d6; padding:4px 0; width:158px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
/* sub sub menu */
ul#menu li ul.sub-menu li ul.sub-sub-menu
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:157px; top:-2px; padding:1px 1px 1px 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#menu li ul.sub-menu li:hover ul.sub-sub-menu
{ display:block; }
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:link,
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:visited
{ background:#d6d6d6; }
ul#menu li ul.sub-menu li ul.sub-sub-menu li:hover a,
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:hover,
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:active
{ background:#d6d6d6; }
/* span style */
ul#menu li ul.sub-menu li a span
{ position:absolute; top:0; left:144px; font-size:12pt; color:#990000; }
ul#menu li ul.sub-menu li:hover a span,
ul#menu li ul.sub-menu li a:hover span
{ position:absolute; top:0; left:144px; font-size:12pt; color:#ffffff; }
Under ul#menu add
position: absolute;
Related
I would like to convert my drop down menu to a drop up menu. I have searched information on the internet, but it didn't help.
My css code:
#nav
{
margin: 0px;
padding: 0px;
position: absolute;
top: 18px;
display: block;
left: 313px;
}
#nav > li
{
list-style-type:none;
float:left;
display:block;
margin:0px 10px;
position:relative;
padding:10px;
width:100px;
}
#nav > li:hover ul
{
display:block;
}
#nav > li:hover
{
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#nav li ul
{
margin:0px;
padding:0px;
display:none;
}
#nav li ul li
{
list-style-type:none;
margin:10px 0 0 0;
}
#nav li ul li a
{
display:block;
padding:5px 10px;
color:#bdb49f;
text-decoration:none;
}
#nav li ul li:hover a
{
color:#b15815;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#nav li span
{
cursor:pointer;
margin:0px 10px;
font-weight:bold;
}
The solution lies in making child ul absolutely positioned.
Here is a working example : http://jsfiddle.net/3NmRP/
The "margin-top" on "#nav" is just here for the sake of example, you can remove it.
#nav{
margin: 0px; padding: 0px; position: absolute; top: 18px; display: block; left: 313px;
}
#nav > li {
list-style-type:none;
float:left; display:block;
margin:0px 10px;
position:relative;
padding:10px;
width:100px;
}
#nav > li ul {
position:absolute;
bottom: 100%;
}
#nav li:hover > ul {
display:block;
}
#nav > li:hover{
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#nav li ul{
margin:0px;
padding:0px;
display:none;
}
#nav li ul li{
list-style-type:none;
margin:10px 0 0 0;
}
#nav li ul li a{
display:block;
padding:5px 10px;
color:#bdb49f;
text-decoration:none;
}
#nav li ul li:hover a {
color:#b15815;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#nav li span{
cursor:pointer;
margin:0px 10px;
font-weight:bold;
}
#nav {
margin-top: 100px;
}
I have set up a site with Drupal 7, using the theme called "Professional Theme". I've found problem with text-overlapping on the main menu. There are two rows in my top menu bar. I've found the drop-down menu text has overlapped with the text on the text on the 2nd row of the menu. And I can't click on the links on that drop-down menu as it would simply disappear when I move the cursor downward. May anyone tell me what's wrong with it and how to fix it?
#main-menu {
min-height:35px;
box-shadow:0 0 3px #999;
background:#000033;
background:-moz-repeating-linear-gradient(#666699, #000033 35px);
background:-webkit-repeating-linear-gradient(#666699, #000033 35px);
background:-o-repeating-linear-gradient(#666699, #000033 35px);
background:-ms-repeating-linear-gradient(#666699, #000033 35px);
background:repeating-linear-gradient(#666699, #000033 35px);
}
#main-menu ul {
float:left;
padding:0;
margin:0;
max-width:75%;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
}
#main-menu li {
position:relative;
float:left;
padding:0;
margin:0;
line-height:35px;
z-index:100;
list-style-image:url(none);
}
#main-menu li li{
line-height:13px;
}
#main-menu ul li:first-child {
padding-left:0;
}
#main-menu a {
display:block;
padding:0 20px;
color:#f0f0f0;
text-align:center;
text-decoration:none;
}
#main-menu a:hover,
#main-menu li > a.active {
background:#3366cc;
background:-moz-linear-gradient(#3399ff,#000033);
background:-webkit-linear-gradient(#3399ff,#000033);
background:-o-linear-gradient(#3399ff,#000033);
background:-ms-linear-gradient(#3399ff,#000033);
background:linear-gradient(#3399ff,#000033);
color:#fff;
text-decoration:none;
}
#main-menu li > a.active {
background:#cc66ff;
background:-moz-linear-gradient(#cc66ff,#000033);
background:-webkit-linear-gradient(#cc66ff,#000033);
background:-o-linear-gradient(#cc66ff,#000033);
background:-ms-linear-gradient(#cc66ff,#000033);
background:linear-gradient(#cc66ff,#000033);
}
.drop-down-toggle {
position:absolute;
top:7px;
right:16px;
display:none;
width:20px;
height:20px;
border-radius:15px;
background:#000033;
background:-moz-linear-gradient(#666699,#000033);
background:-webkit-linear-gradient(#666699,#000033);
background:-o-linear-gradient(#666699,#000033);
background:-ms-linear-gradient(#666699,#000033);
background:linear-gradient(#666699,#000033);
border:#aaa 3px solid;
}
.drop-down-arrow {
display:block;
width:0;
height:0;
margin:8px 0 0 5px;
border-top:5px solid #aaa;
border-left:transparent 5px solid;
border-right:transparent 5px solid;
}
#main-menu li li {
float:none;
min-width:190px;
padding:0;
margin:0;
}
#main-menu li li a {
min-width:190px;
margin:0;
background:#555;
border-top:#5f5f5f 1px solid;
font-size:13px;
line-height:33px;
text-align:left;
overflow:hidden;
}
#main-menu li li li a {
min-width:260px;
margin:0;
background:#555;
border-top:#5f5f5f 1px solid;
font-size:13px;
line-height:33px;
text-align:left;
overflow:hidden;
}
#main-menu li li:first-child > a {
border-top:none;
}
#main-menu li li a:hover {
background:#444;
}
#main-menu li ul {
display:none;
position:absolute;
z-index:9999;
min-width:190px;
height:auto;
padding:0;
margin:0;
box-shadow:0 0 3px #333;
}
#main-menu li ul ul {
margin:-33px 0 0 190px !important;
}
#main-menu li:hover > ul,
#main-menu li li:hover > ul,
#main-menu li li li:hover > ul {
display:block;
}
#main-menu .nav-toggle {
display:none;
}
#main-menu ul li.leaf, #main-menu ul li.expanded, #main-menu ul li.collapsed {
list-style:none;
}
#main-menu ul.menu li {
margin: 0;
}
#main-menu li.expanded, #main-menu li.collapsed, #main-menu li.leaf {
margin: 0;
padding: 0;
}
Actually the css here is based on the original css for main menu in the Professional Theme.
i am using tinymce to make rich text area input and i have a css styled dropdown menu (only css, no javascript). the problem is, the dropdown menu is conflicting with tinymce.
i am giving a snapshot of the problem
here is my css for my drop down menu
#menu, #menu ul{
margin:0 90px;
padding:0 10px;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
#menu a{
display:block;
padding: 5px 15px 5px 15px;
border-top: 1px solid #ffffff;
color:#fff;
text-decoration:none;
background: #1D2D4F;
margin-left: 1px;
white-space: nowrap;
}
#menu a:hover{
background-color:#475A7F;
}
#menu li{
float:left;
position:relative;
width: 150px;
}
#menu ul {
position:absolute;
display:none;
width:11.3em;
margin: 0 -10px;
}
#menu li ul a{
width:11.3em;
height:auto;
float:left;
}
#menu ul ul{
top:auto;
}
#menu li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
}
.clear{
clear:both; !important
height:0;
font-size: 1px;
line-height: 0px;
}
how do i fix this problem?
Have you tried adding a z-index:100; to the drop down menu?
The number 100 is just for test, you can change it to another number later.
I am currently using position:absolute; for the second level menu, because when I use position: relative; the first level menu is broken (after the hovered item is a linebreak?)
But I want to achieve that the second level menu that is showed, is positioned relative to the hovered item in the first level menu (directly under it and also horizontal)
My menu is like this currently:
Home / Test / News
Test_Sub1 / Test_Sub2 / Test_Sub3
But should be
Home / Test / News
Test_Sub1 / Test_Sub2 / Test_Sub3
Here is my CSS Code
#navigation ul.menu {
list-style-type:none;
list-style:none;
/*overflow:hidden;*/
width:980px;
}
#navigation li {
list-style:none;
list-style-type:none;
padding:0;
float:left;
display:inline;
height:32px;
}
#navigation ul.menu {
width:100%;
height:32px;
border-bottom: 1px solid #cecbcd;
}
/* style list as navigation using float:left */
/* set distance from left corner to the first li item */
#navigation ul.menu li:first-child {
margin-left:150px;
}
#navigation ul.menu li ul li:first-child {
margin-left:0px;
}
#navigation ul.menu li ul {display:none; position:absolute; top:32px; left: 10em; float:left; border:none;}
#navigation ul.menu li:hover ul {display:inline;}
#navigation ul.menu li:hover ul li {height:45; padding-top:8px; float:left; position: relative;}
#navigation ul.menu li:hover ul li a {float:left;}
#navigation ul.menu li ul li {display:inline; background-image:none; float:left; position:relative; left: 5em; }
#navigation ul.menu li a {
/*background-color:#ffffff; */
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #666666;
height: 32px;
background-image:none;
display:block;
padding-left:5px;
padding-right:5px;
float: left;
}
#navigation ul.menu li ul li a {
/*background-color:#ffffff; */
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #666666;
height: 32px;
background-image:none;
display:block;
padding-left:5px;
padding-right:5px;
float: left;
}
#navigation ul.menu li ul li a:hover, #navigation ul.menu li ul li.active-trail a.active-trail {
/*background-color:#ffffff; */
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:underline;
color: #666666;
height: 32px;
background-image:none;
display:block;
padding-left:5px;
padding-right:5px;
float: left;
}
#navigation ul.menu li a:hover {
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #ffffff;
height: 32px;
background-image:url('../images/navi_active.png');
background-position:center;
background-repeat:no-repeat;
}
#navigation ul.menu li a.active, #navigation ul.menu li.active-trail a.active-trail {
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #ffffff;
height: 32px;
background-image:url('../images/navi_active.png');
background-position:center;
background-repeat:no-repeat;
}
div.region-header ul.menu {
display:none;
}
Try This : http://jsfiddle.net/rathoreahsan/3NRu4/
Edit:
I have figured out your code:
you have defined:
#navigation ul.menu li:hover ul {display:inline;}
Chenge it to:
#navigation ul.menu li:hover ul {display:block;}
Also in this line,
#navigation ul.menu li ul li {display:inline; background-image:none; float:left; position:relative; left: 5em; }
Remove left: 5em to get the result like this: http://jsfiddle.net/rathoreahsan/GFURU/
Edited:
More over in this line:
#navigation ul.menu li ul {display:none; position:absolute; top:32px; float:left; border:none; background:red; left: 10em;}
Remove left: 10em to get ul a relative position
See the Demo: http://jsfiddle.net/rathoreahsan/rTsAE/
Hope it will fix it.
i have this site:
www.yoursdproperty.com
i need the top menu items HOME, BUYING PROPERTY, SELLING PROPERTY ETC...
to take up 100% of the width of the top bar. if i add more items, i went them to size accordingly.
here is the CSS associated with this menu bar. is there something i can change here to do that?
/* Moo Menus */
#cssmenu_moo_menu
{ padding:0;
margin:0; }
#cssmenu_moo_menu a
{ float:left;
text-decoration:none;
display:block;
cursor:pointer;
height:35px;
font-size:14px;
font-weight: bold;
line-height:35px;
padding:0 15px;
overflow:hidden;
border-right:1px solid #0d85c9; }
#cssmenu_moo_menu li li a
{ font-weight:bold;
font-size:12px;
border-right:none;
padding:0; }
#cssmenu_moo_menu ul
{ height:35px;
float:left;
list-style:none;
margin:0; }
#cssmenu_moo_menu
{ background:#006198 url(../images/moomenu.png) repeat-x 50% top;
height:35px;
float:left;
list-style:none;
margin:0;
padding:0; }
#cssmenu_moo_menu li li
{ padding:0;
background:none; }
#cssmenu_moo_menu ul ul a
{ color:#000;
display:block;
text-decoration:none;
width:275px;
text-transform:none; }
#cssmenu_moo_menu li
{ float:left;
padding-left:0;
height:35px;
background:transparent; }
#cssmenu_moo_menu ul li
{ position:relative; }
#cssmenu_moo_menu li ul
{ z-index:99;
top:35px;
position:absolute;
left:-999em;
height:auto;
font-weight:normal;
margin:0;
border:0 solid #ddd;
padding:0; }
#cssmenu_moo_menu ul
{ padding:0;
margin-top:0; }
#cssmenu_moo_menu li li
{ float:left;
padding:0;
margin:0;
height:35px;
width:275px; }
#cssmenu_moo_menu li ul ul
{ margin:-25px 0 0 275px; }
#cssmenu_moo_menu li:hover ul ul,#cssmenu_moo_menu li:hover ul ul ul,#cssmenu_moo_menu li:hover ul ul ul ul,#cssmenu_moo_menu li.sfhover ul ul,#cssmenu_moo_menu li.sfhover ul ul ul,#cssmenu_moo_menu li.sfhover ul ul ul ul
{ position:absolute;
left:-999em; }
#cssmenu_moo_menu li:hover ul,#cssmenu_moo_menu li li:hover ul,#cssmenu_moo_menu li li li:hover ul,#cssmenu_moo_menu li li li li:hover ul,#cssmenu_moo_menu li.sfhover ul,#cssmenu_moo_menu li li.sfhover ul,#cssmenu_moo_menu li li li.sfhover ul,#cssmenu_moo_menu li li li li.sfhover ul
{ position:absolute;
left:0; }
#cssmenu_moo_menu ul ul
{ width:275px;
background:#006198; }
#cssmenu_moo_menu ul ul ul
{ width:275px;
padding-bottom:0; }
#cssmenu_moo_menu ul ul li li
{ border-right:0 solid #000; }
#cssmenu_moo_menu a
{ color:#eee;
border-left:1px solid #444; }
#cssmenu_moo_menu a:hover
{ color:#303030; }
#cssmenu_moo_menu li.active a
{ color:#303030; }
#cssmenu_moo_menu li li a
{ color:#fff; }
#cssmenu_moo_menu li li a:hover
{ color:#303030; }
#cssmenu_moo_menu li li a:active
{ color:#eee; }
#cssmenu_moo_menu ul ul li a
{ padding:0 10px; }
#cssmenu_moo_menu ul ul li.active
{ ; }
#cssmenu_moo_menu li.active
{ background:url(../images/moomenu1.png) repeat-x top #303030; }
#cssmenu_moo_menu li a:hover,#cssmenu_moo_menu li a:active
{ color:#303030; }
#cssmenu_moo_menup
{ height:20px;
border:solid 1px #333;
background:#555; }
#cssmenu_moo_menup ul
{ margin:0;
padding:0;
list-style:none; }
#cssmenu_moo_menup li
{ float:left;
margin:0;
margin-top:0;
padding-left:0;
list-style:none; }
#cssmenu_moo_menup li a
{ display:block;
text-decoration:none;
color:#eee;
padding:0 10px 0 10px;
font-size:11px;
line-height:20px; }
#cssmenu_moo_menup li a:hover
{ color:#303030; }
#cssmenu_moo_menup li.active a
{ color:#303030; }
#cssmenu_moo_menup ul ul,#cssmenu_moo_menup ul ul ul
{ display:none; }
You might try using display: table-cell instead of list-style: none on the top level lis, and then set display: table; width: 100% on the top level ul. This forces the the lis to be displayed using the table layout algorithm, which allows you to define how much space you want the whole thing to take up (in this case 100%).
I would use a table for that. It's one of the situations that I find a table is most appropriate also means that you don't have to worry about it later should your require adding more links in the future.
I'm not sure that's possible. I think you will need to set the width of each menu element specifically to ensure it spans the full width of its container, and make the appropriate adjustments to your CSS file once you add new elements.
Danny answer work well here are the main element:
#menu_conteneur ul{
display:table;
width: 100%;
}
#menu li{
display: table-cell;
}
#menu li a{
display: block;
}