I have created horizontal menu bar but on mouse hover it's not showing the submenu, it's working perfectly in Google Chrome but on Internet Explorer 11 it's not working.
Note
I am using Struts2 text property.
The Code:
#example {
width: 100%; /* Spans the width of the page */
height: 50px;
margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
.navbar li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #54879d;
border-right: 1px solid #1f5065;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {
background-color: #54879d;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
visibility: visible;
display: block;
}
.navbar li ul li {
background-color: #54879d;
}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {
background-color: red;
}
JSP Page
<div id="example">
<ul class="navbar">
<li><s:text name="Menu1"></s:text></li>
<li><s:text name="Menu2"></s:text>
<ul>
<li><s:text name="SubMenu1"></s:text></li>
<li><s:text name="SubMenu2"></s:text></li>
<li><s:text name="SubMenu3"></s:text></li>
</ul>
</li>
<li><s:text name="Menu3"></s:text></li>
</ul>
</div>
Is anything I left or I missed which is applicable on Internet Explorer 11?
I got the solution,issue is with IE compatability
I Have added
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
in HTML page and its start working!!
Related
I've been following this tutorial:
http://www.mrc-productivity.com/techblog/?p=1049
I want to make a single item in the navigation bar float to the right, but simply adding float:right; to that particular item didn't do anything. In fact, changing the float:left to float:right only reversed the ordering of the navigation bar items.
Here's a snippet:
#CHARSET "UTF-8";
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
.navbar li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
#navright {
float: right;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #54879d;
border-right: 1px solid #1f5065;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {
background-color: #54879d;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #54879d;
}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {
background-color: #366b82;
}
<body>
<div id="wrap">
<ul class="navbar">
<li>Home</li>
<li>Registers
<ul>
<li>People</li>
</ul>
</li>
<li>Operational</li>
<li>Financial</li>
<li>Reports</li>
<li id="navright"><a id="logout" href="/login">Logout</a></li>
</ul>
</div>
</body>
<li id="navright"><a id="logout" href="/login">Logout</a></li>
Just need to get that "Logout" button to be on the right.
Make the containing UL element have a width of 100%
.navbar {
height: 50px;
width: 100%;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
https://jsfiddle.net/txve55jn/2/
So I have a horizontal navigation bar on a page. I'm not very good (read: beginner) with code so I pieced it together from tips and tricks I found across the web. What I want to add is a code to make a vertical subsection create a another vertical subsection but next to it when hovered on. Here's what I have:
HTML:
<div id="wrap">
<ul class="navbar">
<li> Class Schedules
<ul>
<li> 2015
<li> 2015 Fall </li>
<li> 2015 Spring </li>
2014 ... etc
CSS:
#wrap {
width: 100%;
height: 50px;
margin: 0em;
z-index: 99;
position: fixed;
top: 0px;
background-color: #4d4d4d;
}
.navbar {
height: 50px;
padding: 0;
margin: auto;
position: absolute;
border-right: 1.5px solid #e68a00;
border-left: 1.5px solid #e68a00;
}
.navbar li {
height: auto;
width: 200px;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #4d4d4d;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #ffa11a;
border-right: 1px solid #e68a00;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {background-color: #999999;}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #4d4d4d;
}
.navbar li ul li a {
border-left: 1px solid #e68a00;
border-right: 1px solid #e68a00;
border-top: 1px solid #ffa11a;
border-bottom: 1px solid #e68a00;
}
.navbar li ul li a:hover {background-color: #999999;}
}
With what I have, when mousing over "class schedules", a drop down containing "2015", "fall 2015", "spring 2015" appears. What I want it to do I drop down to just "2015" and when you mouse on 2015, it pops over and down to "fall 2015" and "spring 2015". I've messed with the CSS trying to have ".navbar li ul li" etc be hidden until hover but I can't get it to work. I'm not sure what I need to change/add to make this happen.
The trick is this:
.navbar li:hover > ul {display: block;}
because .navbar is a class selector not an element selector.
I'm having some trouble with CSS (to which I am fairly new) - hoping someone can give some advice after my various internet searches have proven fruitless.
My problem is that I have CSS Menu and I have recently changed the width of the main menu element but am stuggling to resize the drop-down child elements to reflect this new size - the sub-menu items are now also appearing next to each other rather than beneath each other.
Any help is appreciated!
JSFiddle: https://jsfiddle.net/anwwgyu8/
CSS:
#wrap2 {
width: 70%;
height: 75px;
margin: 0;
position: absolute;
top: 2190px;
background-color: #2A79BF;
left: 15%;
}
.buttonbar1 {
height: 75px;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #2A79BF;
left: 0%;
width: 100%;
}
.buttonbar1 li {
height: 75px;
width: 25%;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #2A79BF;
}
.buttonbar1 a {
padding: 25px 0;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
text-decoration: none;
color: white;
height: 25px;
display: block;
}
.buttonbar1 a:hover {
color: #E0F0FFC
}
.buttonbar1 li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.buttonbar1 li:hover ul {
display: block;
color: #E0F0FF
}
.buttonbar1 li ul li {
background-color: #2A79BF;
color: #E0F0FF
}
.buttonbar1 li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.buttonbar1 li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.buttonbar1 li ul li a:hover {
background-color: #2A79BF;
color: #E0F0FF
}
Float is inherited on submenu items. You should clear your float for submenu:
.buttonbar1 li ul li {
/* ... */
float: none;
width: 100%;
}
https://jsfiddle.net/anwwgyu8/11/
Your float and width properities are being carried down to your sub menu list items. Add the following CSS:
.buttonbar1 li ul li {
display:block;
float:none;
width:100%;
}
.buttonbar1 li ul li{
width:100%;
}
Fiddle: https://jsfiddle.net/anwwgyu8/6/
I have borders on the left and right sides of some items in a list, but I'm getting these white gaps that I don't want, but it's only on the right side which is weird and I haven't been able to figure out what I'm doing wrong.
Any help would be great.
The code:
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
position: relative;
line-height: 21px;
width: 150px;
border: 1px solid white;
background: white;
}
ul li:hover {
border: 1px solid black;
}
ul li:hover ul.dropdown {
display: block;
}
ul li:hover li {
border-left: 1px solid black;
border-right: 1px solid black;
}
ul li:hover li.top {
border-top: 1px solid black;
}
ul li:hover li.bottom {
border-bottom: 1px solid black;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
font-size: 14px;
width: 150px;
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: -1px;
}
<ul style="font-size: 16px; width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: 4px;">
<li><u>Products</u>
<ul class="dropdown">
<li class="top">Apples
</li>
<li>Cans
</li>
<li>Bowls
</li>
<li class="bottom">Cups
</li>
</ul>
</li>
</ul>
The style in ul li
border: 1px solid white;
is causing extra white lines to be drawn
Remove it and you should be good
I have this css for my horizontal menu:
when you hover over the links and a sub menu appears, it shows the sub menu but the page content below moves down slightly.
any ideas?
fiddle here: http://jsfiddle.net/XwDTt/1/
nav {
margin: 0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
}
nav ul li {
float: left;
margin: 0;
padding: 0;
}
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
change this:
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
into this :
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position:relative;
top:-1px;
}
i think this one is the simplest
nav {
margin: 0 auto;
text-align: center;
height:30px; /* add height to your nav tag */
}
There are two points here:
When you add a border to an element, it often increases the height of the element. You could use a transparent border by default.
Instead of setting a margin property on anchor tags, you could use the property on the sub-menu list-items, which are positioned absolute and doesn't affect the document normal flow.
Use the following:
nav ul li:hover a {
color: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li:hover li {
margin-top: 5px; /* <-- add margin to sub-menu items */
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
border-top: 1px solid transparent; /* <-- Set a transparent border */
border-bottom: 1px solid transparent; /* <-- Set a transparent border */
}
JSFiddle Demo
You are adding border on hover. You should have transparent borders by default...
And margin too.
nav ul li a {
display: block;
margin-bottom:5px;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}
http://jsfiddle.net/XwDTt/3/
Or you can just set the height of li elements:
nav ul li {
float: left;
margin: 0;
padding: 0;
height:30px;
}
Solution 1:
nav ul li:hover a {
color: #000000;
/*margin-bottom:5px comment these
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;*/
}
Solution 2:
nav ul li:hover a {
color: #000000;
/*margin-bottom:5px comment this line only */
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;;
}
and add this line:
nav ul li a {
margin-bottom:5px;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}