A menu system for an Inzu site is not working in IE 9. Between each li element a "branch" graphic is generated in CSS to separate the li elements with a gap an small connector.
In all other browser including IE 11 the menu works fine but in IE 9 the menu disappears when the mouse is over the gap, running the mouse over the connector graphic is fine.
This is the HTML:
<ul class="nav">
<li class="section_1"><a href='about.php?section=section_1&id=About'>About the BSCB</a>
<ul class="submenu">
<li><a href='page.php?section=section_1&id=266'>Structure and Governance</a></li>
<li><a href='page.php?section=section_1&id=265'>BSCB Membership</a></li>
</ul>
</li>
</ul>
And this is the CSS
.section_1{
background-color: #a30046;
}
.nav {
height: 47px;
font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
}
.nav li {
position: relative;
float: left;
margin: 0 0 0 6px;
width: 115px;
min-height: 39px;
}
.nav li:first-child {
margin-left: 0;
width: 117px;
}
.nav li a {
display: block;
width: 100%;
padding: 4px 6px;
color: #fff;
font-size: 1.2em;
line-height: 1.2em;
text-decoration: none;
}
.nav li .submenu {
display: none;
position: absolute;
top: 39px;
}
.nav li .submenu li {
width: 115px !important;
margin: 0;
padding: 6px 0 0 0;
min-height: 45px;
}
.nav li .submenu li a {
min-height: 39px;
}
.nav li .submenu li a:before {
position: absolute;
top: 0;
left: 50%;
margin-left: -3px;
content: "";
display: block;
width: 6px;
height: 6px;
background-color: inherit;
}
The connector is made with the last block, this can all be seen at http://www.bexleylscb.org.uk
By setting the background of the list elements with a transparent PNG the problem went away.
Related
So I've created menu on my website, but when I resize windows it is going into other divs in same line. I tried various things but I didn't had any luck. My nav for menu is in another div for header with 2 more divs, for left, and right. I also pasted CSS of those stuff down there, they have class .icons and .logo, and main holder with .menuHolder.
Code
#primary_nav_wrap {
margin: 0.85% 0% 0% 26%;
width: 60%;
padding: 10px;
position: absolute;
min-width: 772px;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul li:hover {
background: #ddd;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
.icons {
float: right;
margin-top: 1.3%;
margin-right: 1.57%;
position: apsolute;
min-width: 53px;
}
.logo {
float: left;
position: apsolute;
/* min-width */
}
.menuHolder {
background-color: #fff;
width: 100%;
text-align: center;
margin: 0px auto;
padding: 0;
border-style: solid;
border-color: #CC0000;
border-width: 1px 0px 2px 0px;
height: 83px;
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Index
</li>
<li>Blahblah
<ul>
<li>Blahblah2
</li>
<li>Blahblah3
</li>
<li>Blahblah4
</li>
</ul>
</li>
<li>Blahblah5
</li>
<li>Blahblah6
</li>
<li>Vaša pitanja i odgovori
<ul>
<li>Blahblah7
</li>
<li>Blahblah8
</li>
</ul>
</li>
<li>Blahblah9
</li>
<li>Blahblah10
</li>
<li>Blahblah11
</li>
</ul>
</nav>
if you want to adjust to the width of the window on window size change you have to use SASS, LESS and bootstarp. when you resize the window all that css needs to be rendered again so you would need to literally write a compiler for css and part of the bootstrap manually! therefore using bootstrap and media query would be easier and they are easy to learn.
It also adds value to you as a programmer.
Here's a nav I use on my web page. I set up a side bar to place my menu's in. It stays the same size whenever I resize my page. It might be a starting place for you.
nav {
position: fixed;
left: 0;
top: 0;
bottom: 0;
background: #E5E4E2;
width:275px;
padding: 10px;
}
I have the following code:
/**** DropDown Css ******/
.inner_menu ul#nav > li span {
display: inline-block;
height: 15px;
vertical-align: middle;
width: 20px;
background: url(../images/drp_arw_dwn.png) no-repeat center;
margin-left: 10px;
}
.inner_menu ul#nav > li:hover span {
background: url(../images/drp_arw.png) no-repeat center;
}
.inner_menu ul#nav > li:hover .subnav {
display: block;
}
.subnav {
position: absolute;
padding-top: 18px;
display: none;
left: 50%;
margin-left: -100px;
border-style: solid;
border-width: 5px;
border-color:#2c91da
}
.subnav ul {
background: #333;
width: 200px;
padding-top: 15px;
}
.subnav ul li {
display: block;
margin: 0;
padding: 0 0 0 20px;
}
.subnav ul li a {
color: #fff;
font-size: 18px;
padding-bottom: 5px;
}
.subnav ul li:hover a {
color: #2c91da;
display: block;
}
/****************** Nav Menu *****************/
.header .wrapper:after {
opacity: 0.5;
}
.dashboard_page {
position: relative;
background: #fff;
padding: 42px 0;
}
.dashboard_page .wrapper {
position: relative;
z-index: 9;
}
.dashboard_page:after {
left: 0;
top: 0;
width: 100%;
height: 370px;
position: absolute;
content: "";
background: #f7f8f9;
pointer-events: none;
}
.inner_menu {
margin: 7px 0 0 0;
padding: 0;
display: block;
}
.inner_menu ul#nav {
margin: 0;
padding: 0;
display: inline-block;
border-right: 1px solid #f2f2f2;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.3);
}
.inner_menu ul#nav > li {
margin: 0;
padding: 0;
height: 52px;
line-height: 52px;
display: block;
float: left;
border-left: 1px solid #f2f2f2;
position: relative;
}
.inner_menu ul#nav > li > a {
display: block;
color: #2f2f2f;
font-size: 18px;
font-family: 'Lato', sans-serif;
margin: 0;
padding: 0 27px;
border-style: solid;
border-width: 5px;
}
.inner_menu ul#nav > li:after {
position: absolute;
width: 38px;
left: 50%;
margin-left: -19px;
content: "";
background: url(../images/menu_arw.png) no-repeat;
height: 20px;
bottom: -35px;
z-index: 9;
display: none;
}
.inner_menu ul#nav > li:hover:after {
display: block;
}
.inner_menu ul#nav > li.active:after {
display: block;
}
<div class="inner_menu">
<div class="toggle"></div>
<ul id="nav">
<li>
Link 1
</li>
<li>
Trackers
<div class="subnav">
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2
</li>
</ul>
</div>
</li>
</ul>
</div>
The problem is that in internet explorer, when I try to move my cursor below the element to click on the dropdown, it disappears and I am unable to click it.
What am I doing wrong?
The problem was this CSS item:
.header .wrapper:after{ position:absolute; bottom:-33px; width:100%; height:34px; content:""; left:0; background:url(../images/shadow-bg.png) no-repeat center; background-size:100% auto; pointer-events:none}
The attribute bottom should be a higher negative number. -150px worked for me. I changed it to this:
.header .wrapper:after{ position:absolute;
bottom:-150px
; width:100%; height:34px; content:""; left:0; background:url(../images/shadow-bg.png) no-repeat center; background-size:100% auto; pointer-events:none}
Let's break it down:
You hover over '.inner_menu ul#nav > li:hover'
The 'display' is set to 'block' for '.subnav'.
You move your mouse until it moves outside of the actual link (The one that says "Trackers")
The selector '.inner_menu ul#nav > li:hover' no longer applies, since you are no longer hovering over the link.
The background is unset.
If you move the .subnav close to the link (No spaces!) it should work better.
Here is a link to a navigation bar that uses CSS only: http://www.cssnewbie.com/easy-css-dropdown-menus/
You might want to use JavaScript for more advanced functionality.
Some limitations for CSS:
No spaces, if you sub-menu is not RIGHT next to the link to it, it probably won't work (Or would at least be very hard to implement)
No advanced fading, clicking or other events, just hovering.
In my set up I have my navigation bar set horizontally and contained within my header div like this:
<div id="header-section">
<div id="main-menu-wrapper">
<ul id="main-menu">
<li>Home</li>
<li>Services
<ul id="sub-men">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
My problem is that the sub-menu is not showing because the height on "main-menu-wrapper" is set to auto. The sub-menu is showing when I set a height like 100px. When I set the position on the sub-menu to static instead of absolute, it expands the entire main-menu-wrapper. How can I get the sub-menu to show properly?
Here's the CSS portion for my whole header section:
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
background: #740600;
}
#main-menu-wrapper {
position: relative;
width: 74%;
min-width: 600px;
height: auto;
margin: 0% auto;
}
#main-menu {
list-style: none;
font-weight: bold;
line-height: 150%;
}
#main-menu li {
position: relative;
float: right;
margin: 0px 5px;
}
#main-menu a {
padding: 3px;
color: #ffffff;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu a:hover {
padding: 3px;
color: #740600;
background: #ffffff;
text-decoration: none;
}
#main-menu li ul {
position: absolute;
display: none;
}
#main-menu li ul li{
float: none;
}
#main-menu li:hover ul {
display: block;
}
#main-menu li ul a {
padding: 3px;
color: #ccc;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu li ul a:hover {
padding: 3px;
color: #740600;
background: #ccc;
text-decoration: none;
}
#banner-wrapper {
position: relative;
padding: 5px 0 5px;
}
#banner {
position: relative;
max-width: 75%;
min-width: 600px;
margin: 0% auto;
background: #ffffff;
}
#logo {
max-width: 600px;
height: auto;
}
I'm a little confused by what you're asking here, but I created a fiddle where your menu shows.
I deleted the styles for #main-menu-wrapper and I removed the background color on #header-section.
Hopefully this can be a decent starting point for you: http://jsfiddle.net/44vRN/
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
}
You could try to use absolute positioning on the submenu to remove it from the document flow.
currently, my add subject, drop subject, delete subject, manual crawl in the submenu is not centralised even though i have specified it to be text-align center in #menu li li a. The sub menu's executive summary is also cut off. May I know how can i expand the submenu and centralise all my text?
Thank you!
Here is my code (i am really sorry because i do not have a jsfiddle acct and is on the waiting list):
HTML
<div id="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >Executive Summary</a></li>
<li><a href="#" > Visual Analytics</a></li>
<li><a href="#" >Settings</a>
<ul>
<li>Add Subject</li>
<li>Delete Subject</li>
<li> Edit Subject</li>
<li><a href="#" >Manual Crawl</a></li>
<li><a href="#" >Executive Summary</a></li>
</ul>
</li>
</ul>
CSS
#menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background: #000;
text-align: center;
}
#menu ul {
position: relative;
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
#menu li {
position: relative;
float: left;
height: 100%;
padding: 0;
line-height: 35px;
}
#menu a {
position: relative;
height: 100%;
width: auto;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu ul ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);
}
#menu li:hover ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
}
#menu li li a{
height: 35px;
width: 100%;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu li li a:hover{
background: rgba(255,255,255,0.5);
}
#menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background: #000;
text-align: center;
}
#menu ul {
position: relative;
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
#menu li {
position: relative;
float: left;
height: 100%;
padding: 0;
line-height: 35px;
}
#menu a {
position: relative;
height: 100%;
width: auto;
float: left;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu ul ul {
display: none;
width: 11em; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);
}
#menu li:hover ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
}
#menu li li a{
height: 35px;
width: 100%;
float: left;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0 0px;
color: #fff;
text-align: center;
}
#menu li li a:hover{
background: rgba(255,255,255,0.5);
}
add styling
#menu li li a{
height: 35px;
width: 100%;
float: left;
text-decoration: none;
padding: 0 13px;
margin: 0 3px;
display: block;
color: #fff;
text-align: center;
}
Your <a> having only left padding but it has to be from both right-left or you could remove padding
Is there a particular way to make a <ul> a height? I have this structure:
<ul class="dropdown">
<li></li>
<li></li>
<li></li>
<li>
<ul id="sub_menu1"> // I have 4 of these
<li></li>
<li></li>
</ul>
</li>
</ul>
CSS:
ul.dropdown {
font-family: 'CapsuulaRegular', Arial, sans-serif;
position: relative;
padding: 0;
margin: 0;
z-index: 1;
}
ul.dropdown li a {
color: #b38201;
font-size: 18px;
}
ul.dropdown li {
display: block;
float: left;
color: #b38201;
font-weight: normal;
text-transform: uppercase;
padding: 38px 10px 12px 7px;
margin-left: 2px;
}
ul.dropdown a:hover {
color: #002565;
background-image: url(../images/menu-hover.png);
background-position: 50% 100%;
background-repeat: no-repeat;
}
.navSelected {
color: #002565;
background-image: url(../images/menu-hover.png);
background-position: 50% 100%;
padding:0;
margin:0;
background-repeat: no-repeat;
}
ul.dropdown a:active {
color: #ffa500;
}
ul.dropdown li a {
padding: 38px 7px 12px 7px;
}
ul.dropdown li:last-child a {
border-right: none;
}
/* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover {
color: black;
position: relative;
}
ul.dropdown li.hover a {
color: black;
}
/* LEVEL TWO */
#sub_menu1 {
width: 175px;
position: absolute;
left: -175px;
}
#sub_menu2 {
width: 175px;
position: absolute;
left: 0px;
}
#sub_menu3 {
width: 175px;
position: absolute;
left: 175px;
}
#sub_menu4 {
width: 175px;
position: absolute;
left: 200px;
}
ul.dropdown ul {
visibility: hidden;
position: relative;
top: 100%;
left: 0px;
font-size: 10px !important;
padding: 0;
margin: 0;
display: block;
}
ul.dropdown ul li {
background: #ccc;
}
ul.dropdown ul li {
font-weight: normal;
background: #f1f3f7;
color: #000;
/*border-bottom: 1px solid #ccc;*/
float: none;
padding: 10px;
margin: 0;
text-transform: none;
}
I having trouble making the <ul> that are hovered the same height. The go depending on what content is in them.
I want all the menus to be the same height, or within a wrapper of fixed height/width..
does this solve your question?
ul { height: 150px; }
if you apply this, all of your ul's will have the height of 150 pixels.
Edit
Well, you're using floating. Floating elements are ignored in the flow of the document. To overcome this problem you should add a overflow: hidden; to your ul.dropdown