I am using ul li menu drop down for my site.. it displayed in ifrefox and chrome correctly. but in IE its not displayed...
my code like..,
<style type="text/css"> .nav { width:1000px; } .nav ul { }
.nav ul li { list-style: none;}
ul.dropdown { position:relative; width:auto; font:12px Arial, Helvetica, sans-serif; }
ul.dropdown li { float:left; zoom:1; height:30px; padding:6px 2px 0 2px; border-right:1px solid #bacfe4; }
ul.dropdown li li { border-right:1px solid #ccc; border-left:1px solid #ccc; margin-left:9px;}
ul.dropdown a:hover { color:#000; } ul.dropdown a:active { color:#ffa500; }
ul.dropdown li a { display:block; padding:4px 8px; color:#000; text-decoration:none; font:bold 12px Arial, Helvetica, sans-serif; }
ul.dropdown li:last-child a { border-right:none;}
ul.dropdown li:hover { color:#000; position:relative; }
ul.dropdown li.hover a { color:#000; }
ul.dropdown ul { text-align:left; visibility: hidden; position: absolute; left:-10px; top:36px; }
ul.dropdown ul li { border-bottom:1px solid #ccc; float:none; width:120px; height:25px; }
ul.dropdown ul li a { border-right:none; width:100%; display:inline-block; color:#000; }
ul.dropdown ul ul { left:100%; top:0; }
ul.dropdown li:hover > ul { visibility:visible; }
</style>
<script type="text/javascript">
</script>
<div class="nav">
<ul class='dropdown'>
<li><a href=''>one</a></li>
<li><a href=''>two</a></li>
<li> <a href=''> three </a>
<ul class='sub_menu'>
<li><a href=''>one3</a></li>
<li><a href=''>two3</a></li>
</ul>
</li>
</ul>
</div>
I included the jquery.js file two times in my actual page.
Thats why it was not displaying.
Related
I have created a Menu list.
It is working perfectly on Chrome and Firefox but misaligned in IE8
Chrome Snapshot :-
http://postimg.org/image/g6uf9zikr/
IE8 Snapshot :-
http://postimg.org/image/u6o3pzasz/
Here's my CSS ------
div.menu {
background-color:#383838;
height:65px;
margin-bottom:20px;
}
div.menu ul {
vertical-align:middle;
list-style:none;
margin:0;
padding:0;
}
div.menu ul li {
float:left;
display:block;
}
div.menu ul li a {
color:#FFFFFF;
display:block;
float:left;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
padding:24px 20px 22px;
text-transform:uppercase;
text-decoration:none;
}
div.menu ul li a:hover {
text-decoration:underline;
background-color:#2B2B2B;
}
div.menu ul li:hover ul {
display:block;
}
div.menu ul li ul {
vertical-align:middle;
text-align:center;
float: none;
list-style: none;
display: none;
position:absolute;
z-index:999;
margin-top:60px;
background-color:#383838;
opacity:0.8;
}
div.menu ul li ul li{
float: none;
vertical-align:middle;
background-color:#383838;
padding:15px;
}
div.menu ul li ul li a {
color:#FFFFFF;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
text-transform:uppercase;
padding:0px;
}
div.menu ul li ul li a:hover {
text-decoration:underline;
}
div.menu ul li ul li:hover{
background-color:#2B2B2B;
opacity:1.0;
}
<div class="menu">
<ul>
<li> HOME </li>
<li>CONTROLLER
<ul>
<li> CONTROLLER-1</li>
<li> CONTROLLER-2</li>
</ul></li>
<li>IOS BPL ZIO
<ul>
<li> IOS BPL ZIO-1</li>
<li> IOS BPL ZIO-2</li>
</ul></li>
</ul>
</div>
Please help me to resolve the issue.
Remove float: left from the links in the menu. This will cause those links to fill the entire row, and the ul of the submenu will not be shown next to it.
To counter that gap that causes, remove the margin-top from the submenu ul.
That should do the trick, although I don't have IE8 at hand to test it.
div.menu {
background-color:#383838;
height:65px;
margin-bottom:20px;
}
div.menu ul {
vertical-align:middle;
list-style:none;
margin:0;
padding:0;
}
div.menu ul li {
float:left;
display:block;
}
div.menu ul li a {
color:#FFFFFF;
display:block;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
padding:24px 20px 22px;
text-transform:uppercase;
text-decoration:none;
}
div.menu ul li a:hover {
text-decoration:underline;
background-color:#2B2B2B;
}
div.menu ul li:hover ul {
display:block;
}
div.menu ul li ul {
vertical-align:middle;
text-align:center;
float: none;
list-style: none;
display: none;
position:absolute;
z-index:999;
background-color:#383838;
opacity:0.8;
}
div.menu ul li ul li{
float: none;
vertical-align:middle;
background-color:#383838;
padding:15px;
}
div.menu ul li ul li a {
color:#FFFFFF;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
text-transform:uppercase;
padding:0px;
}
div.menu ul li ul li a:hover {
text-decoration:underline;
}
div.menu ul li ul li:hover{
background-color:#2B2B2B;
opacity:1.0;
}
<div class="menu">
<ul>
<li> HOME </li>
<li>CONTROLLER
<ul>
<li> CONTROLLER-1</li>
<li> CONTROLLER-2</li>
</ul></li>
<li>IOS BPL ZIO
<ul>
<li> IOS BPL ZIO-1</li>
<li> IOS BPL ZIO-2</li>
</ul></li>
</ul>
</div>
here is my problem.
Everything is working except on ie7 (of course).
The dropdown menu don't display.
Do someone know a workaround?
FYI, the doctype is set. (If anybody ask)
Here is my code at the end...
Thanks for your help
<ul class="menu">
<li class="subMenu">
<a style='clear: left;' id='jiraMenu' href="#">JIRA</a>
<ul>
<li>Make a request</li>
<li><a href="#" >View the version</a></li> <!--"https://caedsh03.caecorp.cae.com/secure/StructureBoard.jspa?s=173" !-->
</ul>
</li>
<li>
<a href="#" name="language" >En</a>
</li>
</ul>
CSS
.menu {
margin:0;
padding:0;
border-collapse:collapse;
}
.menu li {
list-style:none;
float: left;
}
.menu li a:link, .menu li a:visited {
display:block;
text-decoration:none;
background-color:#10509e;
padding: 0.5em 2em;
margin:0;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
color:white;
}
.menu li a:hover {
background-color:white;
color: #10509e;
outline:1px solid black;
}
/*style the sub menu*/
.menu li ul {
position:absolute;
display: none;
border-top:1px solid #fff;
margin:0;
padding:0;
z-index: 999;
}
.menu li ul li {
display:inline;
float:none;
width: 100%;
}
.menu li ul li a:link, .menu li ul li a:visited {
background-color:#10509e;
color: white;
width:auto;
}
.menu > li:hover ul {
display: block;
display: table-cell;
}
.menu li ul li a:hover {
background-color:white;
color: #10509e;
}
display: table-cell is not supported in IE7. Removing it should solve the problem.
http://jsbin.com/ugIfAJi/1
I am new in coding css, tried suggested answers related to my problem but nothing works, any help will be appreciated; I want to place my menu at the center of the page while retaining the container background covered the entire available width...
here is my html code:
<div id="nav">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Mission</li>
<li>Board of Directors</li>
<li>Location</li>
</ul>
<li>Facilities & Services
<ul>
<li>Services >>
<ul>
<li>Internal Medicine</li>
<li>OB-Gyne</li>
<li>Pediatrics</li>
<li>Surgery</li>
<li>Dental Care</li>
<li>Rehabilitation Medicine</li>
<li>Otorhinolaryngology(ENT)</li>
</ul>
<li>Facilities >>
<ul>
<li>Laboratory-Tertiary Level</li>
<li>Intensive & Critical Care</li>
<li>Nursery & Neonatal Care</li>
<li>Pediatric Intensive Care</li>
<li>Pulmonary Care</li>
<li>Ear Care Center</li>
<li>Hemodialysis Unit</li>
<li>Cardiac Diagnostics</li>
<li>Radiology Diagnostics</li>
<li>OB-Gyne Diagnostics</li>
</ul>
</ul>
</li>
<li>Healthcare Plans
<ul>
<li>Accredited HMOs</li>
<li>Executive Checkup</li>
<li>Credit Cards</li>
</ul>
</li>
<li>Doctors
<ul>
<li>""</li>
</ul>
</li>
<li>Careers</li>
<li>Archive</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</div>
and my css code:
#nav {
Z-INDEX: 10;
text-align:center;
width: 100%;
height: 20px;
background: green;
position: relative;
padding:3px;
font-size: 13px;
list-style-type:none;
list-style-position:outside;
display:inline-block;
font-weight: bold;
line-height:1.5em;
float: none;
}
#nav-wrapper {
text-align: center;
}
#nav ul{
Z-INDEX: 10;
text-align:center;
position:relative;
width: 1000px;
display:inline-block;
margin:0;
padding:0;
background: none;
list-style-type:none;
list-style-position:outside;
line-height: 1.7em;
font-size: 13px;
float: none;
}
#nav li li{
Z-INDEX: 10;
text-align:left;
display:inline-block;
margin:0;
padding:0;
font-weight: normal;
list-style-position:outside;
border-bottom: 0.1em solid white;
color: #fff;
}
#nav a:link, #nav a:visited{
display:block;
padding:0px 5px;
color:#fff;
text-decoration:none;
background: green;
}
#nav ul a:hover{
Z-INDEX: 999;
background: light-green;
color: yellow;
position: relative;
}
#nav li ul a:hover{
Z-INDEX: 999;
background: green;
color: yellow;
position: relative;
}
#nav li li a:hover{
Z-INDEX: 999;
background: light-green;
color: yellow;
font-weight: bold;
position: relative;
}
#nav li a:hover{
background: light-green;
color: yellow;
Z-INDEX: 999;
position: relative;
}
#nav a:active{
color: yellow;
font-weight: bold;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:14em;
top:1.3em;
display:none;
}
#nav li ul a{
width:14.65em;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:14.65em;
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;
}
You could wrap the #nav with another div.
<div id="wrap">
<div id="nav"></div>
</div>
Remove the width from #nav, and apply the following CSS:
#wrap {
background: green;
text-align: center;
}
jsFiddle here - it works.
i have a problem with CSS white space between words of the menu bar. I tried numerous ways but still cant solve it. Can someone help me here?
The picture of the menu problem can be seen below:
http://imageshack.us/photo/my-images/201/44262065.jpg/
I want the outcome to be like this, lesser space between each menu:
http://i47.tinypic.com/2vvwcnn.jpg
Here is my css:
#cssmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
#cssmenu ul{
background:url(img/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px 0px 0px 132px;
display: inline-block;
}
#cssmenu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 0px;
text-align:left;
text-decoration:none;
}
#cssmenu li a:hover{
color:#000000;
text-decoration:none;
}
#cssmenu li ul{
background:#e0e0e0;
border-left:2px solid #f68618;
border-right:2px solid #f68618;
border-bottom:2px solid #f68618;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:180px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
display:block;
float:none;
padding:0px;
width:180px;
}
#cssmenu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
#cssmenu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
#cssmenu p{
clear:left;
}
#cssmenu .active > a:hover {
color:#ffffff;
}
Here is my html code:
<div id='cssmenu'>
<ul>
<li><a href='index.php'><span>Home</span></a></li>
<li><a href='promotions.php'><span>Promotions</span></a></li>
<li><a href='outlets.php'><span>Outlets</span></a></li>
<li><a href='feedback.php'><span>Feedback</span></a></li>
<li class='has-sub '><a href='#'><span>Career</span></a>
<ul>
<li><a href='stall.php'><span>Stall Leasing</span></a></li>
<li><a href='career.php'><span>Career Opportunity</span></a></li>
</ul>
</li>
<li><a href='contactUs.php'><span>Contact Us</span></a></li>
</ul>
</div>
use this decrease your padding of li and line-height also
#cssmenu li{
float:left;
padding:30px;
display: inline-block;
}
Try removing the padding from .border class, row 311 in you blue round.css file
uMy child pages are showing up in a horizontal line under the parent page link in the navigation. I can't figure out where the css is wrong. You can see what I'm talking about here (the links under Sample Page are the ones in question): http://sitetest3.talktothedogs.com.
HTML for Navigation (which is auto-generated by WP)
<div id="nav">
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-2">Sample Page
<ul class='children'>
<li class="page_item page-item-4">Testing page 2</li>
<li class="page_item page-item-6">Testing page 1</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS Code
.menu, .menu ul { margin:0; padding:0; list-style:none; height:29px; text-align:center; }
.menu a { color:#fff; display:block; padding-left:15px; padding-right:15px; padding-bottom:0px; }
.menu a:hover { color:#000; display:block; text-decoration:none; }
.menu li { float:left; margin:0; padding: 0px; }
.menu li li { float:left; margin: 0 0 0 5px; padding:0; width:130px; }
.menu li ul.submenu li { display:block; position:absolute; left:0; }
.menu li li a, .menu li li a:link, .menu li li a:visited { background:#a82652; width:150px; float:none; margin:0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li li a:hover, .menu-header li li a:active { background:#000; width:150px; float: none; margin: 0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li ul { position:absolute; width:10em; left:-999em; padding-top:13px; z-index:1; }
.menu li:hover ul { left:auto; display:block; }
.menu li:hover ul, #menu li.sfhover ul { left: auto; }
.menu li.current_page_item a { }
.menu li.current_page_item a:hover{ }
Any help would be appreciated. Thanks in advance!
Change your CSS as follows:
.menu li a{ margin-bottom:13px;}
.menu li li { float:none; margin: 0; padding:0; width:130px; }
Here is how this would look
Your first line in the CSS:
.menu, .menu ul { ... }
is setting the height of both the <div class="menu"> AND the <ul> within that .menu to the same height. The entire menu is constrained to a container that's 29px high.