i'm learning the basic of CSS and trying to create a dropdown menu, i tried creating a dropdown menu using plain CSS, but it's not working.
So far I tried this code:
CSS
<!-- because of the * default code it takes out all margin and padding or idententation -->
*{
margin: 0px;
padding: 0px;}
body
{
font-family: verdana;
background-color: ABC;
padding: 50px;
}
h1
{
text-align: center;
border-bottom: 2px solid #009;
margin-bottom: 50px;
}
/*rules for navigation menu */
/*============================================*/
ul#navmenu, ul.sub1
{
list-style-type: none;<!-- sets bullets to none -->
}
ul#navmenu li
{
outline: 1px solid red;
width: 125px;
text- align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu a
{
text-decoration: none;
display: block; <!-- this code makes the link a button instead pointing specifically on the link -->
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu .sub1 li
{
}
ul#navmenu .sub1 a
{
margin-top: 0px;
}
ul#navmenu li:hover > a
{
background-color: #CFC; <!-- sets all link color when hovering to yellow -->
}
ul#navmenu li:hover a: hover
{
background-color: #FF0; <!-- sets all link color when hovering to yellow -->
}
ul#navmenu ul.sub1
{
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .sub1
{
display: block;
}
HTML
<h1>Navigation Menu</h1>
<ul id="navmenu">
<li>Hyperlink 1</li>
<li>Hyperlink 2</li>
<ul id="sub1">
<li>Hyperlink 2.1</li>
<li>Hyperlink 2.2</li>
</ul>
<li>Hyperlink 3</li>
<li>Hyperlink 4</li>
</ul>
</body>
</html>
The dropdown menu is not working, it's not hiding the sub menus, i don't know why.
Here is the picture screenshot using Internet Explorer:
IE
While using Google Chrome:
Chrome
I can't move on:( Any suggestion why dropdown menu is not working and why it's showing differently using other browsers?
Is there a way on how to code CSS dropdown menu where it will show the same on any browser? Thanks in advance.
JSFIDDLE
screen capture:
Use correct HTML buddy:
<ul id="navmenu">
<li>Hyperlink 1</li>
<li>Hyperlink 2
<ul id="sub1">
<li>Hyperlink 2.1</li>
<li>Hyperlink 2.2</li>
</ul>
</li>
<li>Hyperlink 3</li>
<li>Hyperlink 4</li>
</ul>
And, add this CSS:
li ul{
display:none;
}
li:hover ul{
display:block;
}
Like this
please put ul in submenu
DEMO
HTML
<ul id="navmenu">
<li>Hyperlink 1</li>
<li>Hyperlink 2
<ul id="sub1">
<li>Hyperlink 2.1</li>
<li>Hyperlink 2.2</li>
</ul>
</li>
<li>Hyperlink 3</li>
<li>Hyperlink 4</li>
</ul>
CSS
*{
margin: 0px;
padding: 0px;}
body
{
font-family: verdana;
background-color: ABC;
padding: 50px;
}
h1
{
text-align: center;
border-bottom: 2px solid #009;
margin-bottom: 50px;
}
/*rules for navigation menu */
/*============================================*/
ul#navmenu, ul.sub1
{
list-style-type: none;<!-- sets bullets to none -->
}
ul#navmenu li
{
width: 125px;
text- align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu a
{
text-decoration: none;
display: block; <!-- this code makes the link a button instead pointing specifically on the link -->
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu .sub1 li
{
}
ul#navmenu .sub1 a
{
margin-top: 0px;
}
ul#navmenu li:hover > a
{
background-color: #CFC; <!-- sets all link color when hovering to yellow -->
}
ul#navmenu li:hover a: hover
{
background-color: #FF0; <!-- sets all link color when hovering to yellow -->
}
ul#navmenu ul.sub1
{
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .sub1
{
display: block;
}
li ul{
display:none;
}
li:hover ul{
display:block;
}
DEMO2
DEMO3
You need to do three things..
1.Correction in HTML, Where there is 'li' tag with child 'ul'with id="sub1".You need to write it as
<li>Hyperlink 2
<ul id="sub1">
<li>Hyperlink 2.1</li>
<li>Hyperlink 2.2</li>
</ul>
</li>
// there was a typo mistake.You close 'li' before the 'ul'. It should be closed in the end.
You need to display:none for sub1 menu.
li ul{
display:none;
}
Then show it when you hover that 'li'
li:hover ul{
display:block;
}
EDITED :Write this in style tag....
*{
margin: 0px;
padding: 0px;}
body
{
font-family: verdana;
background-color: ABC;
padding: 50px;
}
h1
{
text-align: center;
border-bottom: 2px solid #009;
margin-bottom: 50px;
}
/*rules for navigation menu */
/*============================================*/
ul
{
list-style-type: none;<!-- sets bullets to none -->
}
ul#navmenu li
{
width: 125px;
text- align: center;
float: left;
margin-right: 4px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu a
{
text-decoration: none;
display: block; <!-- this code makes the link a button instead pointing specifically on the link -->
width: 125px;
line-height: 25px;
}
ul#navmenu li:hover > a
{
background-color: #CFC;
}
li ul{
display:none;
left: -40px;
position: relative;
}
li:hover ul{
display:block;
}
ul#sub1 li:hover{
background-color:red;
}
TRY IT
Your html is wrong use, ul#sub1 should be child of <li>
<ul id="navmenu">
<li>Hyperlink 1</li>
<li>Hyperlink 2
<ul id="sub1">
<li>Hyperlink 2.1</li>
<li>Hyperlink 2.2</li>
</ul>
</li>
<li>Hyperlink 3</li>
<li>Hyperlink 4</li>
</ul>
You have to put the ul tag in Sub Menu.
<ul id="navmenu">
<li>Hyperlink 1</li>
<li>Hyperlink 2
<ul id="sub1">
<li>Hyperlink 2.1</li>
<li>Hyperlink 2.2</li>
</ul>
</li>
<li>Hyperlink 3</li>
<li>Hyperlink 4</li>
</ul>
*{
margin: 0px;
padding: 0px;}
body
{
font-family: verdana;
background-color: ABC;
padding: 50px;
}
h1
{
text-align: center;
border-bottom: 2px solid #009;
margin-bottom: 50px;
}
/*rules for navigation menu */
/*============================================*/
ul#navmenu, ul.sub1
{
list-style-type: none;<!-- sets bullets to none -->
}
ul#navmenu li
{
width: 125px;
text- align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu a
{
text-decoration: none;
display: block; <!-- this code makes the link a button instead pointing specifically on the link -->
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu .sub1 li
{
}
ul#navmenu .sub1 a
{
margin-top: 0px;
}
ul#navmenu li:hover > a
{
background-color: #CFC; <!-- sets all link color when hovering to yellow -->
}
ul#navmenu li:hover a: hover
{
background-color: #FF0; <!-- sets all link color when hovering to yellow -->
}
ul#navmenu ul.sub1
{
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .sub1
{
display: block;
}
li ul{
display:none;
}
li:hover ul{
display:block;
}
Try This it will surely work...
Related
why Increased Height item Contact when hover on it? how fix it?
This is My code :
ul {
padding: 0;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
#nav > li {
float: left;
}
#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
}
#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {
color: orange;
}
#nav li:hover > a:after {
content:'\25B6';
color: red;
margin-left: 5px;
padding: 0;
}
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
}
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
See This Image :
When you hover over the list items - you're adding an arrow to the anchor tag via generated content.
Thant's what's causing the increase in height.
To fix this - just set position:absolute on the generated content.
ul {
padding: 0;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
#nav > li {
float: left;
}
#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
}
#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {
color: orange;
}
#nav li:hover > a:after {
content:'\25B6';
color: red;
margin-left: 5px;
padding: 0;
position:absolute;
}
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
}
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
Because of
#nav > li:hover > a:after {
content: '\25BE';
}
the height (font size) is to high of this content.
maybe you should try a background-img.
Or position it absolute and the a-tag relative.
Its because of the :after content attribute (#nav > li:hover > a:after) you are adding on hover(the small arrow icon)
To avoid this, applying line-height: 0 is an efficient way of doing it.
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
line-height: 0; //fix
}
Also you have this code twice, make sure you remove the redundant one.
It simple line height issue.
ul {
padding: 0;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
#nav > li {
float: left;
}
#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
line-height: 20px;
}
#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {
color: orange;
}
#nav li:hover > a:after {
content:'\25B6';
color: red;
margin-left: 5px;
padding: 0;
}
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
}
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
I have menu position on botoom of the page.
And I need to have three level menu, when each level is in row and located to the left.
My CSS Code:
.primary-navigation {
clear: both;
float: left;
display: block;
position: relative;
width: 100%;
top: 80px;
border: 2px solid red;
}
.primary-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.primary-navigation ul > li,
.primary-navigation ul > li > ul > li,
{
position: relative;
float: left;
padding: 3px 5px;
margin: 10px 5px;
cursor: pointer;
}
.primary-navigation ul ul ul li {
float: none;
}
.primary-navigation li > ul {
display: none;
position:absolute;
bottom: 100%;
left: -50%;
border: 2px solid red;
}
.primary-navigation li:hover > ul {
position: absolute;
display: block;
width: 600px;
}
.primary-navigation li {
float: left;
position: relative;
font-size: 20px;
}
.primary-navigation li ul li {
float: left;
position: relative;
font-size: 15px;
}
.primary-navigation a {
color: #FFF;
display: block;
line-height: 16px;
padding: 9px 15px;
text-decoration: none;
}
<nav class="primary-navigation">
<ul>
<li>Ahoj</li>
<li>Test A
<ul>
<li>Test 1</li>
<li>Test 2
<ul>
<li>Test A</li>
<li>Test B</li>
<li>Test C</li>
</ul></li>
<li>Test 3</li>
</ul></li>
<li>Test B
<ul>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
</ul></li>
</ul>
</nav>
I know, that there is a problem in li > ul part, when is
position:absolute;
bottom: 100%;
left: -50%;
I know, that "left" give me a horizontal position.
The problem is, how to get this second row to the left and make it wide full length
Here you go, you have to delete the position: relative out of your children <li> elements, because this is the reason the children of those will align absolute to it's parent (<li> and not the <nav> itself.) Further, you've to do a little trick with the border, because it affects the absolute positioning. So here I use box-shadow on the left side of your elements to achieve the same effect without a border. border-bottom is not needed, because you stack the elements anyway.
CSS for border "trick"
border-right: 2px solid red;
border-top: 2px solid red;
box-shadow: inset 2px 0 0 red //imitates a border-left
SNIPPET
html * {
box-sizing: border-box;
}
.primary-navigation {
clear: both;
float: left;
display: block;
position: relative;
width: 100%;
top: 80px;
border: 0;
box-shadow: inset 0 0 0 2px red;
}
.primary-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.primary-navigation ul > li,
.primary-navigation ul > li > ul > li,
{
float: left;
padding: 3px 5px;
margin: 10px 5px;
cursor: pointer;
}
.primary-navigation ul ul ul li {
float: none;
}
.primary-navigation li > ul {
display: none;
position:absolute;
bottom: 100%;
left: 0;
border-right: 2px solid red;
border-top: 2px solid red;
box-shadow: inset 2px 0 0 red
}
.primary-navigation li:hover > ul {
position: absolute;
display: block;
width: 600px;
}
.primary-navigation li {
float: left;
font-size: 20px;
}
.primary-navigation li ul li {
float: left;
font-size: 15px;
}
.primary-navigation a {
color: #FFF;
display: block;
line-height: 16px;
padding: 9px 15px;
text-decoration: none;
}
<nav class="primary-navigation">
<ul>
<li>Ahoj</li>
<li>Test A
<ul>
<li>Test 1</li>
<li>Test 2
<ul>
<li>Test A</li>
<li>Test B</li>
<li>Test C</li>
</ul></li>
<li>Test 3</li>
</ul></li>
<li>Test B
<ul>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
</ul></li>
</ul>
</nav>
I've read all the questions concerning centering submenus. But I don't get my problem solved.
I have a simple navigation bar with 2 submenus.
You can find it here: Fiddle.
ul#nav, ul#sub1, ul#sub2 {
list-style-type: none;
}
ul#nav {
position: relative;
}
ul#nav li {
width: 125px;
text-align: center;
float: left;
margin-right: 4px;
}
ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
color: #000;
}
ul#sub1 a, ul#sub2 a {
margin-top: 4px;
}
ul#nav li:hover > a {
background-color: #6E6E6E;
color: #FFF;
}
ul#nav li:hover a:hover {
background-color: #E2E2E2;
color: #000;
}
ul#sub1, ul#sub2 {
display: none;
position: absolute;
left: 0px;
}
ul#nav li:hover ul#sub1 {
display: block;
}
ul#sub1 li:hover ul#sub2 {
display: block;
}
<nav>
<ul id="nav">
<li>Reisen
<ul id="sub1">
<li>Europa</li>
<li>Amerika</li>
<li>Asien
<ul id="sub2">
<li>Thailand</li>
<li>Bhutan</li>
<li>China</li>
<li>Vietnam</li>
<li>Japan</li>
</ul>
</li>
<li>Afrika</li>
<li>Australien</li>
</ul>
</li>
<li>Magazin</li>
<li>Karriere
<ul id="sub1">
<li>Thema 1</li>
<li>Thema 2</li>
<li>Thema 3</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
I want the submenu centered. When I hover over "Reisen" the submenu gets the same width like the main menu.
When I hover over "Karriere", I want the submenu centered under "Karriere" and not positioned left under "Reisen".
I was thinking of a span-element to the button "Karriere" but I couldn't solve it.
Thanks for your help.
I don't really now if this is what you're looking for or not, but maybe something like this?
Note: I made a few changes to your CSS and HTML, mainly changing everything to use classes instead of IDs
JS Fiddle Example
HTML
<nav>
<ul id="nav">
<li>Reisen
<ul class="sub">
<li>Europa</li>
<li>Amerika</li>
<li>Asien
<ul class="sub-second">
<li>Thailand</li>
<li>Bhutan</li>
<li>China</li>
<li>Vietnam</li>
<li>Japan</li>
</ul>
</li>
<li>Afrika</li>
<li>Australien</li>
</ul>
</li>
<li>Magazin</li>
<li>Karriere
<ul class="sub">
<li>Thema 1</li>
<li>Thema 2</li>
<li>Thema 3</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
CSS
ul#nav, ul.sub {
list-style-type: none;
}
ul#nav {
position: relative;
}
ul#nav li {
width: 125px;
text-align: center;
float: left;
margin-right: 4px;
position: relative;
}
ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
color: #000;
}
ul.sub a {
margin-top: 4px;
}
ul#nav li:hover > a {
background-color: #6E6E6E;
color: #FFF;
}
ul#nav li:hover a:hover {
background-color: #E2E2E2;
color: #000;
}
ul.sub {
display: none;
position: absolute;
left: 0px;
padding-left: 0;
}
ul.sub-second {
display: none;
list-style: none;
left:100px;
top: 0;
position: absolute;
}
ul#nav li:hover ul.sub {
display: block;
}
ul#nav li:hover ul.sub li:hover ul.sub-second {
display:block;
}
}
I have a list in html that I am formatting as a drop down menu in CSS, however, when I hover over, only the first half of the text is responding, as opposed to the entire length of it, and I can't figure out which property to change in order to make this hover area longer.
thanks!
code:
#navbar {
position: relative;
margin: 10px;
margin-left: -27px;
/*height: 13px; */
float: left;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #00AA63;
color: #fff;
text-decoration: none;
}
#navbar li ul {
color: #fff;
display: none;
width: 10em;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
/*width: 200%;*/
}
#navbar li:hover li {
float: none;
/*width: 200%;*/
}
#navbar li:hover li a {
background-color: #00AA63;
color: #fff;
border-bottom: 1px solid #fff;
color: #fff;
}
#navbar li li a:hover {
color: #fff;
background-color: #33BB96;
}
Jquery stuff:
document.getElementById("menu").innerHTML += '<ul id="navbar">'
+ '<li>other electives'
+ '<ul id="navbar">'
+ '<li>Subitem One</li>'
+ '<li>Second Subitem</li>'
+ '<li>Numero Tres</li></ul>'
+ '</li>'
edit:
implementation:
http://jsfiddle.net/CLVwv/1/
The problem is because you have set negative margin on each ul.
Just remove the padding from .navbar and reduce the margin to get the spacing you desire.
.navbar {
position: relative;
margin: 10px 1px;
/*height: 13px; */
float: left;
padding-left: 0px;
}
You can also reduce your CSS by removing the ID tags and using a .navbar class, this will also make your code more flexible as you don't have to add any new CSS each time you wish to add an item to the menu:
.navbar {
position: relative;
margin: 10px 1px;
/*height: 13px; */
float: left;
padding-left: 0px;
}
.navbar li {
list-style: none;
overflow: hidden;
}
.navbar li a {
display: block;
padding: 3px 8px;
background-color: #00AA63;
color: #fff;
text-decoration: none;
}
.navbar li ul {
color: #fff;
display: none;
width: 10em;
}
.navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
/*width: 200%;*/
}
.navbar li:hover li {
float: none;
/*width: 200%;*/
}
.navbar li:hover li a {
background-color: #00AA63;
color: #fff;
border-bottom: 1px solid #fff;
color: #fff;
}
.navbar li li a:hover {
color: #fff;
background-color: #33BB96;
}
HTML:
<ul class="navbar">
<li>other electives
<ul class="navbar">
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
<ul class="navbar">
<li>other electivesother electives
<ul class="navbar">
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
<ul class="navbar">
<li>other electives
<ul class="navbar">
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
See http://jsfiddle.net/georeith/CLVwv/2/ for a working solution.
The reason that's happening is because of the negative margins you have on the ul's. ul#navbar2 is covering #navbar1 and #navbar3 is covering #navbar2.
Is there a reason you need three seperate ul's? If you use the following html the issue is resolved:
<ul id="navbar">
<li>other electives
<ul class="navbar">
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
<li>other electivesother electives
<ul class="navbar">
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
<li>other electives
<ul class="navbar">
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
I also added a 3px padding to #navbar li:
#navbar li {
list-style: none;
float: left;
padding-right: 3px;
}
See the fiddle: http://jsfiddle.net/2wFjA/1/
I'm trying to create a page with a navigation bar that has dropdown submenus. Unfortunately, something keeps going wrong: hovering over an option makes the submenu show up over the bar and list the submenu options horizontally.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Toy CSS</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<style>
/* -------------------------MAIN-MENU----------------------- */
#topmenu ul {
margin-left: 0; /* clears default margins */
padding-left: 0; /* clears default padding */
background-color: #036;
color: white;
float: left;
width: 100%; /* creates complete bar */
font-family: arial, helvetica, sans-serif;
}
#topmenu li {
display: inline;
}
/* ----------------------MAIN-MENU-LINKS-------------------- */
#topmenu a {
padding: 3px 10px;
}
#topmenu a:link, #topmenu a:visited {
padding: 0.2em 1em;
background-color: #036;
color: white;
float: left;
border-right: 1px solid #fff;
text-decoration: none; /* removes link underlining */
}
#topmenu a:hover {
color: #fff;
background-color: #369;
}
/* --------------------------SUBMENU------------------------ */
#topmenu li ul {
display: none;
background-color: #69f;
}
#topmenu li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#topmenu li:hover li {
float: none;
}
#topmenu li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}
#topmenu li li a:hover {
background-color: #8db3ff;
}
/* -------------------------------------------------------------------------------- */
.mainbox {
border: 2px solid black;
float: left;
margin: 10px 0px 0px 0px;
min-height: 500px;
padding: 20px;
width: 600px;
}
.mainbox ul li {
width: 500px;
}
.mainbox {
display: none;
}
</style>
</head>
<script>
$(function() {
$('#topmenu li a').click(function(e) {
e.preventDefault();
var tabContent = this.hash;
$(tabContent).show().siblings('.mainbox').hide()
});
});
</script>
<body>
<!-----------–-–-–-–--------TOP-MENU-------------------------->
<div id="topmenu">
<ul>
<li>
Option A
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
<li>A4</li>
<li>A5</li>
</ul>
</li>
<li>
Option B
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
<li>B4</li>
</ul>
</li>
<li>
Option C
</li>
</ul>
</div>
<!-----------–-–-–-–---------OPTIONS-------------------------->
<div id="optiona" class="mainbox">
<h2>Option A</h2>
<p>You've selected Option A. Here is a list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="optionb" class="mainbox">
<h2>Option B</h2>
<p>You've selected Option B. Here is a list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="optionc" class="mainbox">
<h2>Option C</h2>
<p>You've selected Option C. Here is a list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
Thanks so much for your help!
#topmenu ul li {
display: list-item;;
}
#topmenu ul li ul {
margin-top:25px !important;
}
Should do the trick...
See it in action
that root of the problem is that
#topmenu li {
display: inline;
}
is cascading, so that the submenu <li/>s are also inline. you should correct it with something like
#topmenu li li {
display: block;
}
and go from there :)