I've got a little issue with a inline menu, bug only appears in ie7. The only menu li that has another menu underneath it, is not inline with the rest, the rest seem to appear pushed down.
HTML
<div id="topnav">
<ul id="jsddm">
<li id="">
<a id="" href="/">Home</a>
</li>
<li id="">
About
<ul style="visibility: hidden;">
<li>
Board
</li>
<li>
Contact
</li>
</ul>
</li>
<li>
Practices
</li>
<li>
How we work
</li>
<li>
Patients
</li>
<li>
News & Links
</li>
<li>
Link
</li>
</ul>
</div>
CSS
#jsddm
{ margin: 0;
padding: 0;
width: 100%;
}
#jsddm li
{
display: inline-block;
list-style: none;
font: 12px Tahoma, Arial;
width: 100px;
text-align: center;
}
*+html #jsddm li { display:inline }
* html #jsddm li { display:inline }
#jsddm ul li
{
display: block;
font: 12px Tahoma, Arial;
}
#jsddm li ul
{
margin: 0 0 0 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 0px solid white;
*margin: 0 0 0 -50px; /* IE 7 and below */
/* margin: 0 0 0 -50px\9; IE 8 and below */
}
#jsddm ul li ul li
{
font: 12px Tahoma, Arial
}
#jsddm li a
{
display: block;
background: #009EE0;
padding: 0;
line-height: 28px;
text-decoration: none;
border-right: 0px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;
font-weight: bold;
width: 100%;
}
#jsddm li a:hover
{ background: #1A4473}
#jsddm li ul li
{
float: none;
*margin: -2px 0 0 0;
*padding:0;
}
+html #jsddm li ul li { }
#jsddm li ul li a
{
width: auto;
background: #009EE0
font-weight: bold;
}
#jsddm li ul li a:hover
{ background: #0E559C }
It uses a jquery function to display the dropdownmenu but it does'nt effect the static html/css.
Thanks.
IE7 doesn't support inline-block. Try to float the elements in it - http://jsfiddle.net/SsDnd/1/
#jsddm li
{
display: inline-block;
list-style: none;
font: 12px Tahoma, Arial;
width: 100px;
text-align: center;
*float: left;
}
Related
I have horizontal menu bar, and I trying to add sub menu for one of item, but I am not able to add it, Its appending to my main menu, please someone help me to where i missing
thanks
HTML
<div id="talltabs-maroon">
<ul>
<li class="first">Home <span>Page</span></li>
<li class="active"><span>About us</span></li>
<li class="dropdown"><a class="dropbtn" href="#"> <span> Report </span></a>
<ul class="dropdown-content" style="left:0">
<li>
<a href="">
<p>Valve Report</p>
</a>
</li>
<li>
<a href="">
<p>Cylinder Report</p>
</a>
</li>
</ul>
</li>
<li class="last">Contact <span>Us</span></li>
</ul>
</div>
CSS for Main menu
#talltabs-maroon {
clear: left;
float: left;
padding: 0;
border-top: 3px solid #CD324F;
width: 100%;
overflow: hidden;
font-family: Georgia, serif;
height: 90px;
position: inherit;
}
#talltabs-maroon ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
#talltabs-maroon ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#talltabs-maroon ul li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 0px 10px 6px 10px;
background: #CD324F;
text-decoration: none;
color: #fff;
}
#talltabs-maroon ul li a p:hover {
color: aqua;
}
#talltabs-maroon ul li a:hover {
padding: 20px 10px 6px 10px;
color: black
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
padding: 25px 10px 6px 10px;
border-width: 5px;
border-color: aqua;
color: aqua;
}
CSS for drop down menu i tried.
.dropbtn {
list-style-type: none;
color: white;
padding: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
list-style-type: none;
display: none;
position: absolute;
right: 0;
/*background-color: black;*/
background-image: url('../../Images/black-olive.jpg'); /*dropdowm popup*/
min-width: 160px;
box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
z-index: 1;
padding-right: 2px;
margin-right: 2px;
}
.dropdown-content a {
color: white;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: gray;*/
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
}
pleas help me.
thanks
tink.
Here is my answer for same example, I changed complete css,
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: -1px;
position: relative;
padding: 15px 20px;
background: #CD324F;
cursor: pointer;
color: black;
height: 40px;
width: auto;
text-align:center;
}
ul li a{
color:black;
}
ul li:hover {
background: #CD324F;
color: #fff;
height: 45px;
}
ul li a:hover {
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 160px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ce5068;
display: block;
color: #CD324F;
height: 35px;
}
ul li ul li:hover {
background: #CD324F;
height: 35px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
Result: on hover portfolio, drop down will appear
Working example on JSFiddle.
I really recommend to look at bootstrap's drop down menu. It is easy to use and most things are already done for you. good luck
Here is the link: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
your code is bit confusing , i have created a simple demo for you how to do it.
here is my HTML code
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
}
p {
text-align: center;
}
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;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li>Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials
</ul>
</nav>
</div>
I have the following HTML:
<ul class="navlist">
<li>Home</li>
<li>Agenda</li>
<li>Presenters</li>
</ul>
And I'm using this CSS:
.navlist {
padding: 10px 0 0;
margin: 0;
list-style-type: none;
height: 33px;
}
.navlist li a {
text-decoration: none;
font-size: 18px;
color: white;
background: #63B3E4;
padding: 10px 45px 12px;
}
.navlist li a:hover {
color: #63B3E4;
background: white;
}
.navlist li {display: inline;}
As shown in a fiddle, there is whitespace between the li elements. How do I remove that whitespace?
In the HTML, remove all whitespace between each closing tag </li> and opening tag <li>. In addition, set display: inline-block on the list items.
Demonstration:
.navlist {
padding: 10px 0 0;
margin: 0;
list-style-type: none;
height: 33px;
}
.navlist li {
display: inline-block;
}
.navlist li a {
text-decoration: none;
font-size: 18px;
color: white;
background: #63B3E4;
padding: 10px 45px 12px;
}
.navlist li a:hover {
color: #63B3E4;
background: white;
}
<ul class="navlist">
<li>Home</li><li>
Agenda</li><li>
Presenters</li>
</ul>
The reason is that you set the LI as inline elements, the spaces are caused by the "spaces"/linebreaks between the html code </li> and <li>.
We usually make the LI float: left instead:
http://jsfiddle.net/Lsbwt0n8/3/
In this instance you can just add
.navlist li:after { content: ' '; font-size:0; }
The white-space between the li elements will collapse into the pseudo element, which has a font-size of 0, so no gap is rendered.
.navlist {
padding: 10px 0 0;
margin :0;
list-style-type: none;
height:33px;
}
.navlist li a {
text-decoration: none;
font-size:18px;
color:white;
background:#63B3E4;
padding: 10px 45px 12px;
}
.navlist li a:hover {
color:#63B3E4;
background:white;}
.navlist li {display: inline;}
.navlist li:after { content: ' '; font-size:0; }
<ul class="navlist">
<li>Home</li><li>
Agenda</li><li>
Presenters</li>
</ul>
you can remove the whitespace by adding font-size:0 to parent
.navlist {
font-size: 0;
}
.navlist {
padding: 10px 0 0;
margin: 0;
list-style-type: none;
height: 33px;
font-size: 0;
}
.navlist li a {
text-decoration: none;
font-size: 18px;
color: white;
background: #63B3E4;
padding: 10px 45px 12px;
}
.navlist li a:hover {
color: #63B3E4;
background: white;
}
.navlist li {
display: inline;
}
.navlist {
font-size: 0;
}
<ul class="navlist">
<li>Home
</li>
<li>
Agenda
</li>
<li>
Presenters
</li>
</ul>
In order to remove the white space, you must remove the white space.
<ul class="navlist">
<li>Home</li><li>Agenda</li><li>Presenters</li>
</ul>
http://jsfiddle.net/Lsbwt0n8/5/
I'd like to have the navigation bar centered and the text placed to left as it is, but when I add the h3-tag the navigation bar moves to the right. How can I do this?
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
display: inline-block;
float: left;
font-style: bold;
font-size: 2em;
color: white;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<h3 id="toptext">Text text text text</h3>
<ul>
<li class="home"><a class="active" href="#">Home</a>
</li>
<li class="about">About
</li>
<li>Other
<ul>
<li>Site1
</li>
<li>Site2
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
I used the navigation bar from: http://css-snippets.com/drop-down-navigation/
Anything that is in the document flow is going to affect the position of the menu. So you would would have to take the h3 out of the flow by positioning it absolutely.
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
font-style: bold;
font-size: 2em;
color: white;
position: absolute;
}
This has other issues but solves your initial problem.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
/*
display: inline-block;
float: left;
*/
font-style: bold;
font-size: 2em;
color: white;
position: absolute;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<h3 id="toptext">Text text text text</h3>
<ul>
<li class="home"><a class="active" href="#">Home</a>
</li>
<li class="about">About
</li>
<li>Other
<ul>
<li>Site1
</li>
<li>Site2
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
Its because your h3 is inside the nav div. try making the h3 absolute positioned and your .nav class relatively positioned.
I have a vertical menu some of which have sub menu displayed to the right side. When I hover first menu and sub menus of it, it displays the second set of sub menu belonging to third menu.
<body>
<ul class="menu">
<li>Population and Socio-Economic Atlas
<ul>
<li>Population
<ul>
<li>Population Density</li>
<li>Population By Sex</li>
<li>Population By Age</li>
</ul>
</li>
<li>Education</li>
<li>Agriculture
<ul>
<li>Agricultural Land</li>
<li>Agriculture Holding</li>
<li>Agriculture By Type</li>
</ul>
</li>
</ul>
</li>
<li>Level1 Menu2</li>
<li>CA Election 2070
<ul>
<li>Districts</li>
<li>Constituencies</li>
<li>Result
<ul>
<li>District Map</li>
<li>Constituencies Map</li>
<li>Election Result 2070</li>
</ul>
</li>
</ul>
</li>
<li>To Be Continued</li>
</ul>
</body>
my CSS below:
.menu,
.menu ul,
.menu li,
.menu a {
margin: 5px;
padding: 0;
}
.menu {
height: 250px;
width: 300px;
background: #FFCC99;
}
.menu li {
width:100%;
height:25px;
text-align:left;
display: block;
padding: 0 0px;
margin: 3px 0px;
line-height: 25px;
border-bottom: 1px solid #393942;
}
.menu li a {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
text-decoration: none;
font-size: 14px;
}
.menu li:hover > a { color: #FF0000; }
/* second level menu */
.menu ul {
position: relative;
width: 200px;
top: -26px;
left: 295px;
opacity: 0;
background: #CCCCCC;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 25px;
overflow: hidden;
padding: 0 0px;
width: 200px;
padding: 0 0px;
margin: 6px 0px;
border: none;
border-bottom: 1px solid #353539;
}
.menu li:hover > ul li {
height: 25px;
overflow: visible;
padding: 0 0px;
}
.menu ul li a {
font-family: Helvetica, Arial;
font-style: italic;
font-weight: normal;
font-size: 12px;
}
.menu ul li:last-child a { border: none; }
/* third level menu */
.menu ul ul {
position: relative;
width: 200px;
top: -26px;
left: 195px;
opacity: 0;
background: #00FF00;
}
.menu ul ul:hover > ul { opacity: 1; }
.menu ul ul li {
height: 25px;
overflow: hidden;
padding: 0 0px;
width: 200px;
padding: 0 0px;
margin: 6px 0px;
border: none;
border-bottom: 1px solid #0000FF;
}
.menu ul ul ul:hover > ul {
height: 25px;
overflow: visible;
padding: 0 0px;
}
.menu ul ul li a {
font-family: Helvetica, Arial;
font-style: italic;
font-size: 12px;
}
.menu ul li:last-child a { border: none; }
How to solve this problem?
You need to use display: block/none; instead of overflow: hidden/visible to hide/unhide your sub-menus.
Here's the fiddle
overflow only affects visibility of the element. The element still exists in the DOM and responds to/ triggers all events associated with it. Hence, the issue.
That happens because you use opacity to hide sub menus. When opacity is 0 then sub menu is still on page, and receives mouse events. Submenus added to lower elements, are higher in visibility stack, and that reason why they steal hover. Instead of opacity use display.
Fiddle: http://jsfiddle.net/mL3eD/
Hello Mates,
I'm trying to build a CSS menu that is displayed above. So far I wrote this HTML:
<div class="left-menu">
<ul class="menu-left">
<li id="current" class="parent active item5">
<span>ღვინო</span>
<ul>
<li class="parent item6">
<span>TELIANI VALLEY</span>
<ul>
<li class="item7">
<span>ლეგენდა</span>
</li>
<li class="item8">
<span>ღვინოები</span>
</li>
<li class="item9">
<span>ჯილდოები</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
and this is my CSS:
/* 1 */
.left-menu ul {
width: 145px;
margin: 0;
padding: 0;
list-style: none;
}
.left-menu ul li {
list-style: none;
margin: 0;
padding: 0;
}
.left-menu ul li {
width: 145px;
margin: 0;
padding: 0;
height: 20px;
background:#fff;
}
.left-menu ul li a {
width:131px;
height:20px;
padding-left: 14px;
float: left;
font: normal 12px calibri, sylfaen, georgia, arial, verdana;
color: #7b2029; text-decoration: none;
}
.left-menu ul li:hover, .left-menu ul li#current {
width: 145px;
height: 20px;
color:#fff;
text-decoration: none;
}
.left-menu ul li#current a {
width: 131px;
height: 20px;
padding-left: 14px;
color: #fff;
text-decoration: none;
background: #7b2029;
display:block;
}
/* 2 */
.left-menu ul li ul {
width:145px;
padding:0;
margin: 2px 0 0 0;
float: left;
list-style: none;
}
.left-menu ul li ul li {
width: 137px;
margin: 0;
padding: 0;
height: 20px;
list-style: none;
padding-left: 8px;
}
.left-menu ul li ul li a {
width: 120px;
height: 20px;
padding-top: 0px;
font: normal 12px/20px calibri, sylfaen, georgia, arial, verdana;
background:#887b33;
}
/* 3 */
and I'm getting displayed this crap:
Can someone tell me why? I haven't experience such thing before...
Link to example fiddle I have created:
Fiddle...
I didn't bother with hover effects, and colors/font styles. You can always change it...
Tested on mozilla and IE (ain't got chrome at work).
I hope it helps.
Daniel