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.
Related
I have a menu and a submenu. The submenu is only displayed when hovering over it.
QUESTION 1: I want it to be displayed permanently.
QUESTION 2: I would like it to be displayed horizontally (and not vertically as it is now).
To see what I mean, go to http://appartement-met-zeezicht.be and hover on "English". What is displayed under "English" should be displayed permanently, pereferably in a horizontal (and not vertical) way.
Thanks a lot!!
/SUBMENU/
topmenu ul li ul{ position:absolute;width:150px; z-index:999999; padding-left:0; margin-left:-10px; margin-top:24px; display:none;}
topmenu ul li ul li{ float:none; margin:0; padding:10px 0px; text-align:center; background:#302f2f url(images/pattern.png) repeat; display:block; border-bottom: 1px solid #333; height:auto;}
topmenu ul > li ul li:hover{ background:#2bb975 url(images/pattern.png) repeat;}
topmenu ul li ul li a{ font-size:14px; font-weight:normal; padding:4px;}
topmenu ul li ul li ul{left: 100%; margin-top:-27px; float:none; margin-left:0px;}
.tinynav, .tinynav1{ display:none;}
EDIT: it seems that some Javascript is overwriting the CSS, you can try to add this to style.css:
#topmenu ul li ul, #topmenu li:hover > ul {
display: block !important;
}
For the second question: in your style.css find the parts below /MENU/ and /SUBMENU/. Delete the next lines below those comments and paste this code instead:
/*MENU*/
#menu_wrap{width:100%; float:left; background:#302f2f url(images/menu_wrap.png) repeat;}
.is-sticky{ width:1000px!important;}
#topmenu{text-align:center;}
.menu-header{margin:auto; padding:0; display:block;}
#topmenu ul{ margin:0; padding:0;}
#topmenu ul li{list-style-type:none; display:inline-block; margin-top:0px;padding:25px 15px;}
#topmenu li a{ font-size:18px; color:#fff;}
#topmenu ul > li:hover{ background:url(images/transblack.png) repeat;}
#menu-icon{display:none;}
/*SUBMENU*/
#topmenu ul li ul{ position:absolute;width:auto; z-index:999999; padding-left:0; margin-left:-10px; margin-top:24px; display:none;}
#topmenu ul li ul li{ float:left; margin:0; padding:10px 0px; text-align:center; background:#302f2f url(images/pattern.png) repeat; display:block; border-bottom: 1px solid #333; height:auto;}
#topmenu ul > li ul li:hover{ background:#2bb975 url(images/pattern.png) repeat;}
#topmenu ul li ul li a{ font-size:14px; font-weight:normal; padding:4px;}
#topmenu ul li ul li ul{left: 100%; margin-top:-27px; float:none; margin-left:0px;}
You need to remove "Hover" this list.
And make this list "display: inline-block;"
You may need something like this:
ol {
display: inline-block;
vertical-align: top;
}
li {
display: inline-block;
margin-right: 10px;
width: 60px;
cursor: pointer;
vertical-align: top;
}
<div>
<ol>Spiderman</ol>
<ol>Wolverine</ol>
<ol>The Avengers <br>
<li>Iron Man</li>
<li>Captain America</li>
<li>Thor</li>
<li>Black Widow</li>
</ol>
</div>
I am creating a personal website for my programming class and I'm having trouble having my "li" tags items drop down, but instead their going off to the right. For example I hover over my "li" tag to have my drop down "li" items drop down. But instead they drop down and go to the right. I want them to go straight down. Any help?
Here is the CSS (And yes I know that some of my CSS is repeated and unnecessary) :
#nav {
background-color:#222;
margin:-15px;
margin-left:230px;
margin-right:230px
}
#nav_wrappper {
width: 960px;
margin: 0 auto;
text-align:left;
}
#nav ul {
list-style-type: none;
text-align:center;
margin: 0 auto;
position: relative;
display:inline-block;
width:100%;
}
#nav ul li {
display: inline-block;
position:relative;
width:33%;
float:left;
}
#nav ul li:hover {
background-color:#333;
}
#nav ul li a,visited {
color:#ccc;
display:block;
padding:15px;
text-decoration:none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration:none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul {
display:none;
position: absolute;
background-color:#333;
border: 5px solid #222;
border-top:0;
margin-left: -5px;
min-width:160px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a, vistited{
color:#ccc;
}
#nav ul ul li a:hover {
color:#099;
}
I have the following css code:
#menu li {
float:left;
position:relative;
line-height: 3em;
width: 10em;
}
#menu li ul {
position:absolute;
margin-top:0em;
margin-left:.0em;
display:none;
}
#menu ul li ul {
margin-top:0em;
margin-left:0em;
}
#menu a {
display:block;
border-right:1px solid #fff;
background:#3B3B3B;
color:#3B3B3B;
text-decoration:none;
padding:0 0px;
text-align:center;
background: url(images/nav.gif) repeat-x 0 0;
height: 50px;
list-style-type: none;
}
#menu a:hover {
background-color::#3B3B3B3;
color:#fff;
text-align:center;
height: 50px;
list-style-type: none;
}
#menu ul {
border-top:1px solid #fff;
float: right;
list-style-type: none;
}
#menu ul a {
border-right:none;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
border-left:1px solid #fff;
background:#fff;
text-align:center;
background: url(images/nav.gif) repeat-x 0 0;
height: 50px;
}
/* SHOW SUBMENU 1 */
#menu li:hover ul, #menu li.over ul {
display:block;
background:#fff;
}
#menu li:hover ul ul, #menu li.over ul ul {
display:none;
}
/* SHOW SUBMENU 2 */
#menu ul li:hover ul, #menu ul li.over ul {
display:block;
}
and the following HTML code
<div class="shell">
<div class="cl"> </div>
<ul id="menu">
<li>HOME</li>
<li>
CLIENTS
<ul>
<li>CLIENT LIST</li>
The problem I am having is that when the I hover my mouse over the drop down tabs - "CLIENT LIST" - It gets displayed behind the images and text that are on my page. How do I bring it to front?
As I understand your menu is coming under images and text, which are placed on your page. and you want to display this menu over all the content of the page.
If so, then provide a higher z-index value to your menu from all the content.
like: .menutab { z-index : 1000;} where .menutab is a class which is on your menu element.
Edited : make change in this line
/* SHOW SUBMENU 1 */ #menu li:hover ul, #menu li.over ul
{ display:block; background:#fff;}
to
/* SHOW SUBMENU 1 */ #menu li:hover ul, #menu li.over ul
{ display:block; background:#fff; z-index:1000; }
It will solve your problem.
check this DEMO
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 a dropdown menu on my page but there are some problem i.e when the dropdown appear and moved down to certain limit it will disappear as shown in image.
1 ) when the dropdown appear for Mobile App Development as shown in image and moved down to Black berry its work but when i move mouse pointer to Palm the menu disappeared.css code is/* menu styles */
nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
nav a{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
text-align: center;
background-color:#333;
width:80px;
}
nav a:hover{
background-color:#fff;
color:#333;
}
nav li{
float:left;
position:relative;
border-right: 1px solid white;
}
nav ul {
position:absolute;
display:none;
width:12em;
top:1.5em;
}
nav li ul a{
width:12em;
height:auto;
float:left;
}
nav ul ul{
top:auto;
}
nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
what should i do in css so that my menu will appear on my other div.
Try to specify z-index in your css:
z-index : 100;