I have a CSS dropdown menu that works in most browsers, but not in some older versions of IE on XP. I wouldn't really care except many of my students still use this browser and therefore are limited in ability to use the site. On these older IE browsers, only the HOME link is displayed.
Here is the HTML followed by CSS. Can anyone figure out what is causing the problem?
Here are some Browser Stack screenshots: http://www.browserstack.com/screenshots/46848552eb08ea8bb0ca0b10c4843ed8cb6cfb3e
HTML
<div id="nav">
<ul id="menu">
<li class="medial">
HOME
</li>
<li class="medial">
ABOUT
</li>
<li class="medial">
PORTFOLIO
</li>
<li class="medial">COURSES
<ul class="sub-menu">
<li>
Low Intermediate Conversation
</li>
<li>
High Intermediate Conversation
</li>
<li>
ELT Practice
</li>
<li>
TESOL Practicum
</li>
<li>
Older Courses
</li>
</ul>
</li>
<li class="medial">STUDENT WORK
</li>
<li class="medial"><?php add_thickbox(); ?>
CALENDAR
</li>
<li>CONTACT
<ul class="sub-menu">
<li>
anthony.teacher#yahoo.com
</li>
<li>
<a class="smcf-link" href="http://www.anthonyteacher.com/email-me/">Contact Form</a>
</li>
</ul>
</li>
<li class="social"><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Facebook.png" width="35px" alt="Facebook" /><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Twitter.png" width="35px" alt="Twitter" /><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Youtube.png" width="35px" alt="YouTube" /><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Linkedin.png" width="35px" alt="LinkedIn" />
</li>
</ul>
</div>
CSS
/* new menu */
#nav {
background-image:url('http://www.anthonyteacher.com/wp-content/themes/blank2L/menubar.jpg');
background-repeat:repeat-x;
font: bold 12px arial;
width:100%;
height: 29px;
}
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li.medial {
background: url('http://www.anthonyteacher.com/wp-content/themes/blank2L/orangeborder1.gif');
background-repeat:no-repeat;
background-position:right;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a {
text-decoration: none;
color: #fff;
padding: 5px;
display:inline-block;
margin-top: 2px;
margin-right: 5px;
margin-left: 5px;
}
ul#menu li a:hover {
background: #555555;
color: #fff
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
background-color: #fff;
border: 1px solid black;
position: absolute;
top: 28px;
margin-left: 10px;
margin-top: -10px;
width: auto;
padding: 5px;
}
ul#menu li ul.sub-menu li a {
color: #000;
font-weight:normal;
}
ul#menu li ul.sub-menu li a:hover {
color: #000;
font-weight:normal;
background-color: #ff0000;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
ul#menu li.social {
list-style: none;
float: right;
margin-top: 5px;
}
ul#menu li.social a {
margin: -11px -5px;
}
ul#menu li.social a:hover {
background: none;
}
Consider using something like selectivizr.com.
As #jeff has pointed out, early IE builds do not natively support :hover on anything other than <a>. Assuming your students have javascript turned on (unless they really are in the dark ages) Selectivizr should fix your problem without needing to change anything.
Related
I wrote a code using different internet source and I ran into a problem every object that's in the bottom of the menu parts cannot be interacted the menu interferes everything below him where the dropdown falls . the hitbox of the menu seems to included the dropdown even when its not shown
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
Help will be appreciated
edit:
the menu is working but everything below him in the area where the dropdown fals dosent
I have learnt CSS online and I am new to web designing. Need some expert opinion here, I may have written something wrong or stupid. Please forgive that as I am a beginner.
Here are my CSS and HTML codes:
#menu {
float: left;
width: 1000px;
height: 30px;
background-color:#0066FF;
border-bottom: 1px solid #333;``
}
#menu ul {
float: left;
width: 1000px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#menu ul li{
display:inline;
}
li ul {display: none;}
li:hover ul {display: block; position:relative;}
li:hover li a{background: #0066FF;}
#menu ul li a{
float: left;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
}
#menu li a:hover, #menu li .current{
color: #FFFF00;
}
#menu ul li:hover ul{
width: 150px;
white-space: nowrap
height: 10px;
text-align: center;
background:#0066FF;
}
<div id="menu">
<ul>
<li>Home</li>
<li>Quran
<ul>
<li>Translation</li>
<li>Tajweed</li>
<li>Tafseer</li>
<li>Qoutes</li>
</ul>
</li>
<li>Ahadees
<ul>
<li>Sahih Al-Bukhari</li>
<li>Sahih Muslim</li>
<li> Sunan Abu-Dawud</li>
<li>al-Tirmidhi</li>
<li>al-Nasa'i</li>
<li>Ibn Maja </li>
</ul></li>
<li>Wazaif
<ul>
<li>Allah's help</li>
<li>Rizzaq</li>
<li>Aulaad</li>
<li>Marriage</li>
</ul></li>
<li>Rights & Duties
<ul>
<li>As Parents</li>
<li>As Husband</li>
<li>As Wife</li>
<li>As Son</li>
<li>As Daughter</li>
</ul></li>
<li>Videos
<ul>
<li>Molana Tariq Jameel</li>
<li>Dr Zakir Naik</li>
<li>Dr Farhat Hashmi</li>
<li>Naat videos</li>
</ul></li>
<li>Quran & Science</li>
<li>Library
<ul>
<li>Masnoon Duain</li>
<li>Tib-e-Nabvi</li>
<li>Tafseer</li>
<li>Islamic comerace</li>
</ul></li>
<li>FAQs</li>
<li>Blogs</li>
<li>Contacts</li>
</ul>
</div>
It looks like the problem is that you haven't positioned the sub-menus properly.
Because the sub-menu have not been given position:absolute they remain in the documents flow and so disturb other elements when shown.
Adding position:absolute removes them from the flow and solves the problem.
In order to be positioned according to the parent li, that li needs to be a block (hence display:inline-block)(you could float the li too if that's your choice) and be given position:relative.
Here's a suggestion that should help you along the way.
#menu ul li {
display:inline-block;
position: relative;
}
li ul {
display: none;
position: absolute;
top:100%;
left:0;
}
li:hover ul {
display: block;
}
JSfiddle Demo
#menu {
float: left;
width: 1000px;
height: 30px;
background-color: #0066FF;
border-bottom: 1px solid #333;
``
}
#menu ul {
float: left;
width: 1000px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#menu ul li {
display: inline-block;
position: relative;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
li:hover ul {
display: block;
}
li:hover li a {
background: #0066FF;
}
#menu ul li a {
float: left;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
}
#menu li a:hover,
#menu li .current {
color: #FFFF00;
}
#menu ul li:hover ul {
width: 150px;
white-space: nowrap height: 10px;
text-align: center;
background: #0066FF;
}
<div id="menu">
<ul>
<li>Home
</li>
<li>Quran
<ul>
<li>Translation
</li>
<li>Tajweed
</li>
<li>Tafseer
</li>
<li>Qoutes
</li>
</ul>
</li>
<li>Ahadees
<ul>
<li>Sahih Al-Bukhari
</li>
<li>Sahih Muslim
</li>
<li> Sunan Abu-Dawud
</li>
<li>al-Tirmidhi
</li>
<li>al-Nasa'i
</li>
<li>Ibn Maja
</li>
</ul>
</li>
<li>Wazaif
<ul>
<li>Allah's help
</li>
<li>Rizzaq
</li>
<li>Aulaad
</li>
<li>Marriage
</li>
</ul>
</li>
<li>Rights & Duties
<ul>
<li>As Parents
</li>
<li>As Husband
</li>
<li>As Wife
</li>
<li>As Son
</li>
<li>As Daughter
</li>
</ul>
</li>
<li>Videos
<ul>
<li>Molana Tariq Jameel
</li>
<li>Dr Zakir Naik
</li>
<li>Dr Farhat Hashmi
</li>
<li>Naat videos
</li>
</ul>
</li>
<li>Quran & Science
</li>
<li>Library
<ul>
<li>Masnoon Duain
</li>
<li>Tib-e-Nabvi
</li>
<li>Tafseer
</li>
<li>Islamic comerace
</li>
</ul>
</li>
<li>FAQs
</li>
<li>Blogs
</li>
<li>Contacts
</li>
</ul>
</div>
I am trying to create a horizontal navigation that when you rollover the root items the sub pages and their sub pages are shown below but in a 3 or 4 column layout. I have experimented with the css "column count" but it is not giving me consistent results. I am wondering if anyone has come across this before or could point me in the right direction.
<ul id="nav">
<li class="nonActive rootNav" id="rootNav1">
for Residents
<ul>
<li><a href="/for-residents/history-of-smithville/">History of
Smithville</a></li>
<li>Mission and Vision</li>
<li>Alerts</li>
<li>FAQs</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav2">
for Business
<ul>
<li>Film Commission</li>
<li>Comprehensive Plan</li>
<li>Chamber of Commerce</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav3">
our Community
<ul>
<li>Calendar</li>
<li>News</li>
<li><a href="/our-community/memorial-park-project/">Memorial Park
Project</a></li>
<li>City Maps</li>
<li>Airport</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav4">
city Departments
<ul>
<li>Police Department</li>
<li>Fire Department</li>
<li>Parks and Rec</li>
<li>Public Library</li>
<li>
Utilities
<ul>
<li>Pay online</li>
</ul>
</li>
<li>Public Works</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav5">
city Government
<ul>
<li>
City Council
<ul>
<li><a href=
"/city-government/city-council/city-council-meeting-minutes/">City Council
meeting minutes</a></li>
</ul>
</li>
<li>City Manager</li>
<li>City Staff</li>
<li>
Municipal Court
<ul>
<li><a href="/city-government/municipal-court/municipal-judges/">Municipal
Judges</a></li>
<li><a href="/city-government/municipal-court/open-warrants/">Open
Warrants</a></li>
</ul>
</li>
</ul>
</li>
</ul>
body {
margin: 0px;
}
ul#nav {
margin: 0px;
padding: 0px;
}
ul#nav li {
list-style-type: none;
display: inline;
position: relative;
float: left;
}
ul#nav li a {
display: block;
padding: 10px;
background-color: #EAEAEA;
border: 1px solid #000000;
}
ul#nav li ul {
display: none;
position: absolute;
width: 750px;
margin: 0px 0px 0px -40px;
clear: both;
columns:200px 3;
-webkit-columns:200px 3; /* Safari and Chrome */
-moz-columns:200px 3; /* Firefox */
}
ul#nav li:hover ul {
display: block;
}
ul#nav li ul li {
clear: left;
display: block;
float: none;
}
ul#nav li ul li ul {
margin: 0px;
padding: 0px 0px 0px 10px;
position: relative;
}
ul#nav li ul li ul li {
clear: both;
display: block;
}
Here is my fiddle
fiddle
Here are a few examples of what I am trying to achieve.
Hm, based on your JSFiddle, I'm assuming the problem you're facing right now is that all of the submenus are lined up with the menu item that causes them to appear, and you want them aligned to only the left. You could achieve this through removing the relative positioning on <li> elements, and using left:0 on the submenus to put them where you want them.
So, your CSS adjustments would look like:
ul#nav li {
/* position:relative; */
}
ul#nav li ul {
left:0;
}
Here's a JSFiddle to show you how that look. Hope this helps! Let me know if you have any questions.
I'm sure there are plenty of ways to tackle this with a ton of different options - but here's one approach I worked with
#nav {
position: relative;
float: left;
}
#nav > li {
width: 20%;
}
ul, li {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 100%;
float: left;
}
ul li a {
display: block;
padding: 10px;
background-color: #EAEAEA;
border: 1px solid #000000;
text-decoration: none;
}
ul li ul {
position: absolute;
top: 40px;
left: 0;
display: none;
}
ul li:hover > ul {
display: block;
}
/* The Rest for example purposes */
ul li ul li {
width: 25%;
}
ul li ul li a {
background: #ddd;
border: none;
}
With skipping the relative positioning on the first li children, the second level of ul's can inherit the width of the top level ul.
# http://jsfiddle.net/PqhEs/
Organized it a little differently - It all depends on how you'd want to group items in your sub sub pages, right now in the fiddle they just inherit the sub navigation's styles, but you could remove the float and adjust the width to have them list like the example.
Screenshot of the header that's needing this work:
As you can see, the menu is below the logo. I was wanting the menu beside it, to the right of the logo. I don't know if it's possible, but if it is, I could use some help, please.
Here's the code for everything, separated for your convenience.
The menu and logo in their divs:
<div id="wrapper">
<div id="body-wrapper">
<div class="head">
<div class="head-wrapper">
<div class="logo">
<img src="http://i.imgur.com/sDnntOE.png">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
</ul>
</li>
<li>Products
<ul>
<li>Chaotix Browser</li>
<li>Useful Beta 1.7.5</li>
<li>Chaotix Cleaner 1.4</li>
<li>Forum</li>
<li>CDev</li>
<li>Infinite-PVP</li>
<li>Ulta-Craft</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>E-Mail</li>
<li>News Letter</li>
<li>Social Mediar</li>
</ul>
</li>
<li>Divisions
<ul>
<li>Gaming</li>
<li>Films</li>
</ul>
</li>
<li>Chaotix! Forum</li>
<li>Partnerships
<ul>
<li>GameFanShop</li>
<li>Forumotion</li>
</ul>
</li>
</ul>
The CSS:
<style>
*{
background-image:url('http://i.imgur.com/0u7sBsT.png');
background-color:#999999;
font-family:Tahoma;color:white;
}
div.head{
text-align:Center;
padding-top:10px;
}
div.body{
padding-top:100px;
padding-left:300px;
padding-right:300px;
text-align:center;
}
div.logo{
float:left;
}
a{
color:white;
}
a:hover{
color:gray;
}
/* Main menu
------------------------------------------*/
ul{
font-family: Lato,Tahoma,Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
padding-left:25px;
}
ul li{
display: block;
position: relative;
float: left;
}
li ul{
display: none;
}
ul li a{
display: block;
text-decoration: none;
color: #FFFFFF;
border-top: 1px solid #000000;
padding: 5px 15px 5px 15px;
background: #000000;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover{
background: #999999;
}
li:hover ul{
display: block;
position: absolute;
}
li:hover li{
float: none;
font-size: 11px;
}
li:hover a{
background: #000000;
}
li:hover li a:hover{
background: #999999;
}
</style>
Add your css
.logo img
{
float:left;
}
.logo ul
{
float:left;
}
It working ok. Hope this help!
I am working on this code its a type of menu, which sticks to the bottom of the screen. i wanted drop up menu on hovering over various items. but my problem is the submenus are increasing towards downwards where they should be increasing upwards.... here is my code please help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
Dropdown menu
</title>
<style type="text/css">
body{
padding: 3em;
}
#menu ul {
font: 12px georgia;
list-style-type:none;
position:fixed;
left:0px;
bottom:0px;
height:50px;
width:100%;
}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;
}
#menu a:hover {
background:#E3E4FA;
}
#menu ul li ul li {
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background:#E3E4FA;
}
#menu ul li ul li a {
font: 11px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;
}
#menu ul li {
float: left;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background:#E3E4FA;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
padding-bottom:13px;
}
#menu li{
position:relative;
float:left;
}
#menu ul li ul, #menu:hover ul li ul{
display:none;
list-style-type:none;
padding-bottom:0px;
}
#menu:hover ul, #menu:hover ul li:hover ul{
display:block;
}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
#menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<center>
<a href="X">
Home
</a>
</center>
<ul>
<li>
<a href="#">
About Us
</a>
</li>
<li>
<a href="#">
Disclaimer
</a>
</li>
</ul>
</li>
<li>
<center>
<a href="#">
Practice Areas
</a>
</center>
<ul>
<li>
<a href="#">
Civil Law
</a>
</li>
<li>
<a href="#">
Criminal Law
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Family Law
</a>
<ul>
<li>
<a href="#">
Joomla
</a>
</li>
<li>
<a href="#">
Drupal
</a>
</li>
<li>
<a href="#">
Wordpress
</a>
</li>
<li>
<a href="#">
Joomla
</a>
</li>
<li>
<a href="#">
Drupal
</a>
</li>
<li>
<a href="#">
Wordpress
</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Updated : Demo
#navigation {
width: 980px;
height: 38px;
margin-top:100px;
}
#navigation li {
float: left;
position: relative;
width:100px;
border:1px solid red;
} #navigation li:hover { background: silver; }
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover { text-decoration: none; }
#navigation li ul {
position: absolute;
display:none;
z-index: 1000;
min-width: 100%;
left:-1px;
}
#navigation li:hover ul {
bottom:20px;
display:block;
background:#eee;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding: 8px 10px;
line-height: 28px;
width: 100%;
}
<ul id="navigation">
<li>1</li>
<li>2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>