I have a CSS drop down menu built, that is working perfectly of course in Firefox and Chrome. But on Internet explorer 7 and 8, the drop down is moved to the right making it impossible to click the links.
I made a jsFiddle here :
http://jsfiddle.net/xMrPE/
And a screenshot of it under ie7 here :
http://s16.postimg.org/g90wthb2t/image.png
here is the HTML :
<div class="menu">
<ul>
<li>
La meunerie française
<ul>
<li style="margin-left:0;">Conseil d'administration</li>
<li style="margin-left:0;">Syndicats régionaux</li>
<li style="margin-left:0;">L'équipe</li>
</ul>
</li>
<li>
La filière
<ul>
<li style="margin-left:0;">Entités techniques de la meunerie</li>
<li style="margin-left:0;">Meunerie européenne</li>
<li style="margin-left:0;">Meunerie hors UE</li>
<li style="margin-left:0;">Organisations professionnelles</li>
<li style="margin-left:0;">Intercéréales</li>
<li style="margin-left:0;">FranceAgriMer</li>
</ul>
</li>
<li>
Les Moulins
<ul>
<li style="margin-left:0;">Régions meunières</li>
<li style="margin-left:0;">Régions administratives</li>
<li style="margin-left:0;">Farines & produits commercialisés</li>
<li style="margin-left:0;">Groupements meuniers</li>
</ul>
</li>
<li>
Fournisseurs
<ul>
<li style="margin-left:0;">Rubrique</li>
<li style="margin-left:0;">Liste Alphabétique</li>
</ul>
</li>
</ul>
</div>
The CSS :
.menu {
width:100%;
height:55px;
float:left;
position:relative;
z-index: 1000;
background-color: #5c4a29;
}
.menu ul {
list-style: none;
padding-top:7px;
font-size: 11px;
}
.menu ul li {
float:left;
margin-left:55px;
}
.menu ul li a {
color:#ffffff;
padding-bottom:25px;
}
.menu ul li a:hover, .menu ul li a.actif, .menu ul li:hover > a{
color:#DDD3AA;
}
.menu ul ul {
display:none;
}
.menu ul li:hover > ul {
display: block;
position:absolute;
z-index: 10000;
width:210px;
padding-bottom:20px;
top:55px;
-webkit-border-radius: 0px 10px 0px 10px;
border-radius: 0px 10px 0px 10px;
background-color: #5c4a29;
}
.menu ul ul li {
width:190px;
padding-left:10px;
float: left;
margin-top:10px;
}
.sidebar {
width:225px;
min-height:400px;
float:left;
position:relative;
}
I really can't see why it isn't working correctly.
Any help would be much appreciated. Thanks in advance !
Sébastien
For one on line 37 in your css I would change top from 55 to 45 so you can actually select the links. Also on line 1 change your height to 45.
.menu ul li:hover > ul {
display: block;
position:absolute;
z-index: 10000;
width:210px;
padding-bottom:20px;
top:45px;
-webkit-border-radius: 0px 10px 0px 10px;
border-radius: 0px 10px 0px 10px;
background-color: #5c4a29;
}
.menu {
width:100%;
height:55px;
float:left;
position:relative;
z-index: 1000;
background-color: #5c4a29;
}
Related
I have a nice drop down menu in a nav bar. I want to add a second level to it so the second-level menu options pop out to the right from the current drop down options. I found the code for this online a long time ago, forget where.. I don't have enough CSS experience to work it out.
The HTML code - only showing one menu for brevity:
<table border=0 align=center width=900>
<tr>
<td>
<header class="site-header-wrap">
</header>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix menu">
<!-- NETWORK -->
<li>NETWORK<span class="arrow">▼</span>
<ul class="sub-menu">
<li>BY CLIENT</li>
<li>BY FIREWALL</li>
<li>BY SWITCH</li>
<li>BY ROUTER</li>
<li>ROUTER INTERFACES</li>
</ul>
</li>
</ul>
</nav>
</div>
</td>
</tr>
</table>
the CSS code:
.clearfix:after {
display:block;
clear:both;
content:'';
}
a, a:visited, a:active
{
font-family: arial, verdana;
color: #003333;
font-size: 11px;
text-decoration: underline;
}
a:hover
{
#color: #666666;
color: #534F85;
text-decoration: underline;
}
/*This is for the color of nav panel */
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:1px 1px 3px rgba(0,0,0,0.2);
background:#282467;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #7E2F86, #282467, #B2377E, #282467, #282467, #B2377E, #282467, #7E2F86, rgba(0, 0, 0, 0));
}
.menu {
width:900px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
/*----- font-family:'Ek Mukta'; -----*/
}
.menu a {
transition:all linear 0.15s;
color:#ffffff;
text-decoration:none;
font-weight:bold;
}
/*This is for the hover text color in the nav panel */
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#A9A7C2;
font-weight:bold;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:12px;
text-decoration:none;
font-family:trebuchet ms,arial,helvetica,sans-serif;
font-weight:bold;
white-space: nowrap;
}
.menu > ul > li > a {
padding:20px 11px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#3D3976;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:190%;
padding:2px 6px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#534F85;
}
.sub-menu li {
display:block;
font-size:14px;
}
.sub-menu li a {
padding:3px 15px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#282467;
}
So for instance, I want to add 2 submenus under the FIREWALL option for types of firewalls, cisco and paloalto. I tried this:
<li>BY FIREWALL
<ul>
<li>CISCO</li>
<li>PALOALTO</li>
<ul>
<li>
of course it doesn't work. Do I need another class, say something like second-level-menu ? and if so, what does that look like?
For Example:
In CSS:
a {
color: #FFF;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: relative;
top:-60px;
left:170px;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
In Html:
<nav>
<ul>
<li>What is it?</li>
<li>
Inventory
<ul>
<li>
X-box 360
<ul>
<li>Building Blocks</li>
<li>Decorations</li>
<li>Redstone & Transportation</li>
<li>Materials</li>
<li>Food</li>
<li>Tools, Weapons & Armor</li>
<li>Brewing</li>
<li>Miscellaneous</li>
</ul>
</li>
<li>
PC
<ul>
<li>Building Blocks</li>
<li>Decoration Blocks</li>
<li>Redstone</li>
<li>Transportation</li>
<li>Miscellaneous</li>
<li>Foodstuff</li>
<li>Tools</li>
<li>Combat</li>
<li>Brewing</li>
<li>Materials</li>
</ul>
</li>
<li>
Mobile
<ul>
<li>Materials</li>
<li>Tools & Weapons</li>
<li>Decoration Blocks</li>
<li>Building Blocks</li>
</ul>
</li>
<li>
PS4
<ul>
<li>Building Blocks</li>
<li>Decorations</li>
<li>Redstone & Transportation</li>
<li>Materials</li>
<li>Food</li>
<li>Tools, Weapons & Armor</li>
<li>Brewing</li>
<li>Miscellaneous</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
Can anyone tell me why this nav renders as it should do in everything but IE9 and how i can work around this.
The project needs to be IE9 compatible.
This works fine in IE11
Here is my code. Thanks.
HTML
<li> Tills
<ul>
<li>Base Unit</li>
<li>Card Reader
<ul id="secondMenu" onclick="navClick()">
<li>Not Reading Cards</li>
<ul></li>
</ul></li></ul>
<li>Cash Drawer</li>
<li>Customer Display</li>
<li>Reciept Printer
<ul id="secondMenu" onclick="navClick()">
<li> Printing with blank areas </li>
<ul></li>
</ul></li></ul>
<li>Scanner
<li>Touchscreen
<ul id="secondMenu" onclick="navClick()">
<li>Black or faint pictiure</li>
<li>Distorted or fuzzy display</li>
</ul>
</li>
</ul>
</li>
<li> Self Check Out</li>
<li> Controller</li>
<li> Photo</li>
<li> iPads
<ul id="secondMenu" onclick="navClick()">
<li> Not connecting to BUK Corporate </li>
<ul></li>
</ul></li></ul>
<li> Handhelds</li>
<li> Personal Computing</li>
<li> Printing</li>
<li> Password Resets</li>
<li> Other</li>
</ul>
</nav>
Here is the CSS
nav {
display:block;
margin:8px 0px 10px 0px;
padding:0;
border-radius:10px;
text-align:center;
width:15.6%;
font-weight: 4000;
float:left;
z-index:999;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul{
list-style:none;
background:#5e6ea6;
}
nav ul li {
position:relative;
text-align:center;
border:4px solid #2f4389;
color:#FFF;
z-index:98;
font-size: 118%;
}
nav ul li a{
text-decoration:none;
color:white;
display:block;
background:#5e6ea6;
padding-bottom:7.9%;
padding-top:7.9%;
}
nav ul li:hover > a{
background-color:orange;
display: block;
}
nav ul ul{
position:absolute;
display:none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
font-weight: 4000;
font-size: 70%;
}
nav ul ul li {
float: none;
border-top: 1px solid #2f4389 ;
border-bottom: 1px solid #2f4389;
position: relative;
width:275px;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li:hover > a {
background: orange;
border:1px solid white;
}
nav ul li:hover ul{
width:100%;
position:absolute;
left:100%;
top:0;
}
I am creating a vertical navigation menu using ul and li I want to make span the full width of ul so I can have underline for each menu item (like this site (http://www.steffenallen.com/index.php))
However, there is a space in li that prevents it from spanning across the parent ul. Could someone tell me how the above website did it? Or, what I need to do?
<nav>
<ul class='menu'>
<li class="menuItem">
About
</li>
<li class="menuItem"> Album
<ul class="submenu">
<li class="submenu-Item">Nepal </li>
<li class="submenu-Item">Seattle</li>
<li class="submenu-Item">South Korea</li>
</ul>
</li>
<li class="menuItem"> Contact </li>
<!-- <li> </li> -->
</ul>
My CSS is
ul,li{
list-style: none;
display: block;
}
ul.menu{
width: 170px;
/*position: absolute;*/
/*width: 100%;*/
/*margin-left: -20px;*/
border: 1px solid orange;
}
ul.submenu{
/*position: absolute;*/
/*left: -999px;*/
/*visibility: hidden;*/
display: none;
}
li{
width:140px;
margin: 0;
padding: 0;
/*width:100%;*/
border-left: 1px blue solid;
border-right: 1px blue solid;
}
span{
display: block;
}
li a, li span {
/*width: 170px;*/
/*width: 100%;*/
border-bottom: #cbcbcb 1px solid;
}
li.menuItem, li.submenu-Item{
text-align: right;
margin: 1em 0em 1em 0em;
}
li.menuitem > a{
color: #808080;
}
li a:hover{
color: steelblue;
}
li.menuItem a.current{
background-color: orange;
}
ul.menu:first-child{
margin-top: 0
}
First things first, your CSS is not well-written and hence a little difficult to understand.
The main problem in your code happens to be the default CSS that is being applied. You can remove that as follows:
ul, li {
margin: 0;
padding: 0;
}
However, I'd suggest you simplify your CSS code as follows. This will still achieve what you are looking for all the while making your code more elegant and easily readable. Please see the code below :
ul, li {
margin:0px;
padding:0px;
}
ul.menu {
border: 1px solid Orange;
width:200px;
}
ul.menu li {
display:block;
list-style-type:none;
}
ul.menu li a {
border-bottom:1px solid #ccc;
display:block;
text-align:right;
text-decoration: none;
}
ul.menu li ul {
display:none;
}
ul.menu li:hover > ul {
display:block;
}
ul.menu li ul li:last-child {
border-bottom:none;
}
See this working below :
ul, li {
margin:0px;
padding:0px;
}
ul.menu {
border: 1px solid Orange;
width:200px;
}
ul.menu li {
display:block;
list-style-type:none;
}
ul.menu li a {
border-bottom:1px solid #ccc;
display:block;
text-align:right;
text-decoration: none;
}
ul.menu li ul {
display:none;
}
ul.menu li:hover > ul {
display:block;
}
ul.menu li ul li:last-child {
border-bottom:none;
}
<nav>
<ul class='menu'>
<li class="menuItem"> About
</li>
<li class="menuItem"> Album
<ul class="submenu">
<li class="submenu-Item">Nepal
</li>
<li class="submenu-Item">Seattle
</li>
<li class="submenu-Item">South Korea
</li>
</ul>
</li>
<li class="menuItem"> Contact
</li>
<!-- <li> </li> -->
</ul>
Hope this helps!!!
On the left side there is the default margin/padding of ULs, so just remove that. It's 40px and depends on browser if margin or padding is used.
ul, li {margin-left: 0; padding-left: 0;}
The space on the right side is caused by your widths, list has 170px, items just 140px.
http://jsfiddle.net/8q9chvbh/
I have been working all night - just to fix a submenu. Here is my CSS:
/*************First Menu Layer************/
#navigation {
width:820px;
background-color:#45AAFF;
height:22px;
border-bottom:1px solid #fff;
font-family:'Signika',sans-serif
}
#navigation ul {
margin:0;
padding:0
}
#navigation li {
height:22px;
float:left;
position:relative;
display:block
}
#navigation li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-right:1px solid #fff
}
#navigation li a:hover {
text-decoration:underline;
background-color:#06C
}
/*************Second Menu Layer************/
#navigation li ul {
display:none;
position:absolute
}
#navigation li:hover ul {
display:block;
text-decoration:none;
background-color:#45AAFF;
border-bottom:1px dotted #006AC3
}
#navigation li ul li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-style:none
}
#navigation li ul li a:hover {
text-decoration:none;
border-bottom:1px solid #006AC3
}
And this is my HTML:
<!DOCTYPE html>
<html>
<head>
<link href="submenu.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div id="navigation">
<ul>
<li>
News
<ul>
<li>
National
</li>
<li>
International
</li>
<li>
Sport
</li>
<li>
Hollybood
</li>
</ul>
</li>
<li>
Technology
<ul>
<li>
IT/Software
</li>
<li>
Hardware
</li>
<li>
Iphone
</li>
<li>
Neuro Science
</li>
</ul>
</li>
<li>
Sports
<ul>
<li>
Cricket
</li>
<li>
Tenis
</li>
<li>
Badminton
</li>
<li>
Hockey
</li>
</ul>
</li>
<li>
Country
<ul>
<li>
India
</li>
<li>
America
</li>
<li>
France
</li>
<li>
Pakistaan
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
1st problem: My Submenu block doesn't show properly. If the menu contain with more than one word, the next word go to the next line. How can I make it inline? Refer to this image: http://i.stack.imgur.com/9SqWf.jpg
2nd Problem: When I hover to the submenu, how can I make them standardized? Please refer to this image: http://i.stack.imgur.com/DULg6.jpg
One of it left empty space on the right - it suppose to show full blue background, following the longest menu.
Can somebody help me to explain and solve this issue? I just want to make them tidy.
There are some problems in the code.
1. You mentioned the element as position: absolute, but you didn't mention the perfect width for them.
2. Selector defining was the main problem in the code.
3. Padding Measurement
You can copy the whole css & Most Importantly Use Indentation Always
/*************First Menu Layer************/
#navigation {
width:820px;
background-color:#45AAFF;
height:22px;
border-bottom:1px solid #fff;
font-family:'Signika',sans-serif;
}
#navigation ul {
margin:0;
padding:0;
}
#navigation li {
height:22px;
float:left;
position:relative;
display:block;
}
#navigation>ul>li>a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-right:1px solid #fff;
}
#navigation li a:hover {
text-decoration:underline;
}
/*************Second Menu Layer************/
#navigation li ul {
display:none;
position:absolute;
}
#navigation li:hover ul {
display:block;
text-decoration:none;
background-color:#45AAFF;
border-bottom:1px dotted #006AC3;
width: 250px;
}
#navigation li ul li{
position: relative;
min-width: 100%;
padding: 5px 0px 5px 0px;
}
#navigation li ul li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding: 5px 0px 5px 0px;
border-style:none;
display: inline-block;
min-width: 100%;
}
#navigation li ul li a:hover {
text-decoration:none;
border-bottom:1px solid #006AC3;
background-color:#06C;
}
Do you guys have any idea how to remove the right border on my drop down menu? I tried putting right-border: none, right-border: hidden, and right-border: 0px but nothing!
HTML :
<section class="menu">
<ul>
<li><a class="active" href="#"> PORTFOLIO </a>
<ul>
<li> illustrations </li>
<li> portraits </li>
<li> environments </li>
<li> life drawings </li>
</ul>
</li>
<li> STORE
<ul>
<li> society6 </li>
<li> redbubble </li>
</ul>
</li>
<li> CONTACT </li>
<li> ABOUT </li>
</ul>
</section>
CSS :
.menu {
height:29px;
width:100%;
/*background:orange;*/
}
.menu ul {
width:auto;
list-style-type:none;
font-family:"calibri", "arial";
}
.menu ul li {
position:relative;
display:inline;
float:left;
width:auto;
border-right: 2px solid purple;
margin-left:10px;
line-height:12px;
}
.menu ul li a {
display:block;
padding:3px;
color:#854288;
text-decoration:none;
font-size:20px;
font-weight:strong;
padding-right:25px;
}
.menu ul li a:hover, .active {
color:#788d35
}
.menu ul li ul {
display:none;
}
.menu ul li:hover > ul {
display:block;
position:absolute;
top:23px;
float:left;
padding-left:20px;
text-align:left;
margin-left: -30px;
}
.menu ul li ul li {
position:relative;
min-width:135px;
max-width:1350px;
width:100%;
}
.menu ul li ul li a {
padding: 3px;
margin-left: 1px;
border-right: hidden; /* <---- DOES NOT WORK */
}
This removes border from the main menu (after the last item About) :
.menu ul li:last-child{ border:none; }
JSFiddle
If you also want to remove border from the nested lis, you should add border:none to .menu ul li ul li :
JSFiddle
try this
#right_border_less{
border:solid;
border-right:none;
}