Im trying to make a vertical menu that produces a horizontal menubar on hover. So far I have kind of gotten it to work but there is a gap between the first li and the sub li.
For example, i want it to look like this:
x
xxxx
x
Instead, it looks like this:
x
x xxx
x
Here is my html:
<ul id="mainmenu">
<li>Top 1
<ul class="submenu">
<li>sub 11
<li>sub 12</li>
</ul>
</li>
<li>Top 2
<ul class="submenu">
<li>sub 21
<li>sub 22</li>
</ul>
</li>
</ul>
Here is my css:
#mainmenu {
margin: 0;
padding: 0;
list-style-type: none;
}
#mainmenu li {
clear: left;
}
#mainmenu a {
display: block;
overflow: hidden;
float: left;
background-color: white;
border: 1px solid black;
color: black;
font-weight: bold;
text-decoration: none;
width: 10em;
text-align: center;
margin:0;
}
.submenu {
list-style-type: none;
float: left;
display: none;
}
#mainmenu li a:hover {
display: block;
color: white;
background-color: black;
}
#mainmenu li a:hover+.submenu, .submenu:hover{
display: block;
display: inline;
}
.submenu li {
float: left;
clear: none !important;
}
.submenu li a:hover {
color: white;
background-color: black;
}
You need to add this:
.submenu {
margin: 0;
padding: 0
}
You have already done this for ul#mainmenu, but you've forgotten to do it for the ul.submenus.
Also, check your HTML. You're missing a couple of </li>. With a HTML5 doctype, you are allowed to omit them, but it's confusing (for humans) if you do so.
it's a little bit hard to see it in this form, but I have impression that you did not clear padding and margin for "li" element. you did it only for "a" and "ul" (mainmenu)
Related
I have a problem with the navigation bar. When I hover over About or Text on the nav bar it shows a spacing on the left side of the button, I want it the hover colour to contain the full width of the button.
https://jsfiddle.net/jdd3h0sf/3/
HTML:
<div id="nav">
<ul>
<li class="home">Home</li>
<li>About</li>
<li>Text ⌄
<ul class="submenu">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
<li>Work</li>
<li>Contact ⌄
<ul class="submenutwo">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
</ul>
CSS:
#nav {
background-color: #333;
height: 52px;
text-align: center;
margin: 0 auto;
letter-spacing: 1px;
text-transform: uppercase;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li {
border-right: 1.8px solid #191919;
height: auto;
width: 156.5px;
padding: 0;
margin: 0;
}
.home {
border-left: 1.8px solid #191919;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #444;
}
#nav ul li a, visted {
color: #ccc;
display: block;
padding: 15px;
margin: 0;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #444;
border: 1px solid #333;
border-top: 0;
max-width: 169px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:visited {
color: #ccc;
}
#nav ul ul li a:hover {
color: #2980B9;
}
This is a part of display:inline-block;. If you want to keep them displayed inline-block, there are several different solutions (Read a css-Tricks article about it):
1 - Change your HTML format:
Change your <li>'s html like this:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
Or this:
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
Or even with comments, like this:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
Or, just place all the li's on a single line:
<ul><li>one</li><li>two</li><li>three</li></li>
It is messy, yet effective.
2 - Negative margins:
Pretty straightforward:
li{
display: inline-block;
margin-right: -4px;
}
3 - Skip the closing tag:
This is actually perfectly fine in HTML5, li's do not have to have a closing tag.
<ul>
<li>one
<li>two
<li>three
</ul>
4 - Set the <ul>'s font size to 0:
ul {
font-size: 0;
}
ul li {
font-size: 16px;
}
5 - Or, just float the <li>'s:
Whatever floats your boat.
You are experiencing the dreaded inline-block spacing issue. In your fiddle, if you condense all of your li elements to be on the same line, the hover works as expected. The linked article outlines a few other options.
You can also just float the elements and that would resolve the issue.
#nav ul li {
float: left;
}
As a HTML/CSS newbie, I am trying to create a centered horizontal main menu with vertical drop down submenus.
The submenus are supposed to perfectly align with the parent main menu element.
Cannot attach picture due to lack of reputation points, but have a visualization in case that could help anyone.
In my current set-up, the submenu items (Directions and Google Maps) are aligned completely to the left and I cannot get them nicely under the main menu item (Location). I believe the solution lies with the absolute/relative positioning of elements, but I cannot figure out how to implement it without destroying the general layout.
Finally, the sub-menu boxes should all have the same width, while the main menu items can vary according to their normal length.
The end result would be similar to this example, unfortunately the code for it gives a 404 error.
This is my HTML:
#nav {
color: orange;
list-style: none;
font-weight: bold;
text-align: center;
border: 1px solid orange;
border-width: 1px 0;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 1ex;
text-decoration: none;
color: orange;
}
#nav a:hover {
text-decoration: none;
color: white;
background-color: orange;
}
#nav li ul {
display: none;
list-style: none;
position: absolute;
}
#nav li ul li {
display: block;
border-bottom: 1px solid orange;
border-width: 1px 0;
text-align: left;
}
#nav li:hover ul {
display: block;
}
<ul id="nav">
<li>Home
</li>
<li>
Location
<ul>
<li>Directions
</li>
<li>Google Maps
</li>
</ul>
</li>
<li>Pictures
</li>
<li>Prices & Availability
</li>
<li>General Info
</li>
<li>Reservations & Contact
</li>
</ul>
Apologies for the newbie requests & cheers to all for helping!
Parent(#nav li) must be positioned relatively.
Initially ul renders with some padding, you should add padding: 0 to get proper alignment.
#nav {
color: orange;
list-style: none;
font-weight: bold;
text-align: center;
border: 1px solid orange;
border-width: 1px 0;
padding: 0;
}
#nav li {
display: inline;
position: relative;
}
#nav a {
display: inline-block;
padding: 1ex;
text-decoration: none;
color: orange;
}
#nav a:hover {
text-decoration: none;
color: white;
background-color: orange;
}
#nav li ul {
display: none;
list-style: none;
position: absolute;
padding: 0;
left: 0;
}
#nav li ul li {
display: block;
border-bottom: 1px solid orange;
border-width: 1px 0;
text-align: left;
}
#nav li:hover ul {
display: block;
}
<ul id="nav">
<li>Home
</li>
<li>
Location
<ul>
<li>Directions
</li>
<li>Google Maps
</li>
</ul>
</li>
<li>Pictures
</li>
<li>Prices & Availability
</li>
<li>General Info
</li>
<li>Reservations & Contact
</li>
</ul>
i have simple css & html menu. it's fine, but i try to move some links to right, but when i try, all of these goes. i tried with inside - and still nothing. Can someone help me?
#forum-nav,
#forum-nav ul {
list-style: none;
padding-left: 20px;
padding-right: 20px;
width: 960px;
}
#forum-nav {
float: left;
}
#forum-nav > li {
float: left;
}
#forum-nav li a {
display: block;
height: 28px;
line-height: 2em;
padding: 0 1.0em;
text-decoration: none;
}
#forum-nav ul {
position: absolute;
display: none;
z-index: 999;
}
#forum-nav ul li a {
width: 80px;
}
#forum-nav li:hover ul.dropdown {
display: block;
}
/* Main menu
------------------------------------------*/
#forum-nav {
background:#597288;
}
#forum-nav > li > a {
color: #fff;
font-weight: bold;
}
#forum-nav > li:hover > a {
background: #889bac;
color: #fff;
}
.active {
background: #889bac;
color: #fff;
}
/* Submenu
------------------------------------------*/
#forum-nav ul{
margin-left: -20px;
}
#forum-nav ul a {
border-top: 1.5px solid #fff;
width: 100%;
padding-left: 20px;
padding-right: 20px;
background: #597288;
}
#forum-nav ul li a {
color: #FFF;
}
#forum-nav ul li:hover a {
background: #889bac;
}
#forum-nav ul li:last-child a {
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
and html:
<ul id="forum-nav">
<id="m_index">LINK ON LEFT</li>
<id="m_index">LINK ON LEFT</li>
AND I WANT IN ON RIGHT
<id="m_index">LINK ON RIGHT</li>
<id="m_index">LINK ON RIGHT</li>
</ul>
how can i move it, and still it will be works fine?
Firstly, you haven't actually defined any li elements within your ul so your markup is invalid, secondly you need to add a rule in your CSS to float the last two list items to the right.
Change your HTML to:
<ul id="forum-nav">
<li>LINK ON LEFT</li>
<li>LINK ON LEFT</li>
<li>LINK ON RIGHT</li>
<li>LINK ON RIGHT</li>
</ul>
And add to your CSS:
#forum-nav li:nth-child(3),#forum-nav li:nth-child(4){
float:right;
}
nb. if you want to float all children other than the first two to the right you can use:
#forum-nav li:nth-child(n+3){
float:right;
}
nb. per Chriz's answer- id attributes must be unique.
html
<ul id="forum-nav">
<li>LINK ON LEFT</li>
<li>LINK ON LEFT</li>
AND I WANT IN ON RIGHT
<li class='right'>LINK ON RIGHT</li>
<li class='right'>LINK ON RIGHT</li>
</ul>
css
.right { float:right; }
Note : give li open tag, and giving same id more element is not good practice, this CSS classright will do your job
i'm creating a site for a bookstore and the designer wants to represent the menu as seperate piles of books. I have 4 piles with different amount of books (read menu items). I can create the menu with ul containing 4 li's (piles) which contain ul with li's (books). I have to stick to the ul and li notation because the menu will be created like that by Joomla.
The problem is that the books look like they float to the ceiling instead of lying on the shelf. How can i make the books lie down on the shelf?
Example: http://jsfiddle.net/cJ8an/
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
background: red;
padding: 2px 10px;
}
a:hover {
color: black;
}
ul li {
float: left;
list-style: none;
}
ul li ul {
margin-right: 25px;
}
ul li ul li {
float: none;
margin-top: 5px;
}
hr {
clear: both;
height: 10px;
background: brown;
}
</style>
</head>
<body>
<ul>
<li>
<ul>
<li>HOME</li>
</ul>
</li>
<li>
<ul>
<li>BOEKENTIPS</li>
<li>MEER DAN BOEKEN</li>
<li>NIEUWS</li>
</ul>
</li>
<li>
<ul>
<li>LEZERSBLOG</li>
<li>BESTELFORMULIER</li>
<li>VERTELTHEATER</li>
<li>ANTROPOSOFIE</li>
</ul>
</li>
<li>
<ul>
<li>CONTACT</li>
<li>SCHOLEN</li>
<li>KINDEROPVANG</li>
</ul>
</li>
</ul>
<hr id="bookshelf" />
</body>
</html>
display:table used in a clever way seems to have worked. This will need some tweaking, but I'm sure you can take it from here. Good luck. http://jsfiddle.net/tmpQM/
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
background: red;
padding: 2px 10px;
}
a:hover {
color: black;
}
ul {
display:table;
}
ul li {
display:table-cell;
list-style: none;
vertical-align:bottom;
}
ul li ul {
margin-right: 25px;
display:block;
}
ul li ul li {
float: none;
margin-top: 5px;
display:inline-block;
}
hr {
clear: both;
height: 10px;
background: brown;
}
i'm new to html and css and I was wondering how I would go about creating a drop down img/box that has options in it. here is an example of what i'm talking about.
in this example, when you hover over the community button you get a list of options. Is there anyway of achieving this in css?
thanks in advance.
see this ( using CSS and HTML only)
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active">Item one
<ul id="subnavlist">
<li id="subactive">Subitem one</li>
<li>Subitem two</li>
<li>Subitem three</li>
<li>Subitem four</li>
</ul>
</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
</ul>
</div>
CSS
ul#navlist { font-family: sans-serif; }
ul#navlist a
{
font-weight: bold;
text-decoration: none;
}
ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul#navlist li { float: left; }
ul#navlist li a
{
color: #ffffff;
background-color: #003366;
padding: 3px;
border: 1px #ffffff outset;
}
ul#navlist li a:hover
{
color: #ffff00;
background-color: #003366;
}
ul#navlist li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }
ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}
ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}
ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}
ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }
Working DEMO
Reference
Check this
30 Jquery animated drop down menus
Try this page... cssMenuMaker
there's several types of menus, pick the one you like the most and set the colors and style you like and download, images and css included...
Hope it helps...
list of mouse events html5 http://www.w3schools.com/html5/html5_ref_eventattributes.asp