I am trying to do a Menu that will appear when Window width is resized to a small resolution. Below is the HTML and CSS are below
<nav>
<a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
<ul>
<li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
<li>Articles</li>
<li>Webinars</li>
</ul>
</nav>
CSS:
nav ul
{
list-style:none;
}
nav li{
display:inline;
line-height:1.5px;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
text-decoration:none;
font-size:1.4em !important;
outline:1px solid blue;
padding:8px;
letter-spacing:0.9px;
margin-left:18px;
}
nav li:not(:first-child) > :only-child{
color:blue;
}
nav ul > :first-child a{
color:white !important;
background:blue;
}
Output in Horizontal:
Home Articles Webinars
How can I bring back the list to Vertical then set "ul" position to absolute and make "nav a" to be visible. The list should display vertically like below
Home
Articles
Webinars
nav{
position:relative;
}
nav ul
{
position:absolute;
top:40px; /* this height is same as the menu.png */
left:0;
z-index:999;
list-style:none;
}
nav li{
list-style:none;
display:block;
}
nav ul li a{
display:block;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
text-decoration:none;
font-size:1.4em !important;
outline:1px solid blue;
padding:8px;
letter-spacing:0.9px;
margin-left:18px;
}
nav li:not(:first-child) > :only-child{
color:blue;
}
nav ul > :first-child a{
color:white !important;
background:blue;
}
<nav>
<a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
<ul>
<li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
<li>Articles</li>
<li>Webinars</li>
</ul>
</nav>
Related
I cannot get my drop down menu items to display correctly. Each items in the list (4 of them) appear on top of each other. Any help is greatly appreciated.
this is my html:
<nav>
<ul >
<li><a href='#'><span>SERVICES</span></a>
<ul>
<li><a href='../escuela_eng.html'><span>Equest Sch</span></a></li>
<li><a href='../hst_eng.html'><span>Horse Assist </span></a></li>
<li><a href='../car_eng.html'><span>Care and Recuperation</span></a></li>
<li><a href='../ht_eng.html'><span>Training</span></a></li>
</ul>
</ul>
</nav>
and css:
nav
{
position:absolute;
right:0px;
bottom:0;
left:-.7em;
}
nav ul
{
list-style:none;
}
nav ul li
{
display:relative;
float:left;
padding:0px 15px;
}
nav ul li ul {
display: none;
position:relative;
top:15px;
left:0;
}
ul li ul li {
display:block;
float:none;
position:absolute;
background: #F0EFE7;
padding:0px 10px;
}
ul li:hover ul {
display:block;
position:relative;
margin-left:-17px;
}
nav ul li a
{
font-family: 'HelveticaNeue-UltraLight', cursive;
text-transform:uppercase;
transition: all .25s ease;
position:relative;
float:left;
}
nav ul li a:hover
{
color:#E56038;
}
Many thanks in advance for your help
Remove 'position:absolute' and add 'clear:both; overflow:auto;' to the ul li ul li
Fiddle: http://jsfiddle.net/kc79mwbr/
<style>
nav
{
position:absolute;
right:0px;
bottom:0;
left:-.7em;
}
nav ul
{
list-style:none;
}
nav ul li
{
/* display:block;
*/
/* float:left;
*/
padding:0px 15px;
}
nav ul li ul {
display: none;
/* position:relative;
*/
top:15px;
left:0;
}
ul li ul li {
/* display:block;
*/
/* float:left;
*/
/* position:relative;
*/
background: #F0EFE7;
padding:0px 10px;
}
ul li:hover ul {
display:block;
position:relative;
margin-left:-17px;
}
nav ul li a
{
font-family: 'HelveticaNeue-UltraLight', cursive;
text-transform:uppercase;
transition: all .25s ease;
/* position:relative;
*/
/* float:left;
*/
}
nav ul li a:hover
{
color:#E56038;
}
/*span,a,li{
display:block;
}*/
</style>
<nav>
<ul >
<li>
<a href='#'>
<span>
SERVICES
</span>
</a>
<ul>
<li>
<a href='../escuela_eng.html'>
<span>
Equest Sch
</span>
</a>
</li>
<li>
<a href='../hst_eng.html'>
<span>
Horse Assist
</span>
</a>
</li>
<li>
<a href='../car_eng.html'>
<span>
Care and Recuperation
</span>
</a>
</li>
<li>
<a href='../ht_eng.html'>
<span>
Training
</span>
</a>
</li>
</ul>
</ul>
</nav>
I commented out a lot of the positioning and floating. I think they were causing problems. You could put a max-width on the menu if you wish it to be a certain width.
Please try this code
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
nav {
position:absolute;
right:0px;
/*bottom:0;*/
left:-.7em;
}
nav ul{
list-style:none;
}
nav ul li{
display:relative;
float:left;
padding:0px 15px;
}
nav ul li ul {
display: none;
position:relative;
/*you will need set top margine in such a way that there wont be any blank space between parent menu item and sub menu items*/
top:15px;
left:0;
/*line below will prevent displacement of submenu towards right*/
padding-left: 0;
}
ul li ul li {
display:block;
float:none;
/*position:absolute;*/
background: #F0EFE7;
padding:0px 10px;
overflow: auto;
clear: both;
}
ul li:hover ul {
display:block;
position:relative;
/*margin-left:-17px; */
}
nav ul li a{
font-family: 'HelveticaNeue-UltraLight', cursive;
text-transform:uppercase;
transition: all .25s ease;
position:relative;
float:left;
}
nav ul li a:hover{
color:#E56038;
}
</style>
</head>
<body>
<nav>
<ul >
<li><a href='#'><span>SERVICES</span></a>
<ul>
<li><a href='../escuela_eng.html'><span>Equest Sch</span></a></li>
<li><a href='../hst_eng.html'><span>Horse Assist </span></a></li>
<li><a href='../car_eng.html'><span>Care and Recuperation</span></a></li>
<li><a href='../ht_eng.html'><span>Training</span></a></li>
</ul>
</ul>
</nav>
</body>
</html>
You will see following changes
ul li ul li doesn't need to have position:absolute - this was the main reason behind sub-menu items were overlapping each other.
Only for testing purpose I have commented nav's bottom:0;
Few of the suggestions
Please apply classes to ul's and li's
Manage padding and magines more efficiently.
Please refer following links for more info
StackExchange for Submenu CSS
CSS-Tricks for Submenu CSS
Your concerns
I have tested this code in Firefox and I can select the menu items.
Displacement of Sub-menu items has been taken care of in the updated code provided in the answer
To prevent certain alignment / float issues (with referenced to Latest Evetns and Contact) links you will need to test it with FLOAT attributes.
I'm currently designing a Nav menu that includes ul, li and a elements. I'm trying to produce an effect where hovering over an a tag will only change the background color near the text for the link itself instead of the whole li area around it.
HTML:
<nav>
<div class="full_menu">
<ul>
<li>Login</li>
<li>About</li>
<li>FAQ</li>
<li>Blog</li>
<li>Our Team
<ul>
<li>Bob</li>
<li>James</li>
<li>Tom</li>
</ul>
</li><!--End team dropdown -->
</ul>
</div>
CSS:
nav {
margin:0 auto;
text-align:center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display:block;
}
nav ul {
background: #17A74A;
padding:0px;
list-style:none;
position:relative;
display: inline;
border:0px;
}
nav ul li {
float:right;
margin-top:0px;
}
nav ul li a {
display:block;
padding:33px 40px;
color:#000;
text-decoration:none;
font-weight:bold;
font-size:18px;
}
nav ul li a:hover {
background-color:#2D6AF7;
color:#FFF;
}
nav ul ul {
background:#17A74A;
position:absolute;
top:71px;
}
nav ul ul li {
float:none;
border-bottom:1px solid #FFFFFF;
}
nav ul ul li a {
padding:15px 40px;
color:#FFF;
}
nav ul ul li a:hover {
background:#27BCDD;
}
nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
I thought that by using nav ul li a:hover would fix this problem but the whole li area is still changing its background color instead of just the immediate area around the link text.
Any help would be greatly appreciated!
Do you want to achieve following result? I've removed the padding from your <a> elements and added them to the <li> elements instead.
JSFiddle
You need to change the padding to a margin if you don't want the whole thing to change color. Try this:
nav ul ul li a {
margin:15px 40px;
color:#FFF;
}
Background color (red) misses out after I am hovering drop down items.
What should I do to keep the background color of the menu item I am in?
<style>
nav ul
{
list-style-type:none;
padding:0px;
text-align:center;
background-color:grey;
}
nav ul li
{
display:inline-block;
}
nav ul a
{
display:block;
padding:20px;
padding-left:50px;
padding-right:50px;
text-decoration:none;
color:black;
text-transform:uppercase;
font-family:arial;
font-size:20px;
}
nav ul a:hover
{
background:red;
}
nav ul ul {
display: none;
}
nav ul li:hover ul{
display:block;
position:absolute;
}
nav ul ul li
{
display:block;
border-bottom:solid 1px black;
}
</style>
</head>
<body>
<nav>
<ul>
<li>one</li>
<li>two
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>three
<ul>
<li>ay</li>
<li>bee</li>
</ul>
</li>
<li>four</li>
</ul>
</nav>
</body>
This is because the parent li is not attracting the :hover, so a hover on the child submenu doesn't keep it active. As such, you need to move the style change to the li:hover instead of the a child, as the submenu is an sibling of the a and not direct child.
Change:
nav ul a:hover {
background:red;
}
To:
nav ul li:hover {
background:red;
}
Demo Fiddle
Do you guys have any idea how to remove the right border on my drop down menu? I tried putting right-border: none, right-border: hidden, and right-border: 0px but nothing!
HTML :
<section class="menu">
<ul>
<li><a class="active" href="#"> PORTFOLIO </a>
<ul>
<li> illustrations </li>
<li> portraits </li>
<li> environments </li>
<li> life drawings </li>
</ul>
</li>
<li> STORE
<ul>
<li> society6 </li>
<li> redbubble </li>
</ul>
</li>
<li> CONTACT </li>
<li> ABOUT </li>
</ul>
</section>
CSS :
.menu {
height:29px;
width:100%;
/*background:orange;*/
}
.menu ul {
width:auto;
list-style-type:none;
font-family:"calibri", "arial";
}
.menu ul li {
position:relative;
display:inline;
float:left;
width:auto;
border-right: 2px solid purple;
margin-left:10px;
line-height:12px;
}
.menu ul li a {
display:block;
padding:3px;
color:#854288;
text-decoration:none;
font-size:20px;
font-weight:strong;
padding-right:25px;
}
.menu ul li a:hover, .active {
color:#788d35
}
.menu ul li ul {
display:none;
}
.menu ul li:hover > ul {
display:block;
position:absolute;
top:23px;
float:left;
padding-left:20px;
text-align:left;
margin-left: -30px;
}
.menu ul li ul li {
position:relative;
min-width:135px;
max-width:1350px;
width:100%;
}
.menu ul li ul li a {
padding: 3px;
margin-left: 1px;
border-right: hidden; /* <---- DOES NOT WORK */
}
This removes border from the main menu (after the last item About) :
.menu ul li:last-child{ border:none; }
JSFiddle
If you also want to remove border from the nested lis, you should add border:none to .menu ul li ul li :
JSFiddle
try this
#right_border_less{
border:solid;
border-right:none;
}
I need to align this navigation menu centered horizontally on the page. I would also like to reduce the size of the box the text appears in.
JSFiddle: http://jsfiddle.net/6W2qm/
HTML
<nav>
<ul class="navigation">
<li>Home</li>
<li>Biography</li>
<li>Media
<ul>
<li>Pictures</li>
<li>Videos</li>
</ul>
</li>
<li>Tour</li>
<li>Contact</li>
</ul>
</nav>
CSS
nav {
height:100px;
list-style:none;
text-align:center;
width:1024px;
}
nav ul ul {
display:none;
padding:0;
position:absolute;
top:10%;
}
nav ul li:hover > ul {
display:block;
}
nav ul {
list-style:none;
margin:0;
padding:0;
position:relative;
}
nav ul:after {
clear:both;
content:"";
display:block;
}
nav ul li {
float:left;
width:100px;
}
nav ul li a {
display:block;
padding:25px 40px;
text-decoration:none;
width:0;
}
nav ul ul li {
float:none;
position:relative;
}
nav ul ul li a {
padding:15px 40px;
}
I can't tell about the rest of your page when you only provided a small amount of the code, but this looks OK now.
JSFiddle: http://jsfiddle.net/D9z3s/
I changed the following line to 50% instead of 10% and it doesn't overlap anymore:
nav ul ul {
padding: 0;
position: absolute;
top: 50%;
}