I got this menu and I need all items to be the same width (155px).
But I don't seem to be doing it the right way, I would appreciate some tips and possible solutions.
#menu {
width: 1000px;
height: 625px;
text-transform: uppercase;
text-align: left;
font-size: 10px;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
#menu span {
padding-left: 11px;
}
#menu ul {
margin: 0;
padding: 25px 0 0 0;
}
#menu li {
background: url(../img/menu_dots.jpg) no-repeat;
display: inline;
padding-bottom: 614px;
padding-top: 25px;
width: 155px;
}
#menu li a {
text-decoration: none;
color: #D1D3D4;
}
#menu li a:hover {
color: #000;
font-weight: 700;
}
#menu li .current {
color: #000;
font-weight: 700;
}
<div id="menu">
<ul>
<li><span>OCTO</span>
</li>
<li><span>EQUIPA</span>
</li>
<li><span>RECONHECIMENTO</span>
</li>
<li><span>PARCEIROS</span>
</li>
<li><span>PORQUE NÃO?</span>
</li>
<li><span>CONTACTOS</span>
</li>
</ul>
</div>
Easiest solution would be to change the display on the list items (#menu li) from inline to inline-block.
#menu {
width: 1000px;
height: 625px;
text-transform: uppercase;
text-align: left;
font-size: 10px;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
#menu span {
padding-left: 11px;
}
#menu ul {
margin: 0;
padding: 25px 0 0 0;
}
#menu li {
background: url(../img/menu_dots.jpg) no-repeat;
display: inline-block;
padding-bottom: 614px;
padding-top: 25px;
width: 155px;
}
#menu li a {
text-decoration: none;
color: #D1D3D4;
}
#menu li a:hover {
color: #000;
font-weight: 700;
}
#menu li .current {
color: #000;
font-weight: 700;
}
<div id="menu">
<ul>
<li><span>OCTO</span>
</li>
<li><span>EQUIPA</span>
</li>
<li><span>RECONHECIMENTO</span>
</li>
<li><span>PARCEIROS</span>
</li>
<li><span>PORQUE NÃO?</span>
</li>
<li><span>CONTACTOS</span>
</li>
</ul>
</div>
Yes, it is a good solution but after adding display:inline-block; to li actual width wil be 166px, because of padding-left:11px also mind it;
you need to add into the menu li the properties overflow:hidden and max-width:155px and min-width:155px
Related
This is what i want to get
This is what i have
This is what happens after i use "<b.r>"
HERE IS HTML CODE
<nav id="nav1">
<ul>
<li>NAGRODOWY MODEL GRY PZPN</li>
</ul>
</nav>
HERE IS CSS CODE
#nav1 ul
{
display: block;
margin-left: 32%;
list-style: none;
}
#nav1 li a
{
text-align: center;
padding: 10px 9px 10px 9px;
color: white;
font-weight: bold;
font-size: 11px;
}
#nav1 li .red
{
background-color: #91191c;
}
It is necessary to make tag a block. Add display: inline-block for selector #nav1 li a.
ul {
display: block;
margin-left: 32%;
list-style: none;
}
li a {
display: inline-block;
text-align: center;
padding: 10px 9px 10px 9px;
color: white;
font-weight: bold;
font-size: 11px;
}
li .red {
background-color: #91191c;
}
<ul>
<li>
<a href="" class="red">
NAGRODOWY MODEL<br />
GRY PZPN
</a>
</li>
</ul>
Try this:
#nav1 ul {
display: block;
margin-left: 32%;
list-style: none;
}
#nav1 li a {
text-align: center;
padding: 10px 9px 10px 9px;
color: white;
font-weight: bold;
font-size: 11px;
}
#nav1 li .red {
background-color: #91191c;
}
<ul id="nav1">
<li>NAGRODOWY MODEL GRY PZPN</li>
</ul>
Try giving your link tag display: inline-block;
#nav1 ul
{
display: block;
margin-left: 32%;
list-style: none;
max-width: 150px;
}
#nav1 li a
{
text-align: center;
padding: 10px 9px 10px 9px;
color: white;
font-weight: bold;
font-size: 11px;
display: inline-block;
}
#nav1 li .red
{
background-color: #91191c;
}
<div id="nav1"><ul>
<li>NAGRODOWY MODEL<br> GRY PZPN</li>
</ul></div>
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 to float the class time to right but when I try to float it right, its content moves down. Without float contents look fine but I have to float it.
https://jsfiddle.net/jyckLwv7/
.main-nav {
color: #FFF;
width: 100%;
background-color: #5e2d91;
float: right;
line-height: 42px;
margin-top: -3px;
}
.main-nav ul li {
display: inline;
padding: 0px 10px;
}
.main-nav ul li a {
color: #FFF;
text-decoration: none;
padding: 20px 14px;
}
.main-nav ul {
margin-bottom: 7px !important;
}
.main-nav ul li a:hover {
background-color: #0098aa;
}
.main-nav ul li a:active {
background-color: #6A006A;
}
.time {
float: righ;
background: #5e2d91;
color: #FFFFFF;
border-color: #718b88;
font-family: sans-serif;
font-weight: bold;
border-style: solid;
margin-left: 10%;
width: 228px;
height: 33px;
margin-top: 9px;
float: right;
}
<nav class="main-nav">
<ul>
<li> Home
</li>
<li> Trade Now
</li>
<li> Transactions
</li>
<li> Performance
</li>
<li>History
</li>
<li class="time">US Markets Open in <span id="hm_timer" class="style colorDefinition size_sm">08:20:04</span>
</li>
</ul>
</nav>
First of all, don't use margin-top: -3px to fight off that default padding browsers set to body, as this padding varies from browser to browser. To achieve a more consistent visual output, you can try normalising this properties with something like:
html, body {
margin: 0;
padding: 0;
}
Now, coming to your alignment issue, try removing height and width from .time and vertical-align: middle to your li elements.
jsFiddle: → here
Code: (expand the snippet)
html, body {
margin: 0;
padding: 0;
}
.main-nav, .main-nav ul li {
display: inline-block;
}
.main-nav {
color: #FFF;
width: 100%;
background-color: #5e2d91;
line-height: 24px;
}
.main-nav ul li {
padding: 0px 10px;
vertical-align: middle;
}
.main-nav ul li a {
color: #FFF;
text-decoration: none;
padding: 20px 14px;
}
.main-nav ul li a:hover {
background-color: #0098aa;
}
.main-nav ul li a:active {
background-color: #6A006A;
}
.time {
float: right;
border-color: #718b88;
font-family: sans-serif;
font-weight: bold;
border-style: solid;
margin-left: 10%;
}
<nav class="main-nav">
<ul>
<li>Home</li>
<li>Trade Now</li>
<li>Transactions</li>
<li>Performance</li>
<li>History</li>
<li class="time">US Markets Open in
<span id="hm_timer"class="style colorDefinition size_sm">08:20:04</span>
</li>
</ul>
</nav>
Add overflow: hidden to the ul element:
.main-nav ul {
margin-bottom: 7px !important;
overflow: hidden;
}
.main-nav {
color: #FFF;
width: 100%;
background-color: #5e2d91;
float: right;
line-height: 42px;
margin-top: -3px;
}
.main-nav ul li {
display: inline;
padding: 0px 10px;
}
.main-nav ul li a {
color: #FFF;
text-decoration: none;
padding: 20px 14px;
}
.main-nav ul {
margin-bottom: 7px !important;
overflow: hidden;
}
.main-nav ul li a:hover {
background-color: #0098aa;
}
.main-nav ul li a:active {
background-color: #6A006A;
}
.time {
background: #5e2d91;
color: #FFFFFF;
border-color: #718b88;
font-family: sans-serif;
font-weight: bold;
border-style: solid;
margin-left: 10%;
width: 228px;
height: 33px;
margin-top: 9px;
float: right;
}
<nav class="main-nav">
<ul>
<li> Home
</li>
<li> Trade Now
</li>
<li> Transactions
</li>
<li> Performance
</li>
<li>History
</li>
<li class="time">US Markets Open in <span id="hm_timer" class="style colorDefinition size_sm">08:20:04</span>
</li>
</ul>
</nav>
When using floating container, always remember to clear the floats- see this answer for more information.
Note that while using floating containers, you should always clear
them before the next container that follows thereby creating a fresh
block formatting context as it is called. Otherwise you will see
unpredictable behavior.
Instead of overflow: hidden you can also clear the float by using:
.main-nav ul:after {
content: '';
display: block;
clear: both;
}
.main-nav {
color: #FFF;
width: 100%;
background-color: #5e2d91;
float: right;
line-height: 42px;
margin-top: -3px;
}
.main-nav ul li {
display: inline;
padding: 0px 10px;
}
.main-nav ul li a {
color: #FFF;
text-decoration: none;
padding: 20px 14px;
}
.main-nav ul {
margin-bottom: 7px !important;
}
.main-nav ul:after {
content: '';
display: block;
clear: both;
}
.main-nav ul li a:hover {
background-color: #0098aa;
}
.main-nav ul li a:active {
background-color: #6A006A;
}
.time {
background: #5e2d91;
color: #FFFFFF;
border-color: #718b88;
font-family: sans-serif;
font-weight: bold;
border-style: solid;
margin-left: 10%;
width: 228px;
height: 33px;
margin-top: 9px;
float: right;
}
<nav class="main-nav">
<ul>
<li> Home
</li>
<li> Trade Now
</li>
<li> Transactions
</li>
<li> Performance
</li>
<li>History
</li>
<li class="time">US Markets Open in <span id="hm_timer" class="style colorDefinition size_sm">08:20:04</span>
</li>
</ul>
</nav>
Is it this what you are looking for?
Code:
.main-nav{
color:#FFF;
width:100%;
background-color:#5e2d91;
float:right;
line-height:42px;
margin-top: -3px;
}
.main-nav ul li{
display: inline;
padding: 0px 10px;
}
.main-nav ul li a{
color:#FFF;
text-decoration:none;
padding: 20px 14px;
}
.main-nav ul{
margin-bottom:7px !important;}
.main-nav ul li a:hover {
background-color:#0098aa;
}
.main-nav ul li a:active{
background-color:#6A006A;
}
.time {
float: right;
background: #5e2d91;
color: #FFFFFF;
border-color: #718b88;
font-family: sans-serif;
font-weight: bold;
border-style: solid;
margin-left: 10%;
width: 228px;
height: 33px;
margin-top: 0;
float: right;
line-height: 2.2;
}
<nav class="main-nav">
<ul>
<li> Home </li>
<li> Trade Now</li>
<li> Transactions </li>
<li> Performance </li>
<li>History </li>
<li class="time">US Markets Open in <span id="hm_timer" class="style colorDefinition size_sm">08:20:04</span> </li>
</ul>
</nav>
On my page, I'm trying to create an unordered list within an unordered list in my menu so that there is a second dropdown menu. The problem is that the second dropdown menu displays at the same time as the first.
.menu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
.menu ul {
background: #333333;
height: 35px;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
padding: 0px;
}
.menu li a {
background: #333333 url("http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZSeQYKQI/AAAAAAAAAGU/0AgHYW2zktQ/s1600/seperator.gif") bottom right no-repeat;
color: #cccccc;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
.menu li a:hover,
.menu ul li:hover a {
background: #2580a2 url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsZNT36uyI/AAAAAAAAAGM/F8t08m7-5tw/s1600/hover.gif") bottom center no-repeat;
color: #FFFFFF;
text-decoration: none;
}
.menu li ul {
background: #333333;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
display: block;
}
.menu li li {
background: url('http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsZUcZYwkI/AAAAAAAAAGY/zNSlkfCsai8/s1600/sub_sep.gif') bottom left no-repeat;
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
}
.menu li:hover li a {
background: none;
}
.menu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
.menu li ul a:hover,
.menu li ul li:hover a {
background: #2580a2 url('http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZPiSwCMI/AAAAAAAAAGQ/VBSL8auDxzc/s1600/hover_sub.gif') center left no-repeat;
border: 0px;
color: #ffffff;
text-decoration: none;
}
.menu p {
clear: left;
}
<div class="menu">
<ul>
<li>Games
<ul id="1">
<li>minecraft
<ul id="2">
<li>Projects
</li>
<li>Texture Packs
</li>
<li>Skins
</li>
<li>Mods
</li>
<li>Other Stuff
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
The key to getting the sub-menu working is to use the child combinator (>) to target direct descendants.
A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, >) character and separates two sequences of simple selectors.
(http://www.w3.org/TR/css3-selectors/#child-combinators)
The following changes are required:
Add the .menu li ul ul setting left: 100%; and top: 0;. This will tell all sub-menus to be positioned against the right edge of its parent menu.
Change .menu li:hover ul to .menu li:hover > ul. This will ensure that only the direct child ul is shown when the user hovers over the parent li.
Change .menu li ul a:hover, .menu li ul li:hover a to .menu li ul li:hover > a. This will ensure that only the direct child as are highlighted when the user hovers over the parent li.
.menu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
.menu ul {
background: #333333;
height: 35px;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
padding: 0px;
}
.menu li a {
background: #333333 url("http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZSeQYKQI/AAAAAAAAAGU/0AgHYW2zktQ/s1600/seperator.gif") bottom right no-repeat;
color: #cccccc;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
.menu li a:hover,
.menu ul li:hover a {
background: #2580a2 url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsZNT36uyI/AAAAAAAAAGM/F8t08m7-5tw/s1600/hover.gif") bottom center no-repeat;
color: #FFFFFF;
text-decoration: none;
}
.menu li ul {
background: #333333;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
}
.menu li ul ul {
top: 0;
left: 100%;
}
.menu li:hover > ul {
display: block;
}
.menu li li {
background: url('http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsZUcZYwkI/AAAAAAAAAGY/zNSlkfCsai8/s1600/sub_sep.gif') bottom left no-repeat;
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
}
.menu li:hover li a {
background: none;
}
.menu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
.menu li ul li:hover > a {
background: #2580a2 url('http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZPiSwCMI/AAAAAAAAAGQ/VBSL8auDxzc/s1600/hover_sub.gif') center left no-repeat;
border: 0px;
color: #ffffff;
text-decoration: none;
}
<div class="menu">
<ul>
<li>Games
<ul id="1">
<li>minecraft
<ul id="2">
<li>Projects
</li>
<li>Texture Packs
</li>
<li>Skins
</li>
<li>Mods
</li>
<li>Other Stuff
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
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