I've modified some existing CSS code i found to develop a menu. It all works fine except when i hit the drop down menu. if there there is another HTML component on the page, the menu stays behind the component instead of it staying on top (i hope my description makes sense).
Here is the CSS:
#navMenu{
/*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
margin-left:2px;
/*width: 944px;*/
width:100%;
font-weight:normal;
font-size:15px;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
/*removes the bullet point*/
list-style:none;
float:left;
position:relative;
background-color: #F9F9F9;
}
/*for top level */
#navMenu ul li a{
text-align:center;
font-weight:bold;
font-size:0.8em;
line-height:height;
font-family:Arial,Helvetica,sans-serif;
text-decoration:none; /*remove underline*/
margin:-1px;
/*height width for all links*/
height:30px;
width:150px;
display:block;
/*border-bottom: 1px solid #ccc;*/
color: #00611C;
}
/* hiding inner ul*/
#navMenu ul ul{
position:absolute;
visibility:hidden;
/*must match height of ul li a*/
top:28px;
}
/*selecting top menu to display the submenu*/
#navMenu ul li:hover ul{
visibility:visible;
}
#navMenu li:hover {
/*background-color: #F9F9F9;*/
background-color: #DBDB70;
border-radius: 5px;
}
#navMenu ul li:hover ul li a:hover{
/* color: E2144A;*/
color:#E2144A;
}
#navMenu ul li a:hover{
/*color: E2144A;*/
color:#E2144A;
}
Would anybody be able to tell me whats missing to enable the drop down menu to stay on top?
thanks.
It would be useful to have the HTML code, not just the CSS, to troubleshoot this. But with just the CSS you posted, look into setting a z-index on the elements that are layered backwards from the way you would like.
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index?redirectlocale=en-US&redirectslug=Understanding_CSS_z-index
use z-index.
#navMenu{
/*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
margin-left:2px;
/*width: 944px;*/
width:100%;
font-weight:normal;
font-size:15px;
z-index:1;
}
Try giving your menu a z-index: 1; (or higher). You can also lower the z-index of whatever content is covering up your menu.
You need to set the parent that will wrap your menu to be in position: relative, this could be a body or maybe an outer wrapper. Then you can use absolute position to place it always at the top and specify some z-index:
For more information: see this z-index property information in here:
https://bytutorial.com/tutorials/css/css-z-index
Related
i have a problem fitting text into blocks (dropdown menu) in CSS.
The code is in Serbian language, but if needed i can translate it to english.
Ok, so i have "Ponuda usluga", when i mouse over that, i get dropdown menu with "Lov" , "Obuka Pasa", "Ribolov" and "Obezbedjivanje potrebne dokumentacije", but the problem is the last one does not fit and proceedes to go under in next line, like shown on screenshot1 here https://ibb.co/YbTytJw (NOTE: at the screenshot i was hovering over "ribolov", thats why its orange).
I would like it to be like this screnshot2 https://ibb.co/dW65Tyx.
Same problem when i hover over "Lov" (that opens a new dropdown menu with 2 options there) like shown on screenshot3 https://ibb.co/0ZKxVWj (Note: I added >> to point out that there is another dropdown menu, and again, i was hovering over "lov", so thats why its orange). Same as the first problem, i need it to say "lov na sitnu divljac" and underneath "lov na krupnu divljac", instead it says "lov na sitnu", "lov na krupnu" and underneath "divljac". I need it to be like screenshot4 https://ibb.co/8zspMY0.
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
html{
height:100%;
}
.wrapper{
min-height:100%;
width:100%;
position:relative;
}
body{
height:100%;
background:#ddd;
}
h2{
padding:50px;
background-color:#161B21;
color:#f0f1f5;
font-family: big john;
text-align:center;
font-size:30pt;
letter-spacing:15px;
}
.navigationDesktop{
background-color:#161B21;
}
nav{
height:40px;
width:700px;
display:block;
margin:0 auto;
text-align:center;
text-transform: uppercase;
}
nav a{
display:block;
text-decoration:none;
font-family:monospace;
font-weight:bold;
font-family:13pt;
color:white;
}
nav a:hover{
background-color:#F4A950;
color:#f0f1f5;
}
nav ul{
list-style:none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height:40px;
background-color:#161B21;
list-style-type: none;
}
nav ul ul li{
position:relative;
display:none;
}
nav ul ul ul{
display:none;
}
nav ul li:hover ul li{
display:block;
animation: navmenu 500ms forwards;
}
#keyframes navmenu{
0%{
opacity:0;
top:5px;
}
100%{
opacity:1;
top:0px;
}
}
nav ul ul li:hover ul{
display:block;
position:absolute;
width:140px;
left:140px;
top:0px;
}
</style>
Here is the pastebin of the HTML https://pastebin.com/MLweR454
And here is the pastebin of the CSS https://pastebin.com/mtszKhNu
That is happening because you are trying to set each nav link block size by using line-height:40px, that creates 40px of space between each line of text. What you want do to is set your nav a to line-height:1.1;, no px, and make the size of the link block be based of the amount of text and padding, by adding padding: 15px 0;
This is my full code: https://jsfiddle.net/dv6gxtoh/2/
I want the dropdown box to expand and be the full width of it's content (so it doesn't have to drop things down a line) but I also don't want it to stretch the main dropdown button to the same width.
The best example I can give is something a bit like this:
http://i.stack.imgur.com/w3ym8.png
This is the CSS I am using:
* {
margin: 0;
padding: 0;
}
.click-nav ul {
position:relative;
display: inline-block;
}
.click-nav ul li {
position: relative;
list-style:none;
cursor:pointer;
display:inline-block;
}
.click-nav ul li ul {
position:absolute;
left:0;
right:0;
}
.click-nav ul .clicker {
position:relative;
color:black;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
background:#196F9A;
}
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
}
.click-nav ul li a:hover {
background:#F2F2F2;
}
/* Fallbacks */
.click-nav .no-js ul {
display:none;
}
.click-nav .no-js:hover ul {
display:block;
}
The closest I could get it to remove position:relative; from .click-nav ul which does the trick, except the dropdown menu doesn't sit under the button which opened it.
Any help would be appreciated.
Seems to me white-space : nowrap is what you need, i.e
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
white-space: nowrap;
}
forked fiddle -> http://jsfiddle.net/j5ckepbm/
Check the shared fiddle..
you need to make few changes to your css, like adding and width/min-width to your dropdown.
white-space:nowrap
Click to see the fiddle, commented lines are mine changes
You may need to add one more class with a fixed width to get it done.
.click-nav ul li ul li {
width: 150px;
}
Here is a fiddle
Have a look at http://www.habitatlandscape.co.uk/
In Firefox and even Internet Explorer (!!!) the pop-up menus appear perfectly, vertically centered in the white strip, and always starting on the far-left-hand-side.
In Chrome, the menus start horizontally under the parent li, and are not centered vertically. I can fix the vertical alignment by targetting webkit with a different position, but I can't fix the horizontal alignment.
Why is Webkit ignoring position:absolute;left:0;?
CSS:
#header #menu
{
margin:0;
padding:0;
}
#header #menu ul
{
list-style-type:none;
margin:0;
padding:0;
margin-top:28px;
height:24px;
}
#header #menu ul li
{
display:inline;
position:relative;
}
#header #menu ul li a
{
display:block;
float:left;
padding:7px;
padding-bottom:3px;
background:#fff;
margin-right:5px;
text-decoration:none;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-family:'museo', serif;
font-size:12px;
text-transform:uppercase;
color:#fff;
font-weight:bold;
padding-left:12px;
padding-right:12px;
background:#01973D;
position:relative;
z-index:2;
}
#header #menu ul li:hover a
{
background:#00BB4A;
}
#header #menu ul li ul
{
clear:both;
display:none;
position:absolute;
top:39px;
width:700px;
margin:0;
padding:0;
}
#header #menu ul li ul li
{
display:block;
}
#header #menu ul li ul li a
{
background:#fff !important;
color:#000;
font-weight:normal;
padding:7px;
padding-left:11px;
color:#01973D;
padding-top:10px;
margin:0;
float:left;
}
#header #menu ul li ul li a:hover
{
color:#000;
}
#header #menu ul li:hover ul
{
display:block;
}
HTML (CMS-generated):
<div id="menu">
<ul>
<li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/about-us/"><span>About Us</span></a>
<ul>
<li><span>Company History</span></li>
<li><span>Meet The Team</span></li>
</ul>
</li>
<li class="parent"><a class="menuactive parent" href="http://www.habitatlandscape.co.uk/portfolio/"><span>Portfolio</span></a>
<ul>
<li><span>View before, during and after photos from recent projects</span></li>
</ul>
</li>
<li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/services/"><span>Services</span></a>
<ul>
<li><span>Design</span></li>
<li><span>Patios</span></li>
<li><span>Decking</span></li>
<li><span>Turf</span></li>
<li><span>Ponds</span></li>
<li><span>Driveways</span></li>
<li><span>Fencing</span></li>
<li><span>Electrics</span></li>
<li><span>Structures</span></li>
</ul>
</li>
</ul>
// etc
</div>
You've created a mess by display:inline-ing your <li> elements but display:block-ing your <a> elements.
In HTML, it's invalid to nest a block-level element in an inline element:
<span><div>FAIL</div></span>
When you do something like this, you're going to have cross-browser problems. The same goes if you use CSS to change the display property:
<div style="diplay:inline"><span style="display:block">STILL A FAIL</span></div>
Which is what you've done:
#header #menu ul li {
display: inline;
/* ... */
}
#header #menu ul li a {
display:block;
/* ... */
}
That behavior is more or less undefined as far as the specs are concerned (since it makes no sense) so the browser reserves the right to do something insane or ridiculous - which is what you're seeing. It works in Firefox only because you're getting lucky and it works in Internet Explorer because Internet Explorer is inherently insane and ridiculous.
If you want those <li> elements to stack horizontally, float:left them instead of inlining them. Then you can display:block your <a> element without issue. Once that's done you'll still have to switch up which elements are position:relative;-ed, and probably add a left:0 somewhere.
Here's an example of your current issue on jsfiddle, and here's an example of my suggested fix on jsfiddle, which involves positioning the #header #menu ul element relatively instead of the #header #menu ul li.
When I gave the #header #menu ul li a display:inline-block; it fixed it. It also changed the result of the hidden ul's top positioning, which should be 24px to match the height if the button anyways, right?
I'm creating a navigation menu using HTML and CSS for a library OPAC. There seems to be unwanted top padding in each li item which results in a persistent gap between items in the menu. This is visible both in the latest firefox and in IE 9.
My HTML is:
<div class="menu_div">
<ul>
<li id="mainnav">Find Information</li>
<li>Catalogue</li>
<li>Databases</li>
<li>Guides</li?
</ul>
</div>
My CSS reads:
.menu_div ul
{
padding:0px;
margin:0px;
padding-top: 0px;
margin-top: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFF;
list-style:none;
text-indent:10px;
color:#000000;
}
.menu_div ul li
{
padding:0px;
margin:0px;
padding-top: 0px;
margin-top: 0px;
list-style:none;
background:#CCC;
line-height:20px;
border-bottom:1px solid #333;
color:#000000;
}
.menu_div ul li a
{
padding:0px;
margin:0px;
padding-top: 0px;
margin-top: 0px;
text-decoration:none;
color:#FFF;
display:block;
color:#000000;
}
.menu_div ul li a:hover
{
background: #293895;
color:#FFFFFF;
}
.menu_div ul li#mainnav
{
background:#293895;
font-weight:bold;
color:#FFFFFF;
}
The screenshot shows the 'gap' I am talking about, in between the two items (cursor hovering over the 2nd item):
http://postimage.org/image/5dxn7j56z/
Any help would be greatly appreciated.
This is most likely caused by a line height being set, this is generally inherited from something in the code that surrounds your list. Try appending line-height: 1em; to the CSS of each element in order to remove that extra spacing.
Edit: If you view the JSfiddle located here: http://jsfiddle.net/pCAfk/ there is no spacing since there has been no inherited line-height.
I hav a simple nav bar that i want to convert into a drop down nav bar, but i am not sure what i have to do to accomplish this. Do i need a certain javascript code or css. thanks
/* navigation menu */
div#navigation {
height:55px;
background:#0C1C29 url('images/nav-bg.png') repeat-x scroll top left;
}
div#innernav {
background:transparent url('images/nav-left.png') no-repeat scroll top left;
height:55px;
}
div#navigation ul {
background:transparent url('images/nav-right.png') no-repeat scroll top right;
list-style:none;
margin:0;
padding:0 10px;
position:relative;
top:0;
height:55px;
display:block;
}
div#navigation ul li {
display:block;
float:left;
}
div#navigation ul li a {
display:block;
float:left;
color:#ffffff;
border-bottom:none;
height:32px;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
font-size:1.2em;
padding:14px 20px 9px;
border-right:1px solid #060D14;
border-left:1px solid #244566;
}
div#navigation ul li.navleft a {
border-left:none;
}
div#navigation ul li.navright a {
border-right:none;
}
div#navigation ul li a:hover {
color:#FC8228;
}
<div id="navigation">
<div id="innernav">
<ul>
<!-- top navigation -->
<!-- add class navleft to first item and navright to last item as shown -->
<li class="navleft">home</li>
<li>examples</li>
<li>solutions</li>
<li>our service</li>
<li>support</li>
<li class="navright">contact</li>
</ul>
</div>
</div>
Here is an example that uses the suckerfish methodology:
http://jsfiddle.net/uCdGc/
Here is the magic CSS:
/* Code for dropdown */
#navigation ul li ul {
position: absolute;
left:-999em;
}
#navigation ul li ul li {
float:none;
/* put the rest of your styles here*/
}
#navigation ul li:hover ul, #navigation ul li.sfhover ul {
left:auto;
margin-top:55px;
}
For more on suckerfish, check out this url: http://www.htmldog.com/articles/suckerfish/dropdowns/
What I've done is added a ul element containing subnavigation elements to your "Examples" navigation item. When you hover over, the CSS will position the subnavigation so that it appears where you want it. This should work without any javascript, but if you want to support IE 6, you will need to include the jQuery javascript library and the code in the javascript block in the example.
Right now the subnavigation is styled plainly, but add more styles as you need. I've commented where you should add them.
Good luck.