I have a website with a css drop menu, which works fine on chrome and firefox, but in IE the drop menu doesn't display.... it's almost like it doesn't exist at all...
I've tried multiple times to copy some code or menus from other sites i have that do work in IE, but without success.
Here's the html...
<ul id="menu">
<li>INTRO |</li>
<li>HOME |</li>
<li>ACCOMMODATION & RATES |</li>
<li>INFO |</li>
<li>ACTIVITIES |
<ul class="sub-menu">
<li>GARDEN ROUTE ACTIVITIES</li>
</ul>
</li>
<li>GOLF |</li>
<li>NEWS |</li>
<li>CONTACT US |</li>
<li>DIRECTIONS |</li>
<li>GALLERY</li>
</ul>
the CSS
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
padding:0px 0 0px 0;
margin: 0px;
/*background-color:#9A844C;*/
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
display:inline;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #573A2F;
padding: 0px;
display:inline-block;
font-size:10px;
}
ul#menu li a:hover {
text-decoration: none;
color: #000;
padding: 0px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
padding-bottom:5px;
z-index:100001;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 20px;
left: 0;
width: 200px;
background-color:#E2D9C6;
z-index:100001;
}
ul#menu li:hover ul.sub-menu {
display:block;
z-index:100001;
}
ul#menu li ul.sub-menu:hover {
display:block;
color: #573A2F;
z-index:100001;
}
Any help would be greatly appreciated...
I have checked with your code and it is working in my system. I have checked in IE7,8 and 9.
Another suggestion just change below css and check again:
I have just changed from "ul#menu li ul.sub-menu:hover" to "ul#menu li:hover ul.sub-menu"
ul#menu li:hover ul.sub-menu {
display:block;
color: #573A2F;
z-index:100001;
}
As others have stated, your code works with IE7, IE8 and IE9.
If the issue is really with IE6, I am not going to solve your current problem, because of the following line:
It is not worth it
And with this i don't mean that YOUR WORK is not worth it, but that nobody should still develop for IE6. It's a 10 years old browser, which should be put to sleep as soon as possible. And it's not just my opinion, but Microsoft's! see HERE and notice the Microsoft copyright at page footer.
Also, see HERE for browser usage statistics: IE6 is used by just 0.6% of internet users. Is your time worth it?
Related
Good day! I'm having a problem doing a responsive navigation bar coming from HTML, PHP, and CSS only. (No DIVS/Navbar) As you can see below in the OUTPUT image. WHen I used a mobile phone or resize my browser into smaller one. It will output my values like in the OUTPUT image. What I want is to when I use mobile or just make my browser smaller. There will be a button containing all the values and hwen its clicked. it will breakdown all my values like this. This is an example of my desired output. Please see my desired output
Here's my CSS
ul {
list-style: none;
padding: 0;
margin: 0;
background: #f8f8f8;
}
ul li {
display: block;
position: relative;
float: left;
background: #f8f8f8;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #000000;
}
ul li a:hover { background: #e4e3e3; }
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
}
li:hover li { float: none; }
li:hover a { background: #f8f8f8; }
li:hover li a:hover { background: #e4e3e3; }
.main-navigation li ul li {
color: black;
position: relative !important;
z-index: 9999 !important;
border-top: 0; }
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
left: 100%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
Here's my HTML, PHP Code:
<?php
function get_menu_tree($parentID)
{
global $con;
$menu = "";
$sqlquery = " SELECT * FROM category where parentID='" .$parentID . "' ";
$res=mysqli_query($con,$sqlquery);
while($row=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
$menu .="<li><a href='base?page=post&categoryID=".$row['categoryID']."'>".$row['name']."</a>";
$menu .= "<ul>".get_menu_tree($row['categoryID'])."</ul>"; //call recursively
$menu .= "</li>";
}
return $menu;
}
?>
Here's how I call the function from my HTML code:
<div class="container">
<ul class="main-navigation">
<?php echo get_menu_tree(0); ?>
</ul>
</div>
</div>
This my DATABASE structure
This is my OUTPUT out of the following codes
I think the issue is that on desktop you are relying on the :hover to reveal the dropdown. For mobile there is no hover state and so you would need to either use JavaScript (or styled form checkboxes to simulate it with html/css) that would make it a tap to reveal sub items.
This would also mean that you would not be able to click through to the top level item on dropdowns as that would expand the dropdown rather than be a link. The work around could be to make a dropdown chevron on the right that would be it's own button to reveal the sub menu on mobile and the text still link through. This is the solution I used on https://www.firetechcamp.com/
Unfortunately, without adding at least some javascript, this is the closest i could get to a pure css / html solution:
try resizing the browser to see the responsive solution
ul {
list-style: none;
padding: 0;
margin: 0;
background: #f8f8f8;
font-family: Tahoma, Arial;
}
ul li {
display: block;
position: relative;
float: left;
background: #f8f8f8;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #000000;
}
ul li a:hover { background: #e4e3e3; }
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
}
#media( max-width: 600px ){
ul li{
float:none;
transition: all 0.3s ease forwards;
}
ul li a{
color: white;
}
ul>li:first-child{
background: #4caf50;
padding-right: 20px;
position: relative;
}
ul:hover li{
opacity: 1 !important;
position: relative !important;
z-index: 1 !important
}
ul>li:first-child:after{
content:"☰";
position: absolute;
top:0;
height: 100%;
right: 0;
margin: 0;
color: white;
background: #555555;
width: 50px;
font-size: 30px;
text-align: center;
line-height: 50px;
cursor: red;
}
ul>li:not(:first-child){
position: fixed;
z-index: -1;
background: #333333;
opacity: 0;
}
}
<ul>
<li>Home</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
This question already has answers here:
When coding HTML, browser doesn't always detect changes
(6 answers)
Stylesheet not updating when I refresh my site
(16 answers)
Closed 5 years ago.
I'm not sure if this may be due to php/wordpress but I've got a nav bar that I just realised when you click the link it stays underlined until you hover it again? Seems strange to me I've never had this happen and can't quite work out why..
<nav>
<ul>
<li><img src=" " height="10%" width="10%"/>Link 1</li>
<li><img src=" " height="10%" width="10%"/><a href="#">Link 2</li>
<li><img src="" height="10%" width="10%"/><a href="#">Link 3</li>
</ul>
</nav>
scss..
nav {
margin: 0px;
background-color: $nav_bgcolor;
box-shadow: $nav_shadow;
ul {
color: #979797;
padding: 0px;
display: table;
width: 100%;
padding: 15px;
margin: 0px;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
width: 30%;
}
ul li a {
color: $font_color;
}
ul li a:hover {
cursor: pointer;
color: $hover;
}
a, a:visited, a:active, a:visited, a:focus, a:hover {
text-decoration: none !important;
}
}
change your " ul li a" , to this:
nav ul li a {
color: $font_color;
text-decoration: none;
}
You Need some HTML Fixes.
You have used anchor tag inside anchor tag.
HTML
<nav>
<ul>
<li>
<a href="#">
<img src="" height="10%" width="10%"/>Link 1
</a>
</li>
<li>
<a href="#">
<img src="" height="10%" width="10%"/>Link 2
</a>
</li>
<li>
<a href="#">
<img src="" height="10%" width="10%"/>Link 3
</a>
</li>
</ul>
</nav>
CSS
/*Random colors use your colors here*/
$nav_bgcolor:red;
$nav_shadow:black;
$font-color:white;
$hover:green;
/*Random colors use your colors here*/
nav {
margin: 0px;
background-color: $nav_bgcolor;
box-shadow: $nav_shadow;
ul {
color: #979797;
padding: 0px;
display: table;
width: 100%;
padding: 15px;
margin: 0px;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
width: 30%;
}
ul li a {
color: $font_color;
text-decoration:none;
}
ul li a:hover {
cursor: pointer;
color: $hover;
}
a, a:visited, a:active, a:visited, a:focus, a:hover {
text-decoration: none !important;
}
}
My code above was actually correct in fixing the problem I had. The problem was happening as it wasn't updating any of my code as the browser had cached the site.
Thanks everyone for your help
NOTE: Delete browser history!!
Disclaimer: I am sorry the post looks too big but I just thought I should provide all the details. I am sure the issue is something very stupid but I am not able to figure out :(
Background: I am creating a wordpress site using an awesome theme called Parallax from Access Press. I wanted to play out my business website before buying the pro version so decided to make a few changes myself.
Problem: You can either use the theme's menu (which allows animation and same page scroll; This Golum wantses) or use native wordpress menus (which does not allow scrolling; Golum hateses).
Workaround Tried: I figured I can go into the header.php and add one menu item manually. So following is the code per my understanding:
<nav id="site-navigation" class="main-navigation">
<div class="menu-toggle"><?php _e( 'Menu', 'accesspress_parallax' ); ?></div>
<?php
$sections = of_get_option('parallax_section');
if(of_get_option('enable_parallax') == 1 && of_get_option('enable_parallax_nav') == 1):
?>
<ul class="nav single-page-nav">
<?php
$home_text = of_get_option('home_text');
if(of_get_option('show_slider')== "yes" && !empty($home_text)) : ?>
<li class="current"><?php echo esc_attr($home_text); ?></li>
<?php endif;
if(!empty($sections)):
foreach ($sections as $single_sections):
if($single_sections['layout'] != "action_template" && $single_sections['layout'] != "blank_template" && $single_sections['layout'] != "googlemap_template" && !empty($single_sections['page'])) :
$title = get_the_title($single_sections['page']); ?>
<li><?php echo $title; ?></li>
<?php
endif;
endforeach;
endif; ?>
<li>Pre-order Here</li>
</ul>
<?php
else:
<some more code that picks custom menu if you choose to skip parallax menu>
</nav>
The first LI item just puts the text 'Home' in the page. Second one picks all the values from parallax menu. The Last LI item is the one I have included.
<li>Pre-order Here</li>
Behavior: This perfectly adds the item to the menu and also appears to be clickable. The problem is - when it is clicked, it does nothing. If I right click it and open in a new tab, it works perfectly fine. Including related CSS below for your reference
Edit: If I include a link to another section of the page. it works. Example: http://domain.com/#section-20
.main-navigation {
float: right;
max-width: 80%;
margin-top: 15px;
}
.logo-top .main-navigation{
float: none;
width: auto;
text-align: center;
max-width: none;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
display: inline-block;
}
.main-navigation ul li{
position: relative;
}
.main-navigation > ul > li {
float: left;
position: relative;
font-family: 'Oxygen', sans-serif;
font-weight: 400;
}
.main-navigation > ul > li > a{
text-transform: uppercase;
font-size:14px;
padding: 5px 15px;
}
.main-navigation > ul > li.current a{
color: #E66432;
}
.main-navigation a {
display: block;
text-decoration: none;
color:#333;
}
.main-navigation ul ul {
background: #FFF;
position: absolute;
top: 100%;
left:0;
z-index: 99999;
padding:0 10px;
font-size: 15px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
display: none;
}
.main-navigation ul ul ul {
left: 100%;
top: 0;
}
.main-navigation ul ul a {
min-width: 200px;
}
.main-navigation ul ul li {
border-bottom: 1px solid #EEE;
padding: 8px 0;
}
.main-navigation ul ul li:last-child{
border:none;
}
.main-navigation li:hover > a {
color: #E66432;
}
.main-navigation ul li:hover > ul {
display: block;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a {
color: #E66432;
Thanks #pschueller and #dingo_d!!
You pushed me into the correct direction. The github to the JS plugin for scroll has the secret sauce.
I had to add a class='external' to my tag with the href and update the jquery.nav.js with the following:
Replaced
filter: '',
with
filter: ':not(.external)',
I've ran into a problem using a custom WordPress menu that I can't seem to solve, so after doing a lot of searching the web & failing to fix this over the past few days, I've decided to see if anybody here on StackOverflow can help.
Please note: I would use a Walker function for this but I'm too far gone with the code right now and the way the design works I'm having to build the menu this way.
My snippet for my dropdown: http://pastebin.com/8Stfs90c (would post but it would crucify the screen).
I’m having trouble with the 3rd level of my dropdown menu. In this image: http://s13.postimg.org/lxhslt0lz/image.png you can see that there’s a <li></li> that I’ve highlighted (Pages, About Me, About Us). The structure is as follows
Pages (Parent)
About Me (Parent: Pages)
About Us (Parent: About Me)
And these are fine, BUT when it goes to the third dropdown, it cuts of the <li> and leaves the rest of the Pages children and puts them into a separate container and not the <li> for Pages.
So it should work like so:
Pages (Parent)
About Me (Parent: Pages)
About Us (Parent: About Me)
Right Sidebar (Parent: Pages)
Left Sidebar (Parent: Pages)
Our Process (Parent: Pages)
And all though it may look like this on the dropdown (visually), as you can see in the code it isn’t represented by this. I think the problem I’m having is the checks I’m doing for closing the </li> is wrong. I’ve had this problem for a few days and I just can't seem to fix it. I was going to post this on the WordPress based forum but it's more of a PHP error than anything else.
Here’s a quick screenshot of me hovering over the elements that should be in Pages: http://s23.postimg.org/ef4ame6m3/image.png - as you see they’re separated from the <li>.
To replicate this what I've done is just created a menu structure in WordPress and used the code that's in the snippet (basically I just pasted it into the index.php file) to show how it's being represented.
I really hope somebody can help with this as it has been driving me mad and put a holt on my project for the past few days.
Apologies for the links above, I would post them directly in (screenshots & code) but I didn't want to take away from the actual problem.
If somebody does manage to provide me with the solution I'd be more than happy to buy you a virtual coffee or two!
Out of curiosity, I could be missing the point, is there a reason why would not want to use wp_nav_menu() to handle all of this?
Ex below would output the correct structure for you to theme as your screenshot if applied in your context?
wp_nav_menu( array( 'container' => 'nav', 'container_class' => 'your-class', 'fallback_cb' => 'wp_page_menu', 'theme_location' => 'primary-menu' ) );
Thanks.
Had a quick look at the code, I suppose line 100-130 are dealing with the third dropdown. Actually whats happening is you already have an ol on line 105, then its again being called through the loop on line 122.
echo "<ol><li><a href='" . $link . "'>" . $t->title . "</a></li></ol>";
I think the problem is on line 128 you have to remove ol from the end and create a new condition just for this.
Sorry if i am not being of any help but its really hard to picture the whole code in mind without seeing it. If you are really stuck send the ftp details in chat and i can have a look.
Hi There try this css code to create multiple Nested menu create.
WP code for menu in header.php
<nav class="photoshoot-menu">
<?php wp_nav_menu(array('theme_location' => 'primary','container' => ' ')); ?>
</nav>
CSS Code Add in your style.
.photoshoot-menu {
float: right;
width: auto;
padding-left: 0px;
padding-right: 0px;
}
.photoshoot-menu ul {
padding-left: 0px;
margin: 0px;
}
.photoshoot-menu > ul li {
display: inline-block;
position: relative;
text-transform: uppercase;
margin: 3px 2px;
position: relative;
}
.photoshoot-menu > ul > li > a {
color: #212121;
display: inline-block;
padding: 8px 20px;
border: 1px solid #4f4f4f;
border-radius: 4px;
}
.photoshoot-menu > ul > li > a:hover,
.photoshoot-menu > ul > li > a:focus,
.photoshoot-menu > ul > li.current_page_item > a {
background-color: #343434;
color: #f45c06;
}
.photoshoot-menu ul ul {
border-radius: 4px;
border: 1px solid #4f4f4f;
background-color: rgba(38, 38, 38, 0.95);
opacity: 0;
position: absolute;
top: 42px;
width: 100%;
min-width: 170px;
z-index: 1;
visibility: hidden;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.photoshoot-menu ul li:hover > ul {
opacity: 1;
visibility: visible;
}
.photoshoot-menu ul ul li {
width: 100%;
}
.photoshoot-menu ul ul li a {
display: inline-block;
line-height: 16px;
padding: 5px;
color: #FFF;
width: 100%;
}
.photoshoot-menu ul ul li a:hover,
.photoshoot-menu ul ul li a:focus {
color: #f45c06;
}
.photoshoot-menu ul ul ul {
left: 99%;
top: 0px;
}
<nav class="photoshoot-menu">
<ul class="menu" id="menu-all-pages">
<li>Home
</li>
<li>Level 1
<ul>
<li>Level 2
<ul>
<li>Level 3
<ul>
<li>Lorem Ipsum
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Sample Page
</li>
</ul>
</nav>
I am creating a menu bar with rollovers, when i roll over the option the background and text colour change but when i move my mouse down to the sub menu that appeared with hovering on the menu the text colour changes back but the background stays.
This is my HTML for the menu bar:
<div id="menuBar">
<div id="nav">
<div id="nav_wrapper">
<ul>
<li class="bar">Home
</li>
<li class="bar"> Services
</li>
<li class="bar"> Sales →
<ul>
<li class="bar">dropdown #1 item #1
</li>
<li class="bar">dropdown #1 item #2
</li>
<li class="bar">dropdown #1 item #3
</li>
</ul>
</li>
<li class="bar"> Repairs →
<ul>
<li class="bar">Bar
</li>
<li class="bar">Kitchen
</li>
<li class="bar">dropdown #2 item #3
</li>
</ul>
</li>
<li class="bar"> Installations
</li>
<li class="bar"> Contact Us
</li>
</ul>
</div>
<!-- Nav wrapper end -->
And the CSS that im using:
#menuBar {
background:#FF0;
box-shadow:5px 5px 2px #888888;
position:absolute;
height:55px;
width:1000px;
left:0;
right:0;
margin:auto;
top:253px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
behavior: url(/css/border-radius.htc);
z-index:5;
}
#nav {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 21px;
left:0;
right:0;
margin:auto;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: center;
}
#nav a {
color:#0000FF;
}
#nav a:hover {
color:#FF0;
}
#nav a:active {
color:#FF0;
}
#nav a::focus {
color:#FF0;
}
#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: #00F;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
color:#FF0;
border-radius: 10px;
behavior: url(/CSS/border-radius.htc);
}
#nav ul li a, visited {
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
color:#FF0;
border-radius: 15px;
behavior: url(/CSS/border-radius.htc);
}
#nav ul ul {
display: none;
position: absolute;
background-color: #FFFF00;
border: 3px solid #00F;
border-top: 1;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color:#FF0;
}
.bar {
color:#FF0;
}
Im sure that im missing something simple but i cant find it at all.
Help!
Building on what Niet the Dark Absol said:
you would need to add styles (notice the > - this selects ONLY direct children, works with IE8+ and elsewhere)
#nav ul li:hover > a {
color: #ff0;
}
and you can probably remove this because it would be redundant:
#nav ul ul li a:hover {
color:#FF0;
}
You are applying the color change to a:hover, but the background-color change to li:hover.
Both must be on the li:hover to work. You may need to add color:inherit to the a elements within the menu to ensure natural link colours don't override the setting.