I am just a beginner to HTML, CSS, PHP, javaScript.
My drop down menus to the navigation bar is not working.
When I keep the mouse over the links in navigation bar, no drop down menu is apeearing.
Need a help from some one.
CODE
<head>
#menu {
width:1060px;
margin:auto;
padding:0px 0px 0px 0px;
position:relative;
}
#menu ul {
height:25px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
background-color:#8AD9FF;
border-radius:18px;
margin-top:10px;
margin-bottom:5px;
list-style:none;
}
#menu ul li{
border-style:solid;
border-width:2px;
border-bottom:none;
border-top:none;
border-color:#0000FF;
display:inline-block;
text-decoration:none;
color:#FF0000;
padding-bottom:0px;
padding-top:0px;
margin-right:-8px;
}
#menu ul li a {
padding-left:25px;
padding-right:25px
}
#menu ul li a:link{
color:#3366CC;
text-decoration:none;
}
#menu ul li a:visited{
color:#3366CC;
text-decoration:none;
}
#menu ul li a:hover{
background-color:#3399FF;
text-decoration:underline;
}
#menu ul ul {
display:none;
width:125px;
}
#menu ul li a:hover > ul {
margin:0px;
padding:0px;
}
#menu ul li a:hover > ul li {
float:none;
display:block;
}
#menu ul li a:hover > ul li a {
color:#3366CC;
min-width:150px;
}
#menu ul li a:hover > ul li a:hover {
background-color:#3399FF;
text-decoration:underline;
}
#menu ul li {position:relative;}
#menu ul li ul {
position:absolute;
top:30px;
left:0px;
}
</head>
<body>
<div id="menu">
<ul>
<li>Home</li>
<li>College
<ul>
<li>Faculties & Departments</li>
<li>Centres</li>
<li>College Facts</li>
<li>Awards</li>
</ul>
</li>
<li>Education
<ul>
<li>Pahrmacy Law Exam Review Course</li>
<li>Doctor Of Pharm Degree (Pharm. D.)</li>
<li>Graduate Programs</li>
<li>Online MS Programs</li>
</ul>
</li>
<li>Research
<ul>
<li>Medicina lChemistry</li>
<li>Doctor Of Pharm Degree (Pharm. D.)</li>
<li>Graduate Programs</li>
<li>Online MS Programs</li>
</ul>
</li>
<li>Faculty & Staff
<ul>
<li>Faculty Directory</li>
<li>Staff Dierctory</li>
</ul>
</li>
<li>News</li>
</ul>
</div>
</body>
Try something like this :
#menu ul li:hover > ul{
display: block;
}
Try to comment those line here :
#menu ul li ul {
position:absolute;
/*top:30px;*/
left:0px;
}
and :
#menu ul {
height:25px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
background-color:#8AD9FF;
border-radius:18px;
/*margin-top:10px;*/
margin-bottom:5px;
list-style:none;
}
Look at the following code
#menu ul li a:hover > ul {
float:none;
display:block;
}
The above code will display the child levels when they hover the anchor element. But in your code it is a sibling element not child element. So use next sibling element syntax like below.
#menu ul li a:hover + ul {
float:none;
display:block;
}
But after this you have to do so many things to works your menu better way. This will fix the hover display issue only.
DEMO
You can do this without JS or PHP. You have an extra a tag in most of your CSS. You shouldn't show the nested ul when someone hovers over the anchor, you should show it when someone hovers over the list item:
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: block;
}
Likewise, the above style hides the entire nested ul instead of each li, which is cumbersome. Show and hide only one thing: the containing element.
I would recommend some more organization to keep things straight.
instead of writing ul ul{}, it may help you to write ul li ul{}, at least until this code becomes natural to you.
You also have a lot of extra pseudo elements in there. For instance:
#menu ul li a:hover > ul li a:hover {
background-color:#3399FF;
text-decoration:underline;
}
doesn't need the pseudo element :hover on the first a tag (which would be on the li tag anyway). Since you can only see the second a tag on hover, it can have this style all of the time:
#menu ul li ul li a:hover {
background-color:#3399FF;
text-decoration:underline;
}
Related
I'm working on old Wordpress page created with myMag theme, and i after centering menu to fill whole menu space, i have troubles with drop down menu.
I'm new in CSS and maybe you could say where I did a mistake?
menu before:
menu after:
inspecting the drop down element shows this:
<ul class='children'>
<li class="page_item page-item-187">Progetti di formazione</li>
<li class="page_item page-item-183">Progetti di mobilità</li>
<li class="page_item page-item-185">Progetti pilota</li>
<li class="page_item page-item-168">Ricerche e studi</li>
</ul>
the css looks like this:
#navcontainer #navbar {
float:left;
height: 51px;
line-height:50px;
margin-left: -15px;
margin-top: 1px;
}
#navbar, #navbar ul {
margin:0;
padding:0;
width:900px;
list-style-type:none;
display: table;
position:relative;
line-height:50px;
z-index:5;
}
#navcontainer #navbar a {
height: 40px;
display:block;
padding:0 21px;
text-decoration:none;
text-align:center;
line-height:28px;
outline:none;
float: left;
z-index:35;
position:relative;
color: #FFF;
text-shadow:1px 1px 0 #515151;
font-weight: bold;
vertical-align: middle;
}
#navcontainer #navbar a:hover {
color: #CCC;
}
#navcontainer #navbar ul a {
line-height: 30px;
}
#navcontainer #navbar li {
z-index:20;
text-align: center;
display: table-cell;
font-size: 13px;
vertical-align: bottom;
}
#navcontainer #navbar li li {
border-left:none;
margin-top:0;
}
#navcontainer #navbar ul {
position:absolute;
display:none;
width:172px;
top:38px;
left:-1px;
background: #f5f5f5;
}
#navcontainer #navbar li ul a {
width:130px;
height:auto;
float:left;
text-align:left;
padding:0 21px;
color: #606060;
text-shadow: none;
}
#navcontainer #navbar ul ul {
top:auto;
}
#navcontainer #navbar li ul ul {
left:172px;
top: 0px;
}
#navcontainer #navbar li ul ul a {
border-left:1px solid #CCC;
}
#navcontainer #navbar ul {
border-top:none;
}
#navcontainer #navbar ul a, #navcontainer #navbar ul li {
background-color:#e7e7e7;
}
#navcontainer #navbar ul a:hover, #navcontainer #navbar ul a:focus {
color: #18649a;
}
#navcontainer #navbar li:hover ul ul, #navcontainer #navbar li:hover ul ul ul,#navcontainer #navbar li:hover ul ul ul ul {
display:none;
}
#navcontainer #navbar li:hover ul, #navcontainer #navbar li li:hover ul, #navcontainer #navbar li li li:hover ul, #navcontainer #navbar li li li li:hover ul {
display:block;
}
and php file that creates this menu looks like this:
<div id="navcontainer">
<div class="navigation">
<div class="wrapper">
<ul id="navbar">
<?php $exclude = $myOptions['pages_excl'];?>
<?php if(!$myOptions['pages_limit']) {
$limit = '10'; } else {
$limit = $myOptions['pages_limit'];
}
if($myOptions['pages_limit'] == '0') {
$limit = 0;
}
?>
<li>Home</li>
<?php wp_list_pages("exclude=$exclude&title_li=&depth=3&number=$limit");?>
</ul>
</div>
</div>
</div>
You will need to set
ul ul{
width: 100px;/*or whatever you want for the drop downs width*/
}
ul ul li {
display: block;
}
As there is a width set in just one UL of 900px you can overwrite to ensure constraint. Adding the display block to the LI's causes then to display on top of each other as they take full width of parent up.
I'm having serious issues with IE, I have a simple menu which shows correctly in Firefox and Chrome, but IE is a pain in the ass..
It seems that IE doesn't show the <li> tag properly, so my dropdown menu doesn't work in IE.
Can someone help me out?
This is my JsFiddle: http://jsfiddle.net/PE597/
This is the complete code for the menu, if you copy - paste this then you could see what I mean.
<style type="text/css">
#cssmenu{
border-bottom:1px solid #efefcf;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
color:8e8e8e;
width:1000px;
clear:both;
}
#cssmenu ul{
background:url(images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px 8px 0px 8px;
display: inline;
}
#cssmenu li a{
color:#000000;
*display:inline-block;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
display: inline;
}
#cssmenu li a:hover{
color:#000000;
text-decoration:none;
display: inline;
}
#cssmenu li ul{
background:#FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:175;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
display:block;
padding:0px;
width:225px;
}
#cssmenu li ul a{
display:block;
font-size:12px;
font-style:normal;
text-align:left;
width:200px;
}
#cssmenu li ul a:hover{
background:#f7cab9;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
width:125px;
float:left;
}
#cssmenu p{
}
#cssmenu .active > a{
background:url(images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
#cssmenu .active > a:hover {
color:#ffffff;
}
/** breadcrumb **/
ul.sf-menu, ul.sf-menu ul{display:block;margin:0;padding:0}
ul.sf-menu li{padding:0;list-style:none;margin:0;padding:0px 28px;float:left; display:inline;}
ul.sf-menu li.first{padding-left:0px}
ul.sf-menu a{font-size:12px;color:black;display:block;text-transform:uppercase}
ul.sf-menu ul{position:absolute;top:35px;width:170px;border:1px solid #626165;padding:10px 0px;background:white}
ul.sf-menu ul a{font-size:12px;text-transform:none;width:150px;padding:2px 10px}
ul.sf-menu ul li{padding:0px;display:block;position:relative;float:none;width:170px}
ul.sf-menu ul a:hover, ul.sf-menu ul li.sfHover a{background:#f7cab9}
ul.sf-menu ul ul{position:absolute;z-index:10;left:162px;top:5px}
ul.sf-menu ul li.sfHover ul a{background:none}
ul.sf-menu ul li.sfHover ul a:hover, ul.sf-menu ul li.sfHover ul li.sfHover a{background:#f7cab9}
</style>
<div id="cssmenu">
<?php
echo "<ul class='sf-menu'>
<li class='first'>
<a title='Dashboard' href='index.php?page=dashboard&user=".$_SESSION['username']."'>Dashboard</a>
<ul>
<li class=''>
<a title='Nieuwe call' href='index.php?page=new_call&user=".$_SESSION['username']."'>Nieuwe Call</a>
</li>
</ul>
</li>
<li class=''>
<a title='Contact' href='index.php?page=contact&user=".$_SESSION['username']."'>Contact</a>
</li>
<li class=''>
<a title='Uitloggen' href='index.php?action=logout&user=".$_SESSION['username']."'>Uitloggen</a>
</li>
</ul>";
?>
</div>
You needed to add <!DOCTYPE html> to the top of your file, because IE depends on a doctype to know which rendering engine to use.
I've a css menu, but this getting problem when I add more menu items.
What should I do to create a menu for unlimited menu items ?
my css
<style type="text/css">
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
#nav a:link, #nav a:active, #nav a:visited{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}
#nav a:hover{
background-color:#fff;
color:#333;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:1.5em;
display:none;
}
#nav li ul a{
width:12em;
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;
}
</style>
my sample menu for static items
<ul id="nav">
<li>1 HTML</li>
<li>2 CSS
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download
<!-- If I add this ul here then it doesn't follow the current css.
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
-->
</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
<li>3 Javascript
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
</ul>
(suppose,I want to show product menu where product categories will come from database. so its also required to use some php,mysql.just show me how should I design the css menu for the unknown number of category and subcategory)
-Thanks.
Before I ask my continue please keep in mind that I am only just getting back into web development and it has been almost 8 years since I have used HTML daily.
I am currently creating a website
I am using the CSS3 Drop Down Menu, I tweaked it a little bit to suit (colours, widths etc)
Here is the CSS code:
#cssmenu{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px; }
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); }
#cssmenu{border-color:#000;}
#cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#444;}
#cssmenu > ul > li > a:hover{background:#111;}
And here is the relevant header.php (I am using PHP includes) :
<div id='cssmenu'> <ul> <li class='active '><a href='index.php'><span>Home</span></a></li> <li><a href='about.php'><span>About</span></a></li> <li class='has-sub '><a href='#'><span>Services</span></a>
<ul>
<li><a href='resdemo.php'><span>Residential Demolition</span></a></li>
<li><a href='comdemo.php'><span>Commercial Demolition</span></a></li>
<li><a href='partdemo.php'><span>Partial Demolition</span></a></li>
<li><a href='excavate.php'><span>Excavation and Bobcat Jobs</span></a></li>
<li><a href='asbestos.php'><span>Asbestos Removal</span></a></li>
<li><a href='bins.php'><span>Bin Hire</span></a></li>
<li><a href='internal.php'><span>Internal Strip Outs</span></a></li>
<li><a href='concrete.php'><span>Concrete and Pavement Removal</span></a></li>
<li><a href='trees.php'><span>Vegetation and Tree Removal</span></a></li>
</ul> </li> <li><a href='/gallery/index.php' target='new'><span>Gallery</span></a></li> <li><a href='quote.php'><span>Free Quote</span></a></li> <li><a href='contact.php'><span>Contact</span></a></li> </ul> </div>
Any help will be greatly appreciated as this menu has been a common request lately. BTW I have tried using the online css validator tool but it didn't make a difference, just took away the menu gradients (visible in Chrome and Firefox only)
Thanks,
Angie.
Here is a cross browser compatible horizontal nav menu (w/ drop down subnav).
It doesn't have gradients though. For cross browser gradients, have a look at CSS3 PIE.
You can play w/ the gradients and then get the CSS and add it to your menu.
Basically I want the hover-look of a link stay active when you're on that site. I hope I'm explaining this right. There's supposed to be a background behind the link when you're visiting that specific page.
Here's the code for the html:
<div class="menudiv">
<div id="menu">
<ul id="menu">
<li><span>Hem</span></li>
<li><span>Om oss</span></li>
<li><span>Tjänster</span></li>
<li><span>Referenser</span></li>
<li><span> Kontakt</span></li>
</ul>
<div class="clr"></div>
</div>
</div>
And here's the css:
#menu { float:right; padding:23px 0 0 0; margin:0; width:420px; height:35px;}
#menu ul { text-align:right; padding:0; margin:0; list-style:none; border:0; height:35px;}
#menu ul li { float:left; margin:0; padding:0 5px; border:0; height:35px;}
#menu ul li a { float:left; margin:0; padding:10px 0; color:#5c8783; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
#menu ul li a span { padding:10px 13px; background:none;}
#menu ul li a:hover { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:hover span { background:url(images/l_menu.gif) left no-repeat;}
#menu ul li a:active { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:active span{ background:url(images/l_menu.gif) left no-repeat;}
Add a CSS class for the that link (eg, <a class="CurrentPage">), then apply the selector to that class (eg, #menu ul li a:active, a.CurrentPage)
As much I know the hover property should put last in CSS (below the active and others) in order to work properly.
you are giving same id :
<div id="menu">
<ul id="menu">
which is wrong
you should make ids different.
What you basically need is to add a css class to the a tag in your menu.
example:
<li><span>Hem</span></li>
add styling to your currenPage class as per the designs you want for that menu item
now, your page should be dynamic for you to be able to set the currenPage css class to the current menu item where the user is currently viewing
example:
<li><a href="?p=start" class="<?php if(/**check if the user is in this link/menu item**/) echo "currentPage"; ?>" ><span>Hem</span></a></li>