I have CSS code like this:
.nav {
background: #5d2c2c;
background-repeat: repeat-x;
height: 30px;
margin: 0;
padding: 0 10px;
list-style: none;
text-align: right;
}
.nav li {
position: relative;
margin: 0;
padding: 0;
display: inline;
padding: 5px;
}
.nav li a {
color: #b89885;
text-decoration: none;
line-height: 30px;
}
.nav li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
text-align: left;
background: #5d2c2c;
}
.nav li > ul {
top: auto;
left: auto;
}
.nav li:hover ul {
display: block;
}
The HTML part looks like this:
<ul class="nav">
<li>
Introduction
</li>
<li>
History
</li>
<li>
National Flags
</li>
<li>
International Maritime Signal Flags
<ul>
<li>
Maritime Signals: Letters
</li>
<li>
Maritime Signals: Numbers
</li>
</ul>
</li>
</ul>
Everything is working OKAY expect the navigation on sub menu is on the in the middle more to the right, but it should be on the left.
The image of how it should be:
Set the padding of .nav li ul to 0 (or to your liking).
nav li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
text-align: left;
background: #5d2c2c;
padding: 0;
}
http://jsfiddle.net/mppwY/
Related
I have a dropdown menu in my website which I want to be exactly in line with the "Resources" tab (which opens up the dropdown menu when I hover over it). I have tried adding margins to the ul inside the "Resources" li, but it isn't changing the styling the way I want it to. Am I entering the CSS in the wrong selector or even using the wrong properties?
Here is my HTML and CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: orange;
}
nav {
width: 100%;
height: 60px;
background-color: black;
display: flex;
}
nav p {
text-align: center;
font-family: arial;
color: white;
font-size: 24px;
line-height: 55px;
float: left;
padding: 0px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative; /* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 14px;
padding: 22px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px; /* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li{
width: 130px; /* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
}
<nav>
<p> The Novel Column </p>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
Add
nav ul li ul {
left: 50%;
right: auto;
transform: translateX(-50%);
}
left: 50% positions the left edge of the dropdown in the center of its parent. Then translateX(-50%) moves it to the left by half of the dropdown's width. Lastly right: auto ensures that the dropdown's width doesn't get messed up.
Demo:
https://jsfiddle.net/7Lzb8u6t/
Add translateX() CSS property to move your box, you can play with transform value and match your exact location,
for more information 1 rem = 16px;
* {
margin: 0;
padding: 0;
}
body {
background-color: orange;
}
nav {
width: 100%;
height: 60px;
background-color: black;
display: flex;
}
nav p {
text-align: center;
font-family: arial;
color: white;
font-size: 24px;
line-height: 55px;
float: left;
padding: 0px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative; /* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 14px;
padding: 22px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px; /* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(3rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li{
width: 130px; /* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
}
<nav>
<p> The Novel Column </p>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
Can someone help me what is wrong with my code why the "admin's" tab drop down menu does not stay on place where it should be. It should be below the admin tab, however when you put the mouse on the admin tab the drop down goes on the tab beside the admin. I tried to designate an id for the admin's ul however, nothing works. Stays the same. Thank you very much!!
HTML code
<div id="navbar">
<ul>
<li> Home</li>
<li> About us</li>
<li> Games
<ul>
<li> All Games</li>
<li> Outdoor Games</li>
<li> Indoor Games</li>
<li> Games in Groups </li>
<li> Games in Pair</li>
</ul>
</li>
<li>Admin
<ul id="list">
<li>Add entry</li>
<li>Passwor request / suggestions</li>
</ul>
</li>
<li> Contact us</li>
<li> Log out</li>
</ul>
</div>
CSS code:
/*CSS Naigation Bar*/
#navbar {
width: 100%;
height: 100%; }
#navbar ul {
width: 90%;
position: fixed;
list-style: none;
padding: 0;
margin: 0;
top: 0;
left: 12.5%;
right: 0;
z-index: 1;}
#navbar ul li {
background-color: black;
opacity: 0.7;
float: left;
height: 25%;
width: 16.5%;
padding: 0;
margin: 0;
font-family: Arial;
font-weight: bold;
font-size: 16.5px;
text-align: center;
line-height: 20px;}
#navbar ul li a {
display: block;
padding: 7% 10%;
text-decoration: none;
color: #E4E4E4;}
#navbar ul li a:hover {
background-color: transparent;
color: white;
text-shadow: 0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white;}
#navbar ul li ul {
list-style: none;
width: 20%;
padding: 0;
margin: 0;
position: absolute;
display: none;
top: 100%;
left: 32%;
right: 40%;
z-index: 1;}
#navbar ul li ul li {
width: 100%;
float: none;
background-color: black;
opacity: 10;
text-align: center;}
#navbar ul li:hover ul {
display: block;}
#navbar ul li ul #list{
list-style: none;
width: 20%;
padding: 0;
margin: 0;
position: absolute;
display: none;
top: 100%;
left: 50%;
right: 40%;
z-index: 1;}
/*end*/
Add position: relative to the parent list item.
#navbar ul li {
position: relative;
}
And you might want to add a width to the child list item, so it is readable.
#navbar ul li ul li {
width: 150px; /* for example */
}
Think that was your issue? Here's the fiddle I created
Remove list id; you don't need it; and replace this one css :
#navbar ul li ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
position: relative;
display: none;
top: 100%;
left: 0;
right: 0;
z-index: 1;
}
Remove left right from #navbar ul li ul
add top padding to #navbar ul li ul
Set width 100% #navbar ul li ul
add position relative to #navbar ul li
#navbar ul li {
background-color: black;
opacity: 0.7;
float: left;
height: 25%;
width: 16.5%;
padding: 0;
margin: 0;
font-family: Arial;
font-weight: bold;
font-size: 16.5px;
text-align: center;
line-height: 20px;
position:relative;}
#navbar ul li ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
padding-top:10px;
position: absolute;
display: none;
top: 100%;
z-index: 1;}
Fiddle:
http://jsfiddle.net/f3sokdxt/
refer https://jsfiddle.net/95rqykjx/
CSS changes are follows,
#navbar ul li ul, remove width: 20%; and left: 32%;
#navbar ul li add position: relative;
Add position: relative to #navbar ul li and
left: 0; width: 100%; to #navbar ul li ul
Hope this will solve your problem.
#navbar {
width: 100%;
height: 100%;
}
#navbar ul {
width: 90%;
position: fixed;
list-style: none;
padding: 0;
margin: 0;
top: 0;
left: 12.5%;
right: 0;
z-index: 1;
}
#navbar ul li {
background-color: black;
opacity: 0.7;
float: left;
height: 25%;
width: 16.5%;
padding: 0;
margin: 0;
font-family: Arial;
font-weight: bold;
font-size: 16.5px;
text-align: center;
line-height: 20px;
position: relative;
}
#navbar ul li a {
display: block;
padding: 7% 10%;
text-decoration: none;
color: #E4E4E4;
}
#navbar ul li a:hover {
background-color: transparent;
color: white;
text-shadow: 0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white;
}
#navbar ul li ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
position: absolute;
display: none;
top: 100%;
left: 0;
right: 40%;
z-index: 1;
}
#navbar ul li ul li {
width: 100%;
float: none;
background-color: black;
opacity: 10;
text-align: center;
}
#navbar ul li:hover ul {
display: block;
}
#navbar ul li ul #list {
list-style: none;
width: 20%;
padding: 0;
margin: 0;
position: absolute;
display: none;
top: 100%;
left: 50%;
right: 40%;
z-index: 1;
}
<div id="navbar">
<ul>
<li> Home</li>
<li> About us</li>
<li>
Games
<ul>
<li> All Games</li>
<li> Outdoor Games</li>
<li> Indoor Games</li>
<li> Games in Groups </li>
<li> Games in Pair</li>
</ul>
</li>
<li>
Admin
<ul id="list">
<li>Add entry</li>
<li>Passwor request / suggestions</li>
</ul>
</li>
<li> Contact us</li>
<li> Log out</li>
</ul>
</div>
i have a menu i'm developing at this link:
http://events.discoverportland.net/
The menu should load to a blue square just to the right of the discover portland logo. There are serveral nested ul's in the menu, the problem i'm having is getting them to load to the side of the menus above them As it load now, you can't get to the teritairy links unless you move VERY fast.
Is there any way to get the uls to load inline as i'm hovering over them, or is there a better solution?
this my nav html:
<nav>
<div class="clearfix hd8 suckerfish" >
<ul id="md">
<li>Home2</li>
<li>Neighborhoods
<ul>
<li>Northwest
<ul>
<li>Pearl District</li>
<li>Oldtown-Chinatown </li>
<li>Nob Hill</li>
</ul>
</li>
<li>Southwest
<ul>
<li>West End</li>
<li>Riverplace-South Waterfront</li>
<li>Downtown</li>
</ul>
</li>
<li>Southeast
<ul>
<li>Sellwood-Westmoreland</li>
<li>Hawthorne</li>
<li>Clinton-Division</li>
</ul>
</li>
<li>Northeast
<ul>
<li>Alberta</li>
<li>Lloyd District</li>
<li>Hollywood District</li>
</ul>
</li>
<li>North
<ul>
<li>Mississippi</li>
<li>Williams</li>
<li>St. Johns</li>
</ul>
</li>
</ul>
</li>
<li>Itineraries</li>
<li>Day Trips</li>
<li>Food+Drink
<ul>
<li>Dining Picks</li>
<li>Food Cart Fare </li>
<li>Beer, Wine & Spirits</li>
<li>Café Culture</li>
</ul>
</li>
<li>To Do
<ul>
<li>Shopping</li>
<li>Recreation</li>
<li>Culture
<ul>
<li>Galleries</li>
</ul>
</li>
<li>Family</li>
</ul>
</li>
<li>Events</li>
</ul>
</nav>
this is the css i'm using:
nav ul ul li a::before {
content: "\f0da";
font-family: FontAwesome;
margin-right: 8px;
}
nav {
text-transform:uppercase;
font-family: Oswald,Arial,Helvetica,sans-serif !important;
font-size: 14px;
font-weight: 100 !important;
letter-spacing: 1px!important;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #FF0066;
padding: 2px 0 0 64px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #FF0066;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 15px 20px;
color: #fff; text-decoration: none;
}
nav ul ul {
background: #FF0066; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 25px;
color: #fff;
font-family: 'Fira Sans', sans-serif;Important;
font-size: 12px;
}
nav ul ul li a:hover {
background: #AD0548;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
nav ul ul ul li {
width: 275px !important;
}
#media (max-width: 767px) {
#logo a {
background: rgba(0, 0, 0, 0) url("http://discoverportland.net/templates/urbanlife/images/logos/DP_HeadingLogo2.png") no-repeat scroll 0 0 / 100% auto;
height: 60px;
margin: 0 !important;
width: 60px !important;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover #md {
display: inline-block;
}
}
As per title, I have got the code almost working I think, but due to having limited knowledge on CSS, I am making stupid mistakes/assumptions. Any help with explanation would be much appreciated.
The fiddle link is here
ul {
padding: 0;
list-style: none;
background: #ffffff;
}
ul li {
color: #0000ff;
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a {
display: inline-block;
padding: 8px 25px;
background-color: #FFFFFF;
text-decoration: none;
width: 140px;
}
ul li a:hover {
background-color: #FFFFFF;
}
ul li ul.dropdown {
min-width: 125px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 500;
}
ul li:hover ul.dropdown {
border: 2px solid #0000ff;
display: block;
padding-left: 50px;
background-color: #ffffff;
}
ul li:hover a:hover ul.dropdown {}
<div id="mylinks">
<ul id="mylists" href="#">
<li>MY LIST MENU
<ul class="dropdown">
<li><span id="level1" onclick="location.href='http://www.google.co.uk/'" title="Go Google"> First item<span>
</li>
<li> Second item
</li>
</ul>
</li>
</ul>
</div>
You need to set a correct position for the dropdown list:
ul li ul.dropdown {
min-width: 125px;
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 150px;
top: 0;
}
Notice that left was set to 150px and top was set to 0.
I've tried everything I can do get the "Rentals" element to fill the entire width of the dropdown menu, but nothing seems to work. Any ideas? I've tried modifying widths, using nowrap, etc... nothing seems to work (ps. this is part of a custom responsive design so if something seems out of place it might be because I'm resetting something that was previously defined)
nav ul {
display: inline;
width: auto;
position: relative;
top: 70px;
list-style-type: none;
padding: 0px;
margin: 0px;
font-family: Raleway, Arial, sans-serif;
z-index: 10;
}
nav ul li {
display: inline-block;
position: relative;
width: auto;
list-style-type: none;
background-color: transparent;
padding: 0px;
}
nav ul li a {
display: inline;
color: #FFF;
font-size: 14px;
padding: 5px 5px;
text-decoration: none;
border-bottom: none;
}
nav ul a:hover,
nav ul a:active {
background-color: #9a1414;
}
nav ul ul {
display: none;
position: absolute;
top: 26px;
left: 0px;
z-index: 10;
}
nav ul li:hover > ul {
display: block;
background: #333;
border-top: 1px solid #666;
}
nav ul ul li {
float: left;
display: block;
margin-top: 5px;
margin-bottom: 5px;
}
<nav>
<ul id="nav">
<li>
Search
<ul>
<li>Search MLS
</li>
<li>Commercial
</li>
<li>Rentals
</li>
</ul>
</li>
<li>Agents
</li>
<li>Property Management
</li>
<li>Open Houses
</li>
<li>Local
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>