I'm trying to make a Nokia-like horizontal menu (like here) but without success.
As you can see on my JSFiddle I can't get the white background of the active menu item to take the full height of the blue menu-container minus 1 px at the top. How could I achieve that? Many thanks
HTML:
<div id="menu-container">
<div id="menu">
<ul>
<li>Category 1</li>
<li class="active">Category 2</li>
<li> <a title="" href="">Category 3</a>
</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</div>
<!-- End DIV Menu -->
</div>
CSS:
#menu-container {
display: table;
width: 100%;
background: #124191;
height: 50px;
padding-left: 20px;
color: #fff;
}
#menu {
vertical-align: middle;
display: table-cell;
}
#menu ul {
float: left;
list-style: none;
}
#menu ul li {
display: inline-block;
width: 130px;
line-height: 18px;
text-align: center;
color: #124191;
font-weight: 400;
font-size: 12px;
background: #fff;
}
#menu ul li a {
text-decoration: none;
font-weight: 400;
font-size: 12px;
/* This is the sub-menu items */
display: block;
}
#menu ul li a:active {
background: fff;
}
Perhaps this is what you're looking for:
Add this to #menu ul:
#menu ul {
height:49px;
margin:0;
}
and this to #menu ul li:
#menu ul li {
height:100%;
}
JSfiddle
Related
I'm training my CSS to pass to JS, but I'm worried because I'm having some problems doing a drop-down menu.
The concept I already get, but when I put it to work, it's kind of bugging, and moving the nav.
header {
overflow: auto;
}
header img {
float: left;
margin-left: 300px;
margin-top: 10px;
}
header img:hover {
opacity: 0.8;
}
nav {
float: right;
margin-right: 250px;
margin-top: 40px;
}
nav ul {
padding: 0px;
}
nav ul li {
display: inline;
margin-right: 50px;
border-right: 1px solid black;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color: black;
text-decoration: none;
font-weight: bold;
font-family: roboto;
margin-right: 50px
}
nav ul li a:hover {}
nav li ul {
display: none;
}
nav li:hover ul {
display: block;
position: relative;
}
nav li:hover li {
float: none;
}
<header>
<img src="logo.png">
<nav>
<ul>
<li>
Menu 01
<ul>
<li>Submenu 01</li>
</ul>
</li>
<li>Menu 02</li>
<li>Menu 03</li>
<li>Menu 04</li>
</ul>
</nav>
</header>
I sent the code with the img tag just to make clear the position of the stuff. I'm also learning the stuff, so it'll probably be very bad in others monitors.
nav li ul{
display: none;
position:absolute;
}
nav li:hover ul{
display: block;
}
thats all
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;
}
I am working on a project and I am assigned to show a nested menu, I mean Drop down menu but I dont know what am I doing wrong here. Can anyone help me out ?
HTML
<div id="nav">
<ul>
<li>Menu Num 1</li>
<li>Menu Num 2
<ul>
<li>Sub Menu 2.1</li>
<li>Sub Menu 2.2</li>
<li>Sub Menu 2.3
<ul>
<li>Sub Sub Menu 2.3.1</li>
<li>Sub Sub Menu 2.3.2</li>
<li>Sub Sub Menu 2.3.3</li>
<li>Sub Sub Menu 2.3.4</li>
</ul>
</li>
<li>Sub Menu 2.4</li>
</ul>
</li>
<li>Menu Num 3</li>
<li>Menu Num 4</li>
</ul>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
#nav ul {
list-style-type: none;
font-size: 0px;
}
#nav ul li {
display: inline-block;
position: relative;
}
#nav ul li a {
padding: 10px;
display: block;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
border: 1px solid #008080;
margin: 5px;
}
#nav ul li a:hover {
background: #a1a1a1;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
position: absolute;
display: block;
width: 100%;
}
My only problem is the li items are not shown properly under each parent li. I need a solution and for further code inspection I have a jsFiddle link.
I have a solution of your problem .you have to do some changes in your css sheet .I add a new block on content in css sheet which helps you to solve your problem.
* {
margin: 0px;
padding: 0px;}
#nav ul {
list-style-type: none;
font-size: 0px;
}
#nav ul li {
display: inline-block;
position: relative;
}
#nav ul li a {
padding: 10px;
display: block;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
border: 1px solid #008080;
margin: 5px;
}
#nav ul li a:hover {
background: #a1a1a1;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul{
position: absolute;
display: block;
width: 100%;
}
#nav ul ul li:hover > ul{
position: absolute;
margin-left:100px;
top:0px;
display: block;
width: 100%;)/* CSS Document */
Trying adding display:block; to your top level hover class
#nav ul li a:hover {
background: #a1a1a1;
display:block;
}
I came across this which may be useful for you http://htmldog.com/techniques/dropdowns/
I'm having trouble showing a drop down menu in the correct way. This is what I get to see:
This is my HTML code:
<nav class="menuBox">
<ul>
<li>HOME</li>
<li>KLASSEMENTEN</li>
<li>KALENDER</li>
<li>NIEUWS</li>
<li>MEDIA</li>
<li>LINKS</li>
<li>
INLOGGEN
<ul>
<li class="first">
ADMIN
</li>
<li>
EDIT ACCOUNT
</li>
<li class="last">
LOG OUT
</li>
</ul>
</li>
</ul>
</nav>
My CSS code:
/* ### menu Box ### */
.menuBox { position: absolute; top: 74px; right: 2px; }
.menuBox ul { list-style: none; }
.menuBox li { float: left; margin-left: 17px; font-size: 14px; text-transform: uppercase; }
.menuBox li a { color: #3f3f3f; text-decoration: none; display: block; padding-bottom: 14px; }
.menuBox li a:hover { background: url(../images/menu_hover.png) repeat-x 0 bottom; }
.menuBox ul li ul{ display: none; }
.menuBox ul li:hover ul{ display: block; }
I would like to have something like this:
But how can I do this?
add this to your CSS:
.menuBox ul li ul li {
display: block;
float:none;
}
Explanation: you're floating your li elements, but you need to clear the floats for the second level of li elements (those in the sub menus), thus you need to add this declaration.
See fiddle here
I have a simple nav with some ULs and LIs. But in some LIs I have another UL to create a sub menu but the submenu is just going towards the right side.
See this fiddle.
HTML:
<header>
<h1 style="float: left; margin-top: 2%;"> Naughty Mama.</h1>
<nav>
<ul>
<li>My Profile
</li>
<li>Inbox
</li>
<li> Notifications
<ul>
<li>Notification 1</li>
<li>Notification 2</li>
<li>Notification 3</li>
</ul>
</li>
</ul>
</nav>
</header>
CSS:
header {
background-color: #ddd;
}
nav {
float: right;
margin-right: 5%;
margin-top: 2%;
}
nav ul li {
display: inline-block;
background-color: #eee;
vertical-align: top;
}
nav ul li a {
color: #fff;
text-decoration: none;
display: block;
padding: 15px;
}
nav ul li a:hover {
color: #000;
background: #aaa;
}
nav ul li ul li {
display: block;
}
How can I align those double nested LIs to left side of the main menu?
Hope I am clear.
Thanks in advance.
Here you go
nav ul li ul{
padding-left:0px;}
Reset your CSS
ul { padding:0;}
Are you talking about doing something like this?
Changes:
nav {
float: right;
margin-right: 5%;
margin-top: 2%;
}
nav ul {
padding-left:0;
margin-left:0;
}
nav > ul { position:relative; }
nav ul li ul {
display: block;
position:absolute;
left:0;
}