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;
}
Related
I'm making a responsive top navbar that becomes vertically stacked when viewing on smaller screens. My problem is that in mobile view when you hover over a navigation item to expand the dropdown, the dropdown menu covers the other navigation links.
I'm trying to make the lower navigation elements move down to make room for the dropdown menu when a navigation link hovers over. I want to avoid using jQuery or Bootstrap and prefer to only use HTML and CSS if possible.
JSFiddle link (Be sure to resize the window or view on mobile):
https://jsfiddle.net/adilworth/fzrnvukm/3/
What I've tried:
I have played around extensively with changing the CSS position element but I cannot seem to get it to behave as I want.
HTML:
<ul id="navigation">
<li>Product 1
<ul>
<li>rx.com </li>
<li>Resources</li>
<li>Copay Cards</li>
</ul>
</li>
<li>Product 2
<ul>
<li>e.com </li>
<li>Resources</li>
<li>Copay Cards</li>
<li>Informational Video</li>
</ul>
</li>
<li>INSOMNIA EDUCATION
<ul>
<li>Complete Night Sleep Resources</li>
<li>sleep.com </li>
</ul>
</li>
<li>PAIN MGMT EDUCATION
<ul>
<li>Safer Pain Management Resources</li>
<li>painmanagement.com </li>
</ul>
</li>
<li>MEDICAL AFFAIRS
<ul>
<li>Request Clinical Reprints</li>
<li>Schedule a Scientific Session </li>
</ul>
</li>
</ul>
CSS:
/* Main Navigation */
#nav {
position:relative;
width:620px;
margin:0 auto;
margin-top:50px;
padding:10px;
}
ul#navigation {
margin:0px auto;
position:relative;
float:left;
}
ul#navigation li {
display:inline;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
float:left;
position:relative;
}
ul#navigation li a {
width: 234px;
padding:10px 25px;
color: black;
text-decoration:none;
display:inline-block;
background: #ebebeb;
}
ul#navigation li a:hover {
background:#ebebeb;
color:black;
}
ul#navigation li a.first {
border-left: 0 none;
}
ul#navigation li a.last {
border-right: 0 none;
}
ul#navigation li:hover > a {
background:#ebebeb;
}
/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
visibility:visible;
opacity:1;
}
ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0;
padding: 0;
/*the next 2 styles are very important,
being the ones which make the drop-down to stay hidden */
visibility:hidden;
opacity:0;
position: absolute;
z-index: 99999;
width:234px;
background:#ebebeb;
}
ul#navigation ul {
top: 43px;
left: 1px;
}
ul#navigation ul li ul {
top: 0;
left: 181px; /* strong related to width:180px; from above */
}
ul#navigation ul li {
clear:both;
width:55px;
}
ul#navigation ul li a {
background:none;
padding:7px 15px;
color:#black;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
}
The problem is in using position: absolute;. Then you find that using visibility: hidden/visible isn't good too :-)
/* Main Navigation */
#nav {
position:relative;
width:620px;
margin:0 auto;
margin-top:50px;
padding:10px;
}
ul#navigation {
margin:0px auto;
position:relative;
float:left;
}
ul#navigation li {
display:inline;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
float:left;
position:relative;
}
ul#navigation li a {
width: 234px;
padding:10px 25px;
color: black;
text-decoration:none;
display:inline-block;
background: #ebebeb;
}
ul#navigation li a:hover {
background:#ebebeb;
color:black;
}
ul#navigation li a.first {
border-left: 0 none;
}
ul#navigation li a.last {
border-right: 0 none;
}
ul#navigation li:hover > a {
background:#ebebeb;
}
/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
display: block; /* here change visiblity > display */
opacity:1;
}
ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0;
padding: 0;
/*the next 2 styles are very important,
being the ones which make the drop-down to stay hidden */
/*visibility:hidden;*/
opacity:0;
/*position: absolute; */
display: none; /* change visibility > display */
z-index: 99999;
width:234px;
background:#ebebeb;
}
ul#navigation ul {
top: 43px;
left: 1px;
}
ul#navigation ul li ul {
top: 0;
left: 181px; /* strong related to width:180px; from above */
}
ul#navigation ul li {
clear:both;
width:55px;
}
ul#navigation ul li a {
background:none;
padding:7px 15px;
color:black;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
}
<ul id="navigation">
<li>Product 1
<ul>
<li>rx.com </li>
<li>Resources</li>
<li>Copay Cards</li>
</ul>
</li>
<li>Product 2
<ul>
<li>e.com </li>
<li>Resources</li>
<li>Copay Cards</li>
<li>Informational Video</li>
</ul>
</li>
<li>INSOMNIA EDUCATION
<ul>
<li>Complete Night Sleep Resources</li>
<li>sleep.com </li>
</ul>
</li>
<li>PAIN MGMT EDUCATION
<ul>
<li>Safer Pain Management Resources</li>
<li>painmanagement.com </li>
</ul>
</li>
<li>MEDICAL AFFAIRS
<ul>
<li>Request Clinical Reprints</li>
<li>Schedule a Scientific Session </li>
</ul>
</li>
</ul>
<p> </p>
<div id="doral_resources">
<h4>Resources</h4>
</div>
<p><br /><br /><br /><br /><br /><br /> <br /><br /></p>
<div id="doral_copaycards">
<h4>Copay Cards</h4>
</div>
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;
}
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;
}
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;
}
When structuring a navigation menu with an UL(unordered list), I've noticed when I zoom in and out of the page the list items shift to the right making them come out of line.
How do make them stay in the same place at all times?
I have added the following at JSFiddle to play with it.
<div id="navigation">
<ul>
<font face="Verdana, Geneva, sans-serif">
<li > <a href="../index.html" > ANA SƏHIFƏ </a> </li>
<li> BIOQRAFIYA </li>
<li id="active-li"> XƏBƏRLƏR VƏ HADISƏLƏR </li>
<li><a> KİTABLAR </a></li>
<li> <a> VİDEOLAR </a> </li>
<li> <a id="last-item">FOTOLAR</a> </li>
</font>
</ul>
#navigation {
width: 900px;
margin: 0 auto 0px;
}
div#navigation ul li {
font-size:9px;
list-style:none;
background-color:transparent;
background-color:#FFF;
float: left;
}
div#navigation ul li:hover {
background-color:#9C1A35;
}
div#navigation ul li a {
color:#333333;
text-decoration:none;
display: block;
padding:10px 43px 20px;
}
#navigation ul li a:hover {
color:#fff;
}
ul {
padding:0;
}
#active-li {
background:#9C1A35 !important;
}
#active-li a {
color:#fff !important;
}
#last-item {
padding: 10px 42px 20px 42px !important;
}
div#navigation ul li #active {
background:#9C1A35 !important;
}
div#navigation ul li #active a {
color:#fff;
}
Most of pages loses their layout when zooming excessively. This happens when the "zoom only texts" option is enabled in the browser.
here is my suggestions:
decrease padding-right and padding-left of <a> items to a lower value (43px is too much for your menu).
try giving a height , min-heightand max-height to your items, and set overflow:hidden. This way, the text will stay in it's container box, and won't run out of it.
use relative values (percent, em) instead of px to size your elements.
#navigation {
width: 900px;
margin: 0 auto 0px;
display: inline;
}
Figured out a new way to make the nav bar stay in place
<div id="navigation">
<ul>
<font face="Verdana, Geneva, sans-serif">
<li > <a href="../index.html" > ƏSAS SƏHİFƏ </a> </li>
<li> BIOQRAFIYA </li>
<li id="active-li"> XƏBƏRLƏR VƏ HADISƏLƏR </li>
<li> KİTABLAR </li>
<li> <a> VİDEOLAR </a> </li>
<li> <a id="last-item">FOTOLAR</a> </li>
</font>
</ul>
</div>
#navigation {
width: 900px;
margin: 0 auto 0px;
}
div#navigation ul li {
font-size:9px;
list-style:none;
background-color:transparent;
background-color:#FFF;
float: left;
width:150px;
height:40px;
text-align:center;
}
div#navigation ul li:hover {
background-color:#9C1A35;
}
div#navigation ul li a {
color:#333333;
text-decoration:none;
display: block;
padding:6px 0px 18px;
border-left:1px thin black;
border-right:1px thin black;
}
#navigation ul li a:hover {
color:#fff;
}
ul {
padding:0;
}
#active-li {
background:#9C1A35 !important;
}
#active-li a {
color:#fff !important;
}
div#navigation ul li #active {
background:#9C1A35 !important;
}
div#navigation ul li #active a {
color:#fff;
}