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;
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 have this code:
/*TOPMENU*/
#menu_wrap{height: 80px; width:80%; float: left; position:relative;}
#topmenu{width:100%; float:left; }
#topmenu ul{ height: 70px; padding:0; position:relative; border-style:solid;
border-width: 1px 0px 1px 0px;} /* height determines distance between 2 border lines */
#topmenu ul li{ float:left; list-style-type:none; margin:15px;}
#topmenu ul li a{ width: 100px; line-height: 22px; text-align:center; display: block; text-decoration:none; color:#a7a9ac; font-size:25px; text-transform:uppercase} /
#topmenu ul.menu > li a:hover{ height: 50px; background:#C8C1B7; color: #fff} //when you hover on menu items
//The line above this is what I'm working on
#topmenu ul .current-menu-item a{ color:#a7a9ac;} // color of HOME font
#topmenu ul .current-menu-item ul li{ background:#1e1e1e;padding:1px 0px;}
#topmenu ul .current-menu-item ul li a{padding:4px; background:none;color:#fff;}
#topmenu ul .current-menu-parent ul .current-menu-item{background:#3e3e3e repeat;}
#topmenu ul .current-menu-parent ul .current-menu-item a{ padding:4px; background:none;}
#topmenu ul .current-menu-parent ul .current-menu-item ul .menu-item a{ padding:4px;}
#topmenu ul .current-menu-item .current-menu-item .sub-menu li a{ padding:4px;background:none;}
#topmenu ul li ul{ position:absolute;width:200px; z-index:999999; display:none; padding-left:0; margin-left:-10px;}
#topmenu ul li ul li{ float:none; margin:0; padding:0px 0px; background:#9F988F ; display:block; }
#topmenu ul li ul li a{ color:#fff; width: 186px;font-size:10px; font-weight:normal; padding:4px;}
/* #topmenu ul li ul li a, #topmenu ul li .sub-menu .current-menu-item a:hover:hover{background:#C8C1B7; color:#ffffff; } */
#topmenu ul li ul li ul{left: 100%; margin-top:-10px; float:none; margin-left:0px; display:none;}
So I'm trying to get the main menu items to have a rectangle around them when I hover over them, but that's happening to the sub menu items as well. How do I modify my code so that it only affects the main menu? I'm using a theme template so I don't have the HTML, just the CSS.
Thanks in advance!
Without the HTML it is difficult, however, you are going to need to use the direct selector in CSS..
If you are trying to apply the rectangle only to the parent ul only, use:
#topmenu > ul:hover {
/* style */
}
This will apply the CSS to the ul which is a direct child of #topmenu. Therfore it won't apply it to the other children ul.
UPDATED..
Add the following..
#topmenu ul.menu > li li a:hover {
background: red;
}
If you want it to be the same color as the background..
#topmenu ul.menu > li li a:hover {
background: #C8C1B7;
}
Hi guys this is my CSS code for a drop down menu:
#nav {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background-color:#60625C;
bottom:0;
left:0;
margin:0;
padding:0;
width:100%;
position:absolute;
z-index:1;
}
#nav, #nav ul {
line-height:40px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:100%;
}
#nav a, #nav a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
display:block;
text-decoration:none;
}
#nav li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
border-right:1px solid #6E7073;
}
#nav a, #nav a:visited {
color:#FFFFFF;
display:block;
padding:0 20px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
text-decoration:none;
}
#nav li ul {
border-bottom:1px solid #6E7073;
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:222px;
}
#nav li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21 none repeat scroll 0 0;
border-left:1px solid #6E7073;
border-right:1px solid #6E7073;
border-top:1px solid #6E7073;
width:220px;
}
#nav li li a, #nav li li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21 none repeat scroll 0 0;
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
}
#nav li li a:hover, #nav li li a:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#60625C none repeat scroll 0 0;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}
However the menu is being placed in an unwanted position at the bottom of the screen.
How can I make it display between the title and main content of the blog?
This is the code relating to the navigation in 'header.php'
<div id="navbar">
<div id="nav">
<ul>
<li>Home</li>
<?php wp_list_pages('title_li=&depth=0&sort_column=menu_order&exclude=56'); ?>
</ul>
</div>
Many thanks in advance.
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 so close to launching my first Magento project, and the final leg has just been one CSS hurdle after another… mostly with IE.
This last one popped up just after fixing 5 other things, and has not been an issue until now.
In IE, my top nav links (2) are appearing about 20px too high until you hover over them and then they jump into place.
Navigation CSS:
.nav-container { background:#ffffff url(../images/bkg_nav0.jpg) 50% 0 repeat-y; }
#nav { width:918px; margin:0 auto; padding:0 16px; font-size:13px; }
#nav li { position:relative; text-align:left; }
#nav li.over { z-index:998; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none;}
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav ul li.parent a { background:url(../images/bkg_nav2.gif) 100% 100% no-repeat; }
#nav ul li.parent li a { background-image:none; }
/* 0 Level */
#nav li { float:left; }
#nav li.active a { color:#8751b0; }
#nav a { float:left; padding:5px 12px 6px 8px; color:#000000; font-weight:bold; display: block;}
#nav li.over a,
#nav a:hover { color:#8751b0; display: block;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding-bottom:1px; background:#ecf3f6 url(../images/bkg_nav1.gif) 0 100% repeat-x; }
#nav ul li.last { background:#ecf3f6; padding-bottom:0; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }
As you can see, there are no :hover properties with margins that are overriding the original state. I just can't figure this one out.
I have tried Firebug but I just can't relate it to the IE issues. It renders fine in FF...and the IE 'Developer Tools' just can't compare to Firebug...
Please, any help is appreciated!
I had the same issue with a menu and found that removing the "display: block;" fixed this issue with IE.